CSS – Can we transform yet?

Ah yes, the CSS3 transform property, quite possibly one of the best properties introduced in CSS3. If you are unsure what this property is, think of the transform tools in most Adobe CS/Photoshop Elements products, GIMP, and Paint.NET. You have commands such as Scale, Skew, Rotate, and Move at your disposal. That is what the transform property is. It has values called scale, skewX and skewY (“plain old” skew was removed and is not recommended for production), rotate, and translate, in addition to single axis and 3D versions (one in particular, translate3d, is especially popular for use in CSS3 animations and transitions). They are all really cool and powerful. I recommend trying them out soon if you have not already. However, all this powerful coolness comes at a cost: the dreaded vendor prefixes, those evil things that clutter the style sheets and create redundant code in order to produce consistent results across different browsers, even in slightly older versions of the same browser.

However, transform has been around for quite some time now. You might think by now we can remove those prefixes and use the unprefixed version. In this post, we will be exploring the topic of removing the vendor prefixes from your CSS (and update your CSS preprocessor configuration). For this tutorial, we will be tapping into the resources at caniuse and MDN.


Mozilla Firefox

The transform property was first supported with Firefox 3.5 under the -moz- prefix, which was released on June 30, 2009. It was unprefixed in Firefox 16, released back on October 9, 2012. As of this writing, Firefox is on version 33. Unless you have a very specific reason to support the now 5 year old 3.5 release, you can safely drop -moz-transform from your CSS.

WebKit/Blink

WebKit and Blink-based browsers, however, are a very different story. Starting with Chrome 36 (Blink) on the desktop as well as on iOS and Android, the -webkit- prefix has been dropped. Opera 25, also based on Blink, does not require the prefix. Other WebKit based browsers, including Safari (on Mac OS X and iOS) and the Blackberry browser are currently prefixed and will be for an currently unknown amount of time. While hopefully Google taking the initiative and unprefixing transform in the Blink engine will encourage the WebKit engine developers to do the same, sadly, -webkit-transform will need to remain in your CSS for the foreseeable future.

Internet Explorer

First supported in Internet Explorer 9 under the -ms- prefix, and unprefixed in IE 10. Because we only are only at Internet Explorer 11 with no idea when version 12 will be shipped (though we do have an idea of what it will contain), -ms-transform will need to remain in your markup as well.

Opera

And by Opera, I mean Opera 12 and lower, which was based on their in-house Presto rendering engine (Opera 15 and higher are based on Chromium and is covered in the WebKit/Blink section above). Opera only has about 1% of the browser market share, with Opera 12 usage being higher than Opera 20. Opera 10.5-12 uses the -o- prefix, while 12.1 unprefixed it. Opera Mini also uses their Presto engine, but does not support the transform property at all. If you want to support the obscure browser, some game console browsers, and potentially Opera Mini in the future, you could include -o-transform in your styles.

Recap

So, as a quick recap, here is a small chart taking all the information above and condensing it into an almost glance-it-over-and-know-the-results reference sheet.

Browser name Drop it?
Mozilla Firefox Yes
WebKit/Blink (Chrome, Safari, Opera >= 15) No
Internet Explorer No
Opera <= 12 Maybe

Hopefully this information was useful to you! šŸ™‚


Updates

  • 6 September, 2014 with current WebKit/Blink status
  • 14 September, 2014 to clarify Opera status
Advertisements

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s