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.<\/p>\r\n\r\n
\r\nbackground: -webkit-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: -moz-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: -o-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\n<\/pre>\r\n\r\nLooks pretty innocent at first glance, but there’s a major issue. Did you spot it?<\/p>\r\n\r\n
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.<\/p>\r\n\r\n
The old draft<\/a> – 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<\/a>, 0 degrees points up and moves clockwise. So this is what I really needed:<\/p>\r\n\r\n
\r\nbackground: -webkit-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: -moz-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: -o-linear-gradient(-45deg, #CFCFCF, #DADADA 15px);\r\nbackground: linear-gradient(135deg, #CFCFCF, #DADADA 15px);\r\n<\/pre>\r\n\r\nAnd 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.<\/p>\r\n\r\n
And then Chrome came out with Blink and said no more prefixes<\/a> (Firefox too<\/a>). So I guess I should have learned my lesson sooner. Oh well.<\/p>\r\n\r\n
For more pontification on vendor prefixes, here’s Paul<\/a> and Nicholas<\/a>.<\/p>\r\n","protected":false},"excerpt":{"rendered":"
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?…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1110","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1110"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=1110"}],"version-history":[{"count":25,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions"}],"predecessor-version":[{"id":1370,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/1110\/revisions\/1370"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=1110"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=1110"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=1110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}