Joel Hassan

CSS - Styling (vendor) Prefixes

2019-06-18

cssvendorprefix


Introduction

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.

TL;DR

Basically, they:

  • do not affect the styling itself
  • are used by browsers to implement new CSS features early
  • disappear once cross-browser support for said styling is achieved
  • can be avoided (manual coding) through the use of autoprefixer

What are they?

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:

Mozilla:

- moz - 

Opera:

- o - 

Microsoft:

- ms - 

To what end?

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; 

Do I need to write them manually for properties?

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.

Conclusion

That's all there is to that - another bit of CSS weirdnesss demystified (for me atleast).


Resources:

Vendor-specific Properties — SitePoint

Comparison of browser engines - Wikipedia

CSS3 - CSS: Cascading Style Sheets | MDN

Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way | CSS-Tricks