Do we need box-shadow or border-radius prefixes anymore?
Published by Chris Coyier
Straight forward question by Jay Hughes:
@chriscoyier Do we need -moz and -webkit prefixes anymore on popular items such as border radius and box shadow? Is there a post abt this?
— Jay Hughes (@graphicsjay) November 28, 2012
I didn't specifically have a post about this, so let's do it!
border-radius, probably not.
You only need them if:
- It's a rare situation where the square-corner or no-shadow fallback hurts the experience.
- And your site has significant traffic of Firefox 3.6-, Safari 4-, iOS 3.2-, or Android 2.3-
Let's explore a bit deeper. First, you can see exactly what browsers support what features at Can I use....
Second, you should only make decisions about feature support based on statistics from your own site and nothing else.
Firefox 3.6- needs
-moz-. From 4 up, unprefixed is fine. On this site, that's 0.3% of the 30% or so that use Firefox.
Safari 4- needs
-webkit-. That's even smaller for this site. 0.1% of the 10% or so using Safari.
iOS 3.x needs
-webkit- too, which means an iPhone 3GS or iPad 1 that have never been upgraded, which is the smallest number yet.
Again, it's your sites stats that matter, but I'd guess most sites are well under 1% for all this combined.
Not to mention, a non-rendering
border-radius is the poster child for "who cares" fallbacks.
Box shadow is similar but slightly more strict. Exactly the same for Firefox and iOS. Safari needs
-webkit- in 5.0-, but was fixed just three months later in 5.1 (which shipped with OS X 10.7).
The most significant difference is that Android 2.3 needs
-webkit-. Can I Use listed it as needed on 4.0, but I sent in a correction and they fixed within hours, so that's good to know! Even on this site, I'm looking at 0.5%, which is way higher than those other browsers. If you're site is specifically mobile-y, I bet this number is much higher.
It's likely that the fallback of not having box shadows is no big deal, but I have seen a situation where it mattered so hey.