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

#css #css3

Есть вот такой фон на 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-? Спрашиваю, потому как не совсем понимаю, как это правильно сделать,
т.к. в этом случае добавление к селектору одной приставки мало, и в блоке объявления
стилей это прописывается для каждого браузера по-разному.
    

Ответы

Ответ 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: А вообще, стоило бы воспользоваться автопрефиксером или генератором градиентов.


Ответ 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,
кажется имеет место карго-культ.

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


Ответ 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 создали кроссбраузерный генератор градиента здесь. Также можете воспользоваться
этим сервисом, здесь больше кастомизации.


Ответ 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/


Ответ 5

Есть еще вариант, при котором можно забыть об проблеме.
Прогнать готовый css https://autoprefixer.github.io/ru/
Если используеш таск-ранер: gulp-autoprefixer или аналоги.