Имеет ли смысл определения градиента CSS?

Question

Недавно я много читал о градиентах CSS3, и мне любопытно, имеет значение порядок определений, имеющих отношение к поставщику. Например, я вижу много следующее:

background: #0A284B; 
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), 
                  to(#135887)); 
background: -webkit-linear-gradient(#0A284B, #135887); 
background: -moz-linear-gradient(top, #0A284B, #135887); 
background: -ms-linear-gradient(#0A284B, #135887); 
background: -o-linear-gradient(#0A284B, #135887); 
background: linear-gradient(#0A284B, #135887); 
filter: progid:DXImageTransform.Microsoft.gradient 
     (startColorstr='#0A284B', endColorstr='#135887'); 

Однако, я также иногда вижу примеры определений градиентных CSS, когда декларация фильтра к верхней части, или другие, которые также включают префикс -ms-фильтр, и т.д., и т.д.

Так что я думаю, мои вопросы таковы:

• ли порядок определения значения?
• Должен ли я использовать префикс -ms-filter?

Насколько я могу судить, если обычная декларация фона является первой, а официальный линейный градиент W3C - последним, это не имеет значения.

Следует отметить, что я сосредоточился на линейных градиентах выше, но я думаю, что тот же вопрос относится и к радиальным градиентам.

Answer 1

При работе с префиксным CSS правильный правильный ответ всегда помещается в префиксные версии с последующей версией без префикса.

Так -webkit-whatever и -moz-whatever должна предшествовать простой старый whatever, и обычная версия без префикса должны быть указаны (даже если оно не подкреплено никакими браузерами пока).

Это важно, потому что последняя определенная версия, которая распознается браузером, является той, которая используется, и предпочтительно, чтобы браузер использовал стандартную версию без префикса, если она ее понимает.

Над ун-приставкой версии, порядок отдельных приставочных версий как -moz-, -webkit- и т.д., как правило, неважно - любой данный браузер должен только когда-либо признать один из них, так что это не имеет значения, что других они «Ответ». Общим ответом на это является их порядок в порядке длины, потому что он выглядит аккуратно, но на самом деле это не имеет значения.

В приведенном выше абзаце я подчеркивал «должно», потому что есть несколько случаев, когда некоторые браузеры (например, Opera) реализовали префиксы -webkit-, хотя у них был собственный префикс -o-. Это объясняется тем, что люди не использовали префикс -o-, и они чувствовали, что теряют функциональность на некоторых сайтах, хотя их браузер действительно поддерживает его. По этой причине я бы предпочел сначала определить -webkit-, так что в случаях, когда это выполняется, собственный собственный префикс браузера может иметь приоритет.

Что касается стилей, где старый IE использует стиль filter или -ms-filter вместо стандартного, это опять же не имеет значения, потому что если IE использует фильтр, он не должен использовать стандартный CSS.

Даже если IE распознает как filter, так и стандартный CSS, он все равно не имеет значения в заказе, потому что они рассматриваются как отдельные стили. Точка размещения CSS в определенном порядке должна заключаться в том, чтобы заставить браузер выбирать один над другим, но filter не переопределяет background и не отменяет его, даже если они делают то же самое, поэтому это не имеет значения.

Есть несколько случаев, когда они могут конфликтовать - например, делая вращение с помощью -ms-filter и стандартного transform:rotate() вместе приведет IE9 делает как, и, таким образом, напутать. IE < = 8 знает только -ms-filter и IE10 не поддерживает -ms-filter, так что это зависит только от IE9, но это неприятно, потому что нет способа избежать этого в чистом CSS. Нужно прибегать к коду, зависящему от браузера, или к хакам CSS или скриптам полифилла. Но этот момент не применяется к градиентам, потому что IE9 не поддерживает стандарт CSS.