CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features in a sort of testing and experimentation period. Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.
The CSS browser prefixes are:
- Android:
-webkit-
- Chrome:
-webkit-
- Firefox:
-moz-
- Internet Explorer:
-ms-
- iOS:
-webkit-
- Opera:
-o-
- Safari:
-webkit-
In most cases, to use a more advanced CSS style property, you take the standard CSS property and add the prefix above for each browser. For example, if you want to add a CSS3 transition to your document, you would use the transition property with the prefixes listed first:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
Note: don’t assume that the browser-prefixed version of a property is exactly the same as the standard property. For example, to create a CSS gradient, you use the linear-gradient property. Firefox, Opera, and modern versions of Chrome and Safari use that property with the appropriate prefix. But early versions of Chrome and Safari use the prefixed property -webkit-gradient. Also, Firefox uses different values than the standards.
Vendor Prefixes are Not a Hack
A CSS hack exploits flaws in the implementation of another element or property in order to get another property to work correctly.
A vendor prefix isn’t a hack because it allows the specification to set up rules for how a property might be implemented, while at the same time allowing browser makers to implement a property in a different way without breaking everything else.
They also allow browser makers to create new features in their browsers before the specification has caught up. They can use the prefixes to state that these properties are “in progress.”
Instead of being a hack, vendor prefixes are a proactive approach to prevent problems before they happen.
Vendor Prefixes are Annoying But Temporary
When you use browser prefixes with the standard prefix listed last, you are setting your web pages up to be future proofed. Browsers that use the prefixes will use them and ignore the properties they don’t understand. Browsers that can support the standards based properties will implement them because they are listed last in your style sheet.
Yes, might feel annoying and repetitive to have to write the properties 2–5 times to get it to work in all browsers, but it’s temporary. As browsers improve, they add support for the standards based version of the property, and you can remove the prefixed versions. For example, just a few years ago, to set a rounded corner on a box you had to write:
-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;
But now you really only need the standards version:
border-radius: 10px 5px;
Chrome has supported the CSS3 property since version 5.0, Firefox added it in version 4.0, Safari added it in 5.0, Opera in 10.5, iOS in 4.0, and Android in 2.1. Even Internet Explorer 9 supports it without a prefix (and IE 8 and lower didn’t support it with or without prefixes).
Remember that browsers are always going to be changing and some type of hack will be required unless you’re planning on building web pages that are years behind the most modern methods. And writing browser prefixes is much easier than finding and exploiting errors that will most likely be fixed in a future version, requiring that you find another error to exploit and so on