/

CSS Vendor Prefixes: A Comprehensive Overview and the Decline in their Relevance

CSS Vendor Prefixes: A Comprehensive Overview and the Decline in their Relevance

In the realm of CSS development, vendor prefixes have long been employed by browsers as a means of granting access to newer, yet-unstable features. However, their popularity is waning, with the use of experimental flags gaining traction instead. These flags require deliberate enabling in the user’s browser, serving as a more controlled and cautious approach.

The shift away from vendor prefixes stems from the misuse and premature implementation of these prefixes in production code. Such practices are deemed detrimental by the CSS Working Group. Once a prefix is added and widely adopted, it becomes difficult for browsers to make necessary changes without causing compatibility issues. Consequently, the use of experimental flags allows for greater discretion in the shipment of features, requiring users to consciously enable the flag.

Now, let’s delve into the concept of vendor prefixes.

Previously, I distinctly recall working with CSS Transitions, which necessitated the use of multiple prefixes. Instead of employing the transition property alone, it was mandatory to include various prefixes, as exemplified below:

1
2
3
4
5
6
7
.myClass {
 -webkit-transition: all 1s linear;
 -moz-transition: all 1s linear;
 -ms-transition: all 1s linear;
 -o-transition: all 1s linear;
 transition: all 1s linear;
}

However, with the widespread support provided by modern browsers, a single declaration suffices:

1
2
3
.myClass {
 transition: all 1s linear;
}

The vendor prefixes commonly used are as follows:

  • -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
  • -moz- (Firefox)
  • -ms- (Edge, Internet Explorer)
  • -o- (Opera, Opera Mini)

Considering that Opera and Edge are now based on Chromium, it is likely that the -o- and -ms- prefixes will eventually become outdated. Nonetheless, it is worth noting that vendor prefixes overall are fading in popularity.

The task of writing prefixes can be challenging, primarily due to uncertainty. Determining whether a prefix is necessary and keeping up with ever-changing online resources further complicates the process. However, projects such as Autoprefixer streamline this approach by automating the prefix determination process. Autoprefixer utilizes data from caniuse.com, an invaluable reference site for comprehensive browser support information.

For developers utilizing React or Vue, tools such as create-react-app and Vue CLI come bundled with autoprefixer. Consequently, there is no need for manual intervention in the prefixing process, alleviating developmental concerns.

tags: [“CSS Vendor Prefixes”, “Autoprefixer”, “experimental flags”, “CSS Transitions”, “web development”]