css: background в разных браузерах

339

09 июня 2017, 10:38

Добрый день! Есть вот такой фон на css:

background-image: linear-gradient(45deg, transparent,transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

Подскажите, пожалуйста, как правильно в стиле прописать этот фон для браузеров -webkit-, -moz-, -ms-, -o-? Спрашиваю, потому как не совсем понимаю, как это правильно сделать, т.к. в этом случае добавление к селектору одной приставки мало, и в блоке объявления стилей это прописывается для каждого браузера по-разному. Благодарю!

Answer 1

Нужно добавить соответствующие префиксы к linear-gradient.

При этом, если некий браузер поддерживает несколько реализаций, то более новые должны идти позже более старых (поскольку с ними меньше проблем). По той же причине вариант без префиксов должен идти последним.

Замечу, что у браузеров появилась тенденция поддерживать префикс -webkit, поэтому его стоит написать первым. Да и вообще, довольно распространённая практика - писать префиксы в порядке убывания длины:

-webkit-smth
-khtml-smth
-moz-smth
-ms-smth
-o-smth
smth

Возвращаясь к linear-gradient и вспоминая, что у webkitа есть более старая форма, получим такой порядок:

background-image: -webkit-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

Ещё про градиенты стоит отметить, что префиксные варианты используют from-синтаксис, а принят в итоге был to:

background: -webkit-linear-gradient(top, white 0%, black 100%);
background: linear-gradient(to bottom, white 0%, black 100%);

PS: А вообще, стоило бы воспользоваться автопрефиксером или генератором градиентов.

Answer 2

На седьмое июля 2017-го года градиенты поддерживает 94.62% общей массы браузеров, а градиенты без префиксов — 93.75% (согласно статистике Can I use). А значит, добавляете префиксы вы для 0.87% юзеров, при условии, что ваш сайт посещает полноценная выборка пользователей.

Посмотрим, какие браузеры вы поддерживаете, добавляя префиксы:

Opera Mobile 12-
Android Browser 4.3-
IOS Safari 6.1-
Safari 4...6
Chrome 25-
Firefox 15-

И я полагаю, что сознательно тестировать свой продукт в этих браузерах уже бессмысленно. Даже более — по интернету кочует сниппет с градиентами из года в год, разработчики его добавляют «для кроссбраузерности», но уверен, что на практике кроссбраузерность проверяется совсем не в этих браузерах.

P. S. нигде не нашел упоминания, что ИЕ поддерживал когда-либо синтаксис -ms-linear-gradient, кажется имеет место карго-культ.

Вывод: добавлять префиксы к линейным градиентам не нужно!

Answer 3

Префикс добавляется не к background-image, а к linear-gradient():

background-image: prefix-linear-gradient(options)

Ваш случай:

background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* IE10 Consumer Preview */ 
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Mozilla Firefox */
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Opera */ 
background-image: -webkit-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* Webkit (Chrome 11+) */ 
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%); /* W3C Markup, IE10 Release Preview */

Microsoft создали кроссбраузерный генератор градиента здесь: ссылка. Также можете воспользоваться этим сервисом, здесь больше кастомизации: ссылка

Answer 4

background-image: -ms-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -moz-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -o-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -khtml-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: -webkit-linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);
background-image: linear-gradient(45deg, transparent, transparent 48%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 52%);

А еще есть инструмент для создания кроссбраузерных градиентов: http://www.colorzilla.com/gradient-editor/