Вендорные префиксы

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

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

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

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

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

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

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

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

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/
-moz-opacity:0.5;/* Mozilla 1.6 */
-khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */
opacity:0.5/*  Safari 2.0+ , Chrome, Firefox Opera, */

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

В своем блоге разработчики 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 фильтр выглядел так:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/

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

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/

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

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

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

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

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

-webkit-transition:background-color 5s ease-in 3s;/* работает в Safari 3.1+, Chrome 1+ */
-o-transition:background-color 5s ease-in 3s;/* работает в Opera 10.5+ */
-moz-transition:background-color 5s ease-in 3s;/* планируется для Firefox 4.0+ */
transition:background-color 5s ease-in 3s;/* в прямом виде не поддерживает ни один браузер */

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

Проверено в:

• Opera 10.5
• Safari 4
• Chrome 5

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

Подытожим

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

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

Заметка

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

Материалы

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