Search code examples
cssbrowservendor-prefix

What is the purpose of CSS prefixes?


I know that if we want to make sure some CSS3 features work everywhere we need to use the prefixed versions of the W3C recommended one like:

transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-webkit-transition: all 1s ease;

I know that the prefixes are used for experimental features, but why are they necessary? Why don't they test them on the original W3C one? Does every CSS3 feature has or had a prefix for every browser or they just create a prefixed version if they think they should?


Solution

  • The original purpose of vendor prefixes was to give vendors the ability to add their own non-standard features for use in their CSS implementations. However, most of them are used for experimental versions of things that eventually become standards.

    If an experimental property is unprefixed, it implies that it's the correct, standard version of a property. If every browser renders it differently, then there isn't much of a standard. Instead, a browser avoids implementing an unprefixed property until it's sure that it's done so according to the standard, then it starts supporting the unprefixed property as a way of saying it supports this particular standard correctly.

    Not every feature has a prefix; indeed, a vendor creates a prefix only if it deems it necessary.