Префиксы — это специфичные для поставщика имена, помеченные для начала свойств CSS. Например, вам требуется следующий код для поворота элемента на 10 °:
-moz-transform: rotate(10deg); /* Firefox 3.5+ */
-o-transform: rotate(10deg); /* Opera 10.5+ */
-webkit-transform: rotate(10deg); /* Chrome and Safari3.1+ */
-ms-transform: rotate(10deg); /* IE9 */
transform: rotate(10deg);
(При желании вы можете использовать фильтр Microsoft DXImageTransform.Microsoft.Matrix для поддержки IE6 и IE7).
Зачем нам нужны префиксы?
Во-первых, вы должны понимать, что веб-стандарты не продиктованы W3C. Консорциум не несет ответственности за инновации — это остается за поставщиками браузеров.
Например, предположим, что Opera изобрела новое свойство CSS с именем ‘polygon’, которое волшебным образом преобразовало прямоугольный элемент в стандартную форму, например
polygon: 6; /* a hexagon */
Теперь подумайте, что, по чистой случайности, Mozilla также работала над собственной реализацией свойства polygon. Однако вместо нескольких сторон Mozilla предпочла именованное значение:
polygon: hexagon;
Это оставляет веб-разработчиков с серьезной головной болью. Если они хотят использовать свойство многоугольника, невозможно поддерживать оба браузера одновременно. Сбой числового значения в Firefox, а именованного значения — в Opera.
Префиксы поставщиков решают проблему, например,
-o-polygon: 6; /* Opera support */
-moz-polygon: hexagon; /* Firefox support */
Microsoft и / или команда webkit могут создать собственную реализацию полигонов. Если два или более поставщика согласны, свойство многоугольника в конечном итоге станет частью спецификации CSS W3C.
Проблема совместимости подчеркивается относительно новым синтаксисом градиента фона. Команда webkit реализовала довольно сложное, но универсальное решение. Реализация Mozilla ближе к черновому варианту спецификации W3C — но это все еще черновой документ, который может измениться:
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#000000),color-stop(1,#ffffff));
background-image: -moz-linear-gradient(top,#000000,#ffffff);
Префиксы все еще необходимы?
Приведенный выше пример поворота подчеркивает несколько проблем:
- код многословен
- слишком легко забыть префикс и
- каждый поставщик поддерживает один и тот же синтаксис.
Префиксы — это решение проблемы, которая встречается редко. Поставщики браузеров не работают изолированно: Microsoft, Apple, Mozilla, Google и Opera являются членами W3C, и ни один из них не реализовал бы свою собственную функцию, не обращаясь к тому, что делали другие.
Рассмотрим свойства -webkit-transition. Команда webkit ведет разработку переходов CSS, и другие следуют. Так зачем нужен префикс? Продавцы вряд ли будут отклоняться от реализации webkit. Серьезные технические проблемы или ошибочные идеи, скорее всего, будут сначала исправлены командой webkit.
Но это не просто новые свойства. Граница радиуса была доступна в течение нескольких лет, и каждый поставщик использует один и тот же синтаксис. Тем не менее, для обеспечения хорошей совместимости браузера разработчикам по-прежнему необходимо использовать:
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Продавцы имеют собственное мнение о том, когда недвижимость достаточно «стандартная». Пройдет много лет, прежде чем свойства границ радиуса, зависящие от поставщика, умрут.
Гуру CSS Питер-Пол Кох особенно беспокоился о префиксах в своем блоге QuirksMode :
Пришло время отменить все префиксы поставщиков. Они стали решениями, для которых нет проблем, и они активно вредят веб-стандартам.
Нужно ли отменять CSS-префиксы?
Требуются ли префиксы поставщиков в эпоху усиления сотрудничества с браузерами? Я сомневаюсь, что любой разработчик хочет использовать префиксы, но являются ли они необходимым злом? Было бы лучше, если бы продавцы добавляли свойства без префиксов, но давали понять, что они являются экспериментальными, а не (пока) стандартом?
Это тема для опроса SitePoint на этой неделе. Пожалуйста, проголосуйте и оставьте свои комментарии ниже …