Last updated on 25th Feb 2014

This isn't meant to be a complete guide, just a quick reference for some of the more common vendor prefixes. You need to check your own user base, but based on what is in my opinion sensible choices, this is the way to go!

As always, http://caniuse.com/#cats=CSS is the best resource for this sort of thing.

No Vendor Prefixes

border-radius Unless you need Firefox 3.6 and lower or iOS 3.2

box-shadow Unless you need Firefox 3.6 and lower or iOS 4.3 and Safari 5.0

text-shadow Never needed any!

border-image

Just one Vendor Prefix

CSS Transitions Use -webkit- for Safari 6.0

CSS 3D Transforms Use -webkit- for Safari and Chrome

CSS Animation Use -webkit- for Safari and Chrome

CSS Gradients Use -webkit- for Safari

Box Sizing Use -moz-.

CSS Calc Use -webkit- for Safari 6.0

Flex Box Use -webkit- for Safari

Multiple Vendor Prefixes

CSS Transforms Use -webkit- for Safari and Chrome and -ms- for IE9

Columns -webkit- and -moz-.

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus

avenue-origin