About six months ago (sorry, I meant to write this post sooner), I almost pushed some CSS to production that would have caused some trouble.

background: -webkit-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:    -moz-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:      -o-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:         linear-gradient(-45deg, #CFCFCF, #DADADA 15px);

Looks pretty innocent at first glance, but there’s a major issue. Did you spot it?

I’d gotten so used to dropping in vendor prefixes that I’d forgotten what they really are: experimental implementations of potentially unfinished specifications. So I wrote the unprefixed version at the end without a second thought. Imagine my surprise when my browser updated and the gradient turned completely backwards.

The old draft – and all the unprefixed implementations – use algebraic notation for angles, which means that 0 degrees points to the right and moves counter-clockwise. However, in the candidate recommendation, 0 degrees points up and moves clockwise. So this is what I really needed:

background: -webkit-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:    -moz-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:      -o-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);
background:         linear-gradient(135deg, #CFCFCF, #DADADA 15px);

And so I learned an embarrassing lesson: don’t write an unprefixed property before it’s been implemented by a major browser – demonstrating that the standard is stable.

And then Chrome came out with Blink and said no more prefixes (Firefox too). So I guess I should have learned my lesson sooner. Oh well.

For more pontification on vendor prefixes, here’s Paul and Nicholas.