Dealing with CSS Vendor Prefixes in 2014

Links to my tried-and-true css tools, and an intro to Autoprefixer, which has become indispensable to me for vendor prefixing.

Css3 nskppn

I start to get that 'unclean' feeling when the css starts to grow beyond a certain point. One of the biggest contributors to sheer volume of CSS code is vendor prefixing. You know what I'm talking about... this mess:

	
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

For box-sizing we're not that bad off; 2 extra lines of code to make sure we play nice with most browsers. But you know how overwhelming it starts to get if you're playing with gradients:


background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

Wow that's a lot of friggin code! How can you avoid this? There must be a better way.

Well, if you want to understand all the issues, choices, and best practices about css vendor prefixes, this is not the article to read. When and if you want to explore some details, I recommend Chris Coyier on the subject.

Using my tools

PaaS providors

My routine for generating css snippets includes css3generator for border-radius, box shadow, text shadow, transforms, and more. For gradients, even they point you to Ultimate Gradient Generator!

To feel my pain, all you have to do is copy and paste a few gradients into your css file to see how quickly your document size is exploding. Ridiculous. But anyway, I basically trust that I'll need the slew of prefixed statements they give; I dont take it any further.

And that's the problem. You know the landscape is going to be different in a few months as browsers implement standards. How many of those rules are you really going to need to litter your code with?

Staying informed of CSS standards

If you really wanted or needed to, how would you find out what browsers, in what versions, support which css properties? And then what would be the most updated list of vendor prefixing rules to follow? If it's not a hard problem, then we can say its a tedious one.

Well, luckily that problem is currently being well solved by caniuse.com; its a fantastic, up to date resource about exactly these issues, and more!

You can lookup a css property and see, for example, if you still really need to have all that vendor prefixing for border-radius. At the time of this writing, you'll see it shows you that border-radius has been supported in Chrome and Firefox since at least a few versions back, and even IE since IE9, and currently supported in the latest mobile IE and blackberry browsers; the conclusion: you don't need to prefix border-radius.

Still, in my workflow this is a bit of a distraction from coding. I don't look up these stats for every css declaration.
Wouldn't it be nice if something did it for me automatically?
Wouldn't it be nice if I could just get rid of that clutter in my source?
Wouldn't it be nice if I could run a quick process at whatever point in the future that updated my css source in accordance with current caniuse info?

Autoprefixer rocks!

Rejoice! For Autoprefixer does all that, and it is what I'm using for all my prefixing needs. Basically, as the author points out on the page, it parses css, and adds vendor prefixes using values from caniuse.com! You get a lot of value from this short and seemingly benign statement.

Oh happy day!

Your source is rid of all clutter, and the final result is reconciled with current state of css implementations. You can even control its criteria. You might think this is a novelty solution and doesn't stand up to Prefixr or -prefix-free; but I think this solution is superior, I leave it to you to do the research and decide for yourself.

Take a look at how much cleaner it makes your stylesheets:

Before:


background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */


.three-col {
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
}


.color-ease-in {
	-webkit-transition: color 2s ease-in;
	-moz-transition: color 2s ease-in;
	-ms-transition: color 2s ease-in;
	-o-transition: color 2s ease-in;
	transition: color 2s ease-in;
}

After:


background: rgb(30,87,153); /* Old browsers */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */

.three-col {
	column-count: 3;
	column-gap: 20px;
}

.color-ease-in{
	transition: color 2s ease-in;
}

Can I get a witness?

That's how clean your code looks now! Meanwhile, its pre-processed just like a sass or less file so that you get a normal css file in the end. Its interesting to compare what you wrote with the result.

I've been using the gem autoprefixer-rails in my rails apps for a while. Its seamless. Between this and effective use of scss, it makes it so much easier to get your head around the css. Works with Compass too, btw. There are plugins for Sublime Text (works nice), Brackets, Grunt, and more.

Use it , you wont look back.

comments powered by Disqus