Vendor Prefix
Browser vendors used to add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers could experiment with new ideas. This, in theory, helped to prevent their experiments from being relied upon and then breaking web developers’ code during the standardization process.
Web developers included prefixed features on production websites, despite their experimental nature. This made it more difficult for browser vendors to ensure compatibility while working on new features. Including prefixed features also harmed smaller browser vendors who ended up having to add other browsers’ prefixes in order to render popular websites.
Now, experimental features in browsers are «put behind a flag». This allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.
CSS prefixes
The most common browser CSS prefixes you will see in older code bases include:
- -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser)
- -moz- (Firefox)
- -o- (old pre-WebKit versions of Opera)
- -ms- (Internet Explorer and Microsoft Edge, before Chromium)
-webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease;
If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support transitions without vendor prefixes:
API prefixes
Historically, browser vendors have also used prefixes for experimental APIs. If an entire interface was experimental, then the interface’s name was prefixed (but not the properties or methods within). If an experimental property or method was added to a standardized interface, then the individual method or property was prefixed.
Interface prefixes
Prefixes for interface names are upper-cased:
- WebKit (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
- Moz (Firefox)
- O (Older, pre-WebKit, versions of Opera)
- MS (Internet Explorer and Microsoft Edge, before Chromium)
Property and method prefixes
The prefixes for properties and methods are lower-case:
- webkit (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers (including Firefox for iOS); basically, any WebKit and Chromium-based browser)
- moz (Firefox)
- o (Old, pre-WebKit, versions of Opera)
- ms (Internet Explorer and Microsoft Edge, before Chromium)
.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame;
If you encounter the above code in a code base, you can safely remove all but the first line. All browsers support requestAnimationFrame without vendor prefixes, and without window :
requestAnimationFrame(callback);
See also
Found a content problem with this page?
This page was last modified on Jun 8, 2023 by MDN contributors.
Your blueprint for a better internet.
Зачем нужны вендорные префиксы
У каждого браузера есть свои встроенные, экспериментальные или нестандартные свойства и для того, что бы они корректно работали используют вендорные префиксы. В названии не зря использовано слово префиксы потому что, как и в грамматике, они являются приставкой, только в данном случае к свойству CSS.
Вендорные префиксы представляют собой надпись, которая начитается с «-» или с «_» и для каждого браузера имеет смысл специального маркера, написанного перед CSS свойством.
Использование данного префикса гарантирует работу именно этого стиля в определённом браузере, а также то, что он не перекроется аналогичными стилями, предназначенными для других браузеров.
Как их отличать?
Каждый движок, на котором написан браузер, имеет свой вендорный префикс.
Рассмотрим самые популярные браузеры и их префиксы. Те которые написанны на движке WebKit, а именно Safari выше третьей версии и GoogleChrome, считывают префикс -webkit-, а Safari до третьей версии -khtml-, так как имеет в своей основе движок KHTML. Для Opera можно использовать следующие префиксы: -o-, -op-, -xv-. Firefox воспримет свойства имеющие приставку -moz-, а браузеры корпорации Microsoft те, перед которыми написано -ms-.
Как это выглядит на практике?
Рассмотрим на примере для свойства transition-duration:
-webkit-transition-duration:0.76s; -moz-transition-duration:0.76s; -o-transition-duration:0.76s; -ms-transition-duration:0.76s; transition-duration:0.76s;
Как мы можем видеть, первыми пишутся элементы стиля с вендорными префиксами, для каждого браузера. Стоит обратить внимание, что стиль соответствующий требованиям спецификации пишется последним. Благодаря этой записи, к примеру, Firefox из написанного выше примера воспримет только вторую строчку, а остальные проигнорирует.
Для чего это нужно?
Большинство производителей называют несколько причин, когда нужно использовать вендорные префиксы. Основные, из которых:
- Свойство, которое было написано только для конкретного браузера и не содержится в стандартном списке css.
- Свойство ещё разрабатывается или по каким-то причинам не имеет рекомендаций к использованию
- Css задаёт только часть возможностей стиля.
Разработчики компании Microsoft, помимо выше перечисленных причин, при помощи своего вендорного префикса -ms-, прячут от валидатора те конструкции, которые его не пройдут.
При верстке не возникает ни какого желания прописывать свойство заново и добавлять ему вендорный префикс, однако эта необходимость вызвана тем, что CSS и его спецификация не всегда содержит необходимые нам свойства. Кроме того, есть не маленький шанс, что описание свойства в дальнейшем измениться и использование префиксов будет не нужным.
Дополнительные возможности
Благодаря появлению вендорных префиксов большинство компаний производящих свои браузеры стали внедрять собственные свойства CSS.
Уже сейчас для верстки своих проектов можно исключить некоторые скрипты, заменив их стилями CSS.
Так, к примеру, вышеуказанный стиль позволяет плавно изменять цвет, при наведении не используя JavaScript. Однако если попробовать обойтись без префиксов, то данный стиль в некоторых браузерах может работать не корректно или не работать вообще.
Подводя итоги
Вендорные префиксы — приставки к стилям css, имеющие смысловую нагрузку только для тех браузеров, к которым они относятся. Они дают возможность браузеру воспринимать не стандартные свойства, а также не воспринимать те стили, которые предназначены для других пользовательских клиентов.
Стоит отметить, что свойства, имеющие данный префикс, не пройдут валидации. Однако при правильном использовании они придают большей гибкости CSS, по этой причине большинство веб-студий ими не пренебрегают.