CSS vendor prefixes or CSS browser prefixes are a way for Web browser vendors to add support for new CSS features before those features are implemented in browsers and released for general public use.
What are Vendor prefixes and why do we need them in our CSS rules? It is common for web browser vendors to experiment on new extensions to CSS and JavaScript APIs as part of their interpretation of an ongoing proposal towards W3C and EcmaScript standardization. This allows web developers to experiment with the new experimental properties of Web technologies and report any issues with them. This would allow the vendors to improve these specialized features and incorporate them into the respective standards for general use across the Internet.
However, the developers must not use these vendor extensions in their production code and release it onto the world wide web as they are unstandardized proprietary extensions and will not be compatible with other web browsers. The extensions are meant for access and use only by a specific vendor’s web browser. Similar implementations of the extensions are made into the web browsers by the vendors and third-parties and exposed through a vendor-prefixed syntax or JavaScript polyfills so the developers can use them.
"Even if a feature is intended to eventually be used in the Web, if it hasn’t yet been standardized it should still not be exposed to the Web." ~ W3C.
Despite the experimental nature of the extensions, the developers have been using the extensions in their product code using vendor-prefixes. There is an ongoing discussion by the vendors to stop using vendor prefixes for experimental features. To this end, the vendors are adding experimental features behind user-controlled flags or preferences to discourage use of vendor-prefixes.
As per W3C - "keywords and property names beginning with '-' (dash) or '_' (underscore) are reserved for vendor-specific extension."
Possible formats for vendor-specific extensions
- '-' + vendor-identifier + '-' + meaningful-name
- '_' + + vendor-identifier + '-' + meaningful-name
Some known properties which need vendor-prefixes
- -moz-border-radius
Example
/* Cross-browser css3 linear-gradient */
.linear-gradient {
/* Gecko browser (Firefox) */
background-image: -moz-linear-gradient(top, #D7D 0%, #068 100%);
/* Opera */
background-image: -o-linear-gradient(top, #D7D 0%, #068 100%);
/* older Webkit syntax */
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #D7D), color-stop(1, #068));
/* Webkit (Safari, Chrome, iOS, Android) */
background-image: -webkit-linear-gradient(top, #D7D 0%, #068 100%);
/* W3C */
background-image: linear-gradient(to bottom, #D7D 0%, #068 100%);
}Web browsers and their CSS prefixes
| Prefix | Web browser |
|---|---|
| -webkit- | Chrome, Safari, newer versions of Opera, iOS browsers, and any Webkit based browsers |
| -moz- | Firefox |
| -o- | pre-Webkit, versions of Opera |
| -ms- | Internet Explorer and Microsoft Edge |
PostCSS Autoprefixer
It is often tedious to include all the vendor prefixes for your CSS rules by hand. Web developers must avoid writing vendor-specific extensions. What you need is a tool that will automatically add those prefixes to your CSS based on the present vendor support for CSS rules. Autoprefixer (@autoprefixer) is the solution! It is a PostCSS plugin which parses your CSS rules and adds vendor prefixes to your CSS. It fetches values from Can I Use.