Dropping Support for Vendor Prefixes

Karen Menezes on January 14, 2013 (Updated on July 5, 2014)

Code

If you’re using CSS3 properties for graceful degradation, it’s probably fine to drop vendor-prefix support for certain properties. It’s best to educate clients about future maintenance woes and why it’s absolutely fine if Firefox 3.6 users will see square corners and no shadows, as long as you’re not breaking the site's layout.

My recommendations are below:

box-shadow

Unprefixed works in all latest browsers:

Desktop: IE 9 | FF 4 | Chrome 10 | Safari 5.1 | Opera 10.5

Note: IE and Opera never, ever needed vendor prefixes for box-shadow.

Only use the –webkit prefix if you need to support Android < 4, iOS < 5 and BB 7.

Prefix? I say NO NEED

border-radius

Unprefixed works in all latest browsers:

Desktop: IE9 | FF4 | Chrome 5 | Safari 5.0 | Opera 10.5

Note: IE and Opera never required vendor prefixes for border-radius.
No point using prefixes unless you need to support Android 2.1 and iOS 3.2

Prefix? I say NO NEED

background-size

Unprefixed works in all latest browsers:

Desktop: IE9 | FF4 | Chrome 4 | Safari 4.1 | Opera 10.5

Note: IE never required a vendor prefix.

Prefix? I say NO NEED

box-sizing: border-box

Please prefix with –moz for all versions of Firefox, including Firefox 15 for Android. Use webkit for old iOS, Safari, Android and BB 7.

Update July 1, 2014: Firefox, since version 29 supports box-sizing without prefixes.

Note: IE and Opera never required a vendor prefix, ever.

Prefix? I say YES – continue to use webkit and moz, just to be safe.

Gradients

Vendor prefixes for gradients are pretty complicated.

Unprefixed (the latest syntax) works in the latest IE, FF, Opera.

With prefixes, the history of gradient syntax in CSS is pretty scary. Webkit has been through two versions, Mozilla suggested and implemented a different syntax, old IE had some weird enterprise filters and the W3 spec now lists a new syntax (e.g. using 'to bottom' instead of 'top').

I would suggest using a gradient generator for now like Colorzilla for cross-browser compatibility. It gives you 8 different syntaxes (including propriety filters for old IE and SVG for IE9 support) plus one fallback colour for old browsers. Pick the ones you need and drop the rest, I say. And don’t skip the current standards compliant gradient.

Update (April 8, 2013): Chrome 26 now supports unprefixed gradients.

Update (November 26, 2013): iOS7 for desktop and touch supports unprefixed CSS gradients.

I simply use the current standards syntax, plus the new and old syntax for older webkit. That's three in all. And SVG support for IE9 if I'm feeling generous :)

CSS Transforms

Works unprefixed in latest IE, Firefox, Chrome 36+ and Opera.

Note: IE 9 supports CSS transforms, but not transitions. So you need to use - ms. Chrome and Safari on desktop and touch devices still need the –webkit prefix.

Update (July 5, 2014): Chrome 36+ for desktop will support unprefixed CSS transforms.

Prefix? I say YES – use ms and webkit.

CSS Transitions

Works unprefixed in latest IE, Chrome, Firefox and Opera and Safari.

Note: IE 9 does not support CSS transitions, so no vendor prefix required there.

Update (November 26, 2013): iOS7 for desktop and touch supports unprefixed CSS transitions, but not transforms.

Prefix? I say YES – Prefix with webkit for all Android, desktop Safari and iOS < 7, and Blackberry. Use moz if you want to support Firefox 15 for Android.

Keyframe Animations

Unprefixed works for latest Firefox, IE, Opera.

Prefix? I say YES – use only webkit.

Prefix with webkit for all Chrome and Safari, desktop and mobile and Blackberry. Use moz if you want to support Firefox 15 for Android.

Note: I’ve used the brilliant caniuse.com as my source for current browser support.

Credits

Thumbnail Image by Pankaj Patel on Unsplash

Banner Image by Maik Jonietz on Unsplash

karen.menezes@gmail.com

Dropping Support for Vendor Prefixes

Credits

Related Tags