Doing some basic CSS, I once again came across a prefix I've seen quite frequently in styles - "-WebKit-", and decided to find out what it (and the other prefixes) actually meant.
Prefixes such as:
-webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease;
are known as vendor prefixes and there are several of them, as can be seen above. The syntax is simple - the prefix is preceded and followed by a hyphen + a property name, like so:
'-' + vendor_prefix + '-' + property_name
Using -webkit- as an example, this prefix is meant to be fed to a browser rendering engine named 'WebKit' - the engine used in Safari and Chrome among other apps. Each browser, however, has its own rendering engine, which causes cross-browser compatibility issues - the exact reason why these prefixes are necessary.
Some other prefixes and their vendors from the block above:
- moz -
- o -
- ms -
Well, I found out that browser rendering engines use them to support the latest CSS features (stylings) prior to them being supported by all the other browsers.
The browser's specification determines how a new CSS property should be implemented. It lets developers test out some new styling features on specific browsers immediately, without having to wait for cross-browser support.
A key driver for their use was the introduction of CSS3 . The new CSS standard enabled new, fancier stylings, such as the animation-style 'transition' property seen above. Since the new standard made all sorts of great new stylings possible, it was natural that a plethora of new properties were developed, and designers could leverage these prefixes to use these new effects before they were supported across browsers.
To sum up, all they do is provide early access to certain CSS properties, which eventually end up being absorbed by the specification, and the prefix disappears. They are just a temporary hack.
Take for instance the rounding of a box corner before border-radius support was in place:
-moz-border-radius: 10px 5px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; border-radius: 10px 5px;
Now, the same is achieved with:
border-radius: 10px 5px;
No, thanks to some handy tooling. Writing the prefixes by hand is often long-winded and error-prone, but the good thing is that you can write your CSS without them using Autoprefixer (a CSS post-processor). You just need to add it to whichever building tool you're using - check out the linked article for more information.
That's all there is to that - another bit of CSS weirdnesss demystified (for me atleast).