Для каких свойств нужны префиксы

Всякому такому автору сайта, который

когда-либо

снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).

Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется

префикс «-moz-»,

в Google Chrome и в Apple Safari (и в других браузерах на основе

Webkit) —префикс «-webkit-»,

в Опере —

префикс «-o-»,

в IE —

префикс «-ms-»,

а в Konqueror (и в наиболее ранних версиях

Safari) —префикс «-khtml-».

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

jQuery-плагина

ColorBox закруглённые края и заставить их отбрасывать тень, поневоле придётся записать в CSS вот что:

#cboxPrevious, #cboxNext, #cboxClose {
-webkit-box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

Во-первых, это задалбывает.

Во-вторых, это неэкономично.

В-третьих, всегда существует риск забыть о необходимости указать тот или иной префикс. (В списке «How to avoid common CSS3 mistakes» эта ошибка — на первом месте.)

Поэтому рано или поздно должно было появиться

какое-нибудь

средство, позволяющее автору

CSS-кода

указать одни только безпрефиксные формы

CSS-свойстви CSS-значений —

а автоматика позаботилась бы об их адаптации к каждому конкретному браузеру.

И такое средство появилось — благодаря Lea Verou. Вот оно:

Скрипт

«-prefix-free»,

который занимает всего лишь 2 Kb в сжатом виде, обрабатывает свойства CSS3 и адаптирует их ко браузерам.

Это JavaScript, он работает на стороне читателя. Очевидно поэтому, что скрипт не сработает, если у читателя отключены джаваскрипты; зато он получает возможность непосредственно во браузере проверить и понять, в каких префиксах браузер нуждается, а не полагаться на обнюхивание заголовка

«User-Agent»,

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

Скрипт обрабатывает стили, указанные внутри элементов <style> и в атрибутах

style=”…”,

а также внешние стили, подключённые элементами <link> (но только не из других доменов). Тому примером — стиль самогó сайта

«-prefix-free».

Однако

«-prefix-free»

не умеет обрабатывать стили, подключённые директивою @import.

В браузерах Opera и Google Chrome по умолчанию не поддерживается обработка стилей, подключённых из локальных файлов (она требует донастройки браузера вручную). В браузере IE (а также в Mozilla Firefox

версии 3.6

и более ранних) не работают безпрефиксные значения свойств в атрибутах

style=”…”,

причём в этих старых Файерфоксах — не только значения,

но и имена

свойств.

К скрипту

«-prefix-free»

прилагается пара плагинов: меньший из них позволяет библиотекою jQuery (с помощью

метода .css(…))

считывать и устанавливать свойства CSS3 без префиксов,

а другой плагин

следит за появлением новых элементов <style>

и <link>,

за изменениями атрибутов

style=”…”,

за вызовами методов CSSOM (объектной

модели CSS) —

и оперативно снабжает нужные свойства префиксами.

Правда, у такого слежения опять же есть ограничения: за изменениями атрибутов

style=”…”

(совершаемыми методом

setAttribute())

не удаётся проследить в Webkit, а в Google Chrome к тому же не сработает задание беспрефиксных свойств через CSSOM (например, element.style.transform =’rotate(5deg)’), хотя чтение сработает.

В итоге чтения документации (основные выдержки из которой я только что пересказал) у меня сложилось впечатление,

что «-prefix-free»

может сгодиться для оформления такого сайта, у читателей которого обыкновенно включён JavaScript, а динамическое изменение стилей сводится к управлению скорее классами, нежели напрямую значениями свойств элементов. Что же касается необходимости хранения этих значений не в атрибутах

style=”…”,

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

С другой стороны, конечно, не надо забывать, что префиксы появились не на пустом месте — у них есть своя цель в жизни: преодоление взаимной несовместимости браузеров (в том числе старой и новой версии одного и того же браузера). Подробнее об этом поведал Эрик Мейер в статье «Prefix or Posthack» («A List Apart», 6 июля 2010 года). От подпирания свойств CSS3 «костылём» следует отказываться, когда оно может создать такую несовместимость.

С третьей стороны, употребление префиксов не следует доводить до фанатизма: когда оно лишается смысла, хороший «костыль» всего лишь экономит время автора сайта, не будучи способен привести к проблемам совместимости. Тот же Эрик Мейер у себя в Твиттере похвалил скрипт

«-prefix-free»

и поблагодарил Lea Verou.

Подготовила: Татьяна Шкабко

Дата публикации: 07.09.2010

На первый взгляд кажется, что вендорные префиксы это что-то из разряда грамматики… Вендорные префиксы, вендорные суффиксы и вендорные окончания… Но какое отношение это имеет к верстке?

Оказывается, самое прямое! Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.

Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с “-” или “_” зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.

Какие они бывают?

Вендорные префиксы самых распространенных браузеров приведены в таблице ниже:

Как это работает?

Для элемента прописывается CSS свойство в прямом виде для браузеров, которые его понимают. Следом за ним через точку с запятой перечисляется то же самое свойство, но с разными вендорными префиксами для разных браузеров. Браузер из такого кода интерпретирует только то свойства, которое написано под него, а написанные для других браузеров игнорирует.

Например, CSS свойство opacity, отвечающее за прозрачность элемента, кроссбраузерно используется так:

Для чего это нужно?

В своем блоге разработчики Internet Explorer называют три причины использования вендорного префикса -ms- для браузера IE8:

1. Если это свойство разработано только для Microsoft IE и не описано в спецификации или CSS модуле
2. Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
3. Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации

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

Кроме того, разработчики Microsoft ухитрились с помощью вендорных префиксов скрывать от валидатора невалидные конструкции. Это касается, прежде всего, фильтров. Для IE 5.5-7 фильтр выглядел так:

Такая конструкция пройти валидацию в принципе не может! Но ее преспокойно проходит новая конструкция того же фильтра, но уже для IE 8:

Конечно, не очень хочется в коде писать несколько строчек кода с вендорными свойствами под каждый браузер вместо одной строчки кода со стандартными свойствами. Но не нужно забывать, что спецификация CSS3 пока еще находится в разработке. Возможно, что в описании свойства при стандартизации что-то поменяется, либо его совсем не будет в спецификации. Тогда безусловно разработчикам будет легче отказаться от вендорного свойства и поддерживать стандарты. Согласитесь, если в разных версиях браузера одно и то же свойство будет работать по-разному, ничего хорошего из этого не получится. Пускай лучше в старых версиях браузеров будут работать вендорные свойства, а новые версии будут поддерживать спецификацию в прямом виде, а свойства с вендорными префиксами будут игнорироваться.

Приятный бонус

Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.

Наглядным примером такой реализации может быть использование CSS3 свойства transition. Поставим задачу реализовать для ссылки плавное изменение цвета фона при наведении курсора, не используя JavaScript. Для этого в CSS для ссылки нужно дописать следующий код

Живой пример можно посмотреть тут.

Проверено в:

• Opera 10.5
• Safari 4
• Chrome 5

Кроме того, согласно заявлениям разработчиков, данный демо пример будет также работать в Firefox 4.0, первая бета версия которого вышла в июле 2010 года.

Подытожим

Вендорные префиксы — это специальные приставки к названию CSS свойства, заточенные под конкретный браузер, которые позволяют ему понимать экспериментальные CSS свойства и одновременно игнорировать записи, предназначенные для других браузеров.

Свойства с вендорными префиксами не соответствуют стандартам и не пройдут валидацию. Если тебя это не сильно беспокоит, их можно применять, т.к. в умелых руках это очень мощный инструмент. И многие ведущие студии рунета этим пользуются.

Заметка

Свойства по спецификации всегда пишем последними.

Материалы

• CSS 2.1 Specification:: Vendor-specific extensions
• MSDN:: Microsoft CSS Vendor Extensions
• developer.mozilla.org:: Mozilla CSS Extensions
• quirksmode.org:: CSS vendor prefixes considered harmful
• alistapart.com:: Prefix or Posthack by Eric Meyer

Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Отсортируйте префиксы

Не существует обязательного требования по упорядочиванию префиксов. Тем не менее, настоятельно рекомендуется расположить их в алфавитном порядке, с безпрефиксной версией в конце. То есть правильно было бы сортировать так: moz, ms, o, webkit, а затем свойство без префикса.

Opera недавно добавила поддержку -webkit- префиксов для нескольких CSS свойств. Это было необходимо поскольку многие разработчики используют только префикс для webit, либо попросту не включают префикс opera. Т.к. принято считать, что оба префикса, -o- и -webkit-, обладают одинаковой спецификой, по порядку выигрывает webkit, и если указаны оба, то использован будет именно он. Вы возможно хотели бы использовать -o- для Opera, особенно, если приходится что-то замещать, поэтому было бы уместным предложение сортировать префиксы по длине:

-webkit-property
-moz-property
-ms-property
-o-property
property

Определенное преимущество этого способа состоит в относительно опрятном внешнем виде, а также становится проще заметить, если вдруг какой-то из префиксов был пропущен.

Этот совет, конечно, обладает наименьшей пользой в этой статье, тем не менее, польза от него доказана на практике.

Уберите избыточные префиксы

Некоторое количество CSS3 свойств уже довольно давно доступны к использованию без префиксов, например border-radius. В недавнем прошлом лишь немногие CSS спецификации доросли до уровня, который сейчас считается приемлемым, чтобы производители браузеров могли убрать префиксы. Среди них находятся спецификации Transforms, Transitions, Animations, Multi-Column Layout, Flexbox, и Image Values (градиенты, преимущественно). Различные браузеры находится на различных этапах пути к удалению префиксов, но некоторые уже готовы к этому, в зависимости от того, какие из более старых версий браузеров Вам приходится поддерживать.

box-sizing

Internet Explorer и Opera поддерживали box-sizing без префиксов с тех самых пор, когда спецификация была реализована, так что Вам нужно принимать во внимание лишь браузеры на основе Gecko и Webkit. Firefox до сих пор требует префикс -moz-, в то время как Вы можете опустить префикс для Webkit, если не нужна поддержка:

• Chrome 9 и ниже (~0.30% рынка)
• Safari 5 и ниже (~0.74% рынка)
• Браузер Android 3 и ниже (> 60% девайсов на Android в данный момент)
• Safari на iOS 4.3 и ниже
• Браузер BlackBerry 7 и ниже

Рекомендовано использовать:

-webkit-box-sizing: value; /* рассчитывать на удаление по мере обновления пользователей Android */
-moz-box-sizing: value;
box-sizing: value;

box-shadow

Ситуация с box-shadow практически аналогична box-sizing, за исключением того, что Firefox требует от Вас префикс только в версиях 3.5 и 3.6. Вместе они представляют 0.77% текущего рынка.

Рекомендовано использовать:

-webkit-box-shadow: value; /* удалять по мере обновления Android, либо если наличие box-shadow не так критично */
box-shadow: value;

Лично я бы удалил -webkit-box-shadow, т.к. это чаще всего не критичный элемент стилей, в отличие от box-sizing, который способен поломать разметку.

border-radius

Как и в ситуации с предыдущими двумя свойствами, Opera и Internet Explorer поддерживали border-radius без префикса с момента реализации. Можно опустить -webkit- и -moz- если не нужна поддержка следующих браузеров:

• Firefox 3.6 и ниже (~0.95% рынка)
• Chrome 4 и ниже (~0.05% рынка)
• Safari 4 и ниже (~0.12% рынка)
• Android 2.1 и ниже (~3% актуальных Android девайсов)
• Safari на iOS 3.2 и ниже

Рекомендовано использовать:

border-radius: value;

Более свежие спецификации

Плохая новость в том, что Вам все еще нужно использовать -webkit- в современных версиях Webkit для всех спецификаций, которые перечислены в этом разделе. Хорошая же новость в том, что больше не надо писать префиксы для градиентов, transitions, transforms и анимаций, начиная с:

• Internet Explorer 10
• Opera 12.1
• Firefox 16

К тому же, префиксы никогда не были нужны для все вышеуказанных спецификаций (кроме 2D трансформаций) в IE. 3D трансформации не реализованы в Opera, но можно рассчитывать, что они будут реализованы сразу без префиксов.

Я бы порекомендовал использовать -webkit-, -moz-, -o- и версию без префикса (принимая во внимания то, что ниже будет написано о градиентах), за исключением того, что нужно помнить про префикс -ms- для 2D трансформаций и опускать -o- для 3D трансформаций. В ближайшем будущем можете заняться удалением поддержки Firefox и Оперы, т.к. пользователи обновляются довольно шустро, и в этих браузерах даже близко нет такой проблемы по сравнению с пользователями Android — эти обновляют свою операционную систему с черепашьей скоростью.

Мульти-колоночная раскладка была реализована без префиксов в IE и Опере. Но они по-прежнему необходимы в Firefox и во всех версиях Вебкита.

Flexbox вообще легендарен (позже я напишу об этом), и в связи с этим требует поддержки нескольких различных синтаксисов и префиксов, но поддерживается современными версиями всех браузеров. Свойство реализовано без префиксов в Opera 12.1.

Добавьте свойства без префиксов

Так как упомянутые спецификации теперь готовы к безпрефиксному использованию, настало время для разработчиков этим воспользоваться. В теории, эти свойства больше не должны никак поменяться — по ним достигнуты все необходимые соглашения в рабочих группах CSS.

Среди разработчиков существует два подхода. Первый подразумевает использование в работе безпрефиксных версий свойств. Если Вы практикуете этот подход, то Вам всего лишь нужно удалить неиспользуемые префиксы, но перед этим загляните в следующую главу, т.к. существуют некоторые подводные камни. Второй подход, соответственно, состоит в том, чтобы не пользоваться безпрефиксными версиями. Если Вы из этих, то теперь Вам нужно будет их все добавить. В следующей главе описано, как это делать.

Обновитесь до нового синтаксиса

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

Широко известен тот факт, что border-radius переключился на альтернативный синтаксис, вместо того, который изначально был в Firefox 2. Также известно, что похожая вещь произошла с градиентами, взамен решения Safari. Но наверняка не все знали (а тем более, обновили в живых проектах), что синтаксис градиентов изменился еще раз. Если Вы давненько не притрагивались к своим градиентам, скорее всего куча Вашего кода уже устарела и ждет решительных действий.

Новый синтаксис градиентов

К счастью, до нового синтаксиса очень просто обновиться, и все, что Вам на самом деле необходимо, это обновить безпрефиксную версию. Вы можете оставить префиксы без изменений. Все свежие браузеры поддерживают это нововведение, за исключением Webkit. Да да, Вебкит отстает от IE!

Основное правило: если Вы указываете направление, то оно должно быть перевернуто и предшествоваться ключевым словом to. Таким образом:

background: -prefix-linear-gradient(left, white, black);

Становится:

background: linear-gradient(to right, white, black);

Если Вы указали угол, то начальная точка отсчета сместилась. Ранее точка 0deg находилась на востоке. Углы увеличились против часовой стрелки, так что теперь 90deg начинается на севере. С безпрефиксным синтаксисом линия градиента в 0deg начинается на севере и угол растет по часовой стрелке. Формула перерасчета со старых значений выглядит как abs(oldDegValue − 450) mod 360.

Для круговых градиентов, позиции и длине должно предшествовать ключевое слово at:

background: -prefix-radial-gradient(center, white, black);

Становится:

background: radial-gradient(at center, white, black);

Ключевые слова cover и contain по отношению к размеру градиента больше не поддерживаются. cover меняется на farthest-corner и contain на closest-side.

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

-prefix-radial-gradient(center, 50px 25px, white, black);

Превращается в:

-radial-gradient(50px 25px at center, white, black);

Новый синтаксис Flexbox

Чтобы сосчитать, сколько раз менялся синтаксис Flexbox, у меня не хватит пальцев на руках. К счастью, этот функционал используется реже, чем те же градиенты, в силу того, что сайты попросту ломаются, если flexbox не поддерживается браузером.

На данный момент только Опера поддерживает новый синтаксис без префиксов. Хром поддерживает его с префиксами начиная с Chrome 21, Firefox собирается поддерживать новый синтаксис без префиксов начиная с версии 20, но сейчас ему доступен только старый синтаксис. IE поддерживает слегка устаревший синтаксис, но не тот, который присутствует в старых реализациях Webkit и Firefox. Safari сейчас поддерживает только старую запись. Чтобы добиться максимальной совместимости, Вам нужно использовать:

• Самый свежий безпрефиксный синтаксис: display: flex и компания (Opera, Firefox 20, и возможно Chrome в ближайшем будущем).
• Самый свежий синтаксис с префиксом -webkit-: display: -webkit-flex и компания (Chrome 21). Было бы разумным забить на это и подождать безпрефиксной реализации на старом синтаксисе.
• Старый новый синтаксис с префиксом -ms-: display: -ms-flexbox и компания (IE10).
• Старый синтаксис с -moz- и -webkit-: display: -webkit-box (WebKit), display: -moz-box (Firefox).

Спецификация слишком мудреная, чтобы провести сравнение в рамках этого поста, но можно прочитать о том, как заметить разницу и посмотреть несколько демок старого старого и нового нового синтаксиса на CSS Tricks. Крис не затрагивает старый новый (или же это новый старый…) синтаксис, так что можно сходить за подробностями еще и к документации Flexbox от Microsoft.

Информация о распространении браузеров была взята с StatCounter за декабрь 2012. Данные об актуальных версиях Android взяты из официального отчета Google. Данные для России могут отличаться.