CSS vendor prefixes are used in browsers to add support for new CSS features in their testing and experimentation period, that may not be part of a formal specification.
The CSS browser prefixes are:
-webkit- /* Chrome, Safari, newer versions of Opera, Android and iOS */
-moz- /* Firefox */
-ms- /* Internet Explorer */
-o- /* Old versions of Opera */We face the challenge of supporting different kinds and versions of browsers when developing websites. In most cases, to use a more advanced CSS3 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, you would use the transition property with the prefixes:
-webkit-transition: ANIMATION-NAME 5s ease-in-out infinite;
-moz-transition: ANIMATION-NAME 5s ease-in-out infinite;
-ms-transition: ANIMATION-NAME 5s ease-in-out infinite;
-o-transition: ANIMATION-NAME 5s ease-in-out infinite;
transition: ANIMATION-NAME 5s ease-in-out infinite;Vendor prefixes are annoying
Adding these prefixes to CSS is a routine task for all web designers and frontend developers. It's also hard to keep track of which prefixes are needed and where, as per browsers and their versions. Please keep in mind that the web browsers will continue changing and evolving over a period of time. It is inevitable that you’ll require some type of hack unless you’re keen on building web applications or webpages which are years behind than the ones created with modern methods.
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 apply them because they are listed last, in your CSS class.
It feels annoying and repetitive 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 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).
We have used mixin libraries that get shipped with pre-processors like Compass for SASS. They solve a lot of problems, but create other problems instead. For instance, they force us to use a new syntax, which often changes between major releases.
For example, to add a linear-gradient in SCSS:
.linear-gradient {
@include background-image(linear-gradient(#ffffff, #dddddd));
}It compiles to CSS as shown below:
.linear-gradient {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
background-image: -moz-linear-gradient(top, #ffffff, #dddddd);
background-image: -webkit-linear-gradient(top, #ffffff, #dddddd);
background-image: linear-gradient(to bottom right, #ffffff, #dddddd);
}These pre-processors iterate much slower than modern browsers. A stable release can have a lot of unnecessary prefixes and sometimes we need to create our own mixins.
####So what's the solution?
Autoprefixer is a postprocessor. It doesn’t use any specific syntax and works with common CSS. It parses your CSS files and adds vendor prefix properties and values as per caniuse database. It will only add the necessary prefixes and not bloat your stylesheet. It even lets you specify what browsers you want to target(by default the last 2 versions). It will also remove existing prefixes which are no longer needed.
It can be Integrated with SASS, since it runs after CSS is already compiled. All you have to do is add it to your asset building tool and you can completely forget about CSS vendor prefixes. Just write regular CSS according to the latest W3C specifications without any prefixes. Like this:
For example:
input::placeholder {
color: #999;
background: #f5f5cd;
}It compiles to:
input::-webkit-input-placeholder {
color: #999;
background: #f5f5cd;
}
input::-moz-placeholder {
color: #999;
background: #f5f5cd;
}
input:-ms-input-placeholder {
color: #999;
background: #f5f5cd;
}
input::placeholder {
color: #999;
background: #f5f5cd;
}Incorporate Autoprefixer into your project build system using autoprefixer-rails gem, gulp or grunt. There's also an online compiler, if you want to try compiling CSS snippets with autoprefixer.
If you found this article useful, don't forget to follow us on twitter to get updates on our posts. We're looking for UI/UX experts to join us, so get in touch!.