13

When declaring say box-shadow or text-shadow or gradients for that matter, do you still need all the prefixes?

-webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
-moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
-ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
-o-box-shadow: inset 0 0 1px 1px #e3e3e3;
box-shadow: inset 0 0 1px 1px #e3e3e3;

I understand the main ones:

 -webkit-
 -moz-
 box-shadow

But with the growth of browsers, I wanted to try to get an updated view on whether it is necessary to use 5 prefixes at this moment?

Thoughts, comments?

  • 1
    I would say it's no longer relevant to support these vendor prefixes. – Pacerier Mar 08 '13 at 10:26
  • http://www.w3schools.com/cssref/css3_browsersupport.asp - contains all css rules...and prefixes to be used.....or if u have to look for individual rules you can always use caniuse.com – bhavya_w Sep 16 '14 at 09:33

3 Answers3

15

caniuse.com has a good table showing which browsers require the prefix, and which don’t support box-shadow at all.

(Versions that require a prefix have that prefix underneath the version number, as in the screenshot below.)

enter image description here

Whether you need to use the prefixes for whatever site you’re building depends on which browsers are actually used by the site’s existing/intended audience.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
1

Maybe Prefix free will help.

It will add the prefixes that are required per browser.

Daniel Powell
  • 8,143
  • 11
  • 61
  • 108
1

With the continued improvement of browsers, it has become hard to determine whether it is possible to drop the vendor prefixes of certain CSS3 additions. Because CSS3 is "modular-ized" and goes through slow changes both in syntax and browser support - it is probably best to stick with the vendor prefixes until all of these quirks have been sifted out by the W3C and browsers alike. As stated above, you can always look to specific browsers or help sites for information about legacy browser support.

Kody Cookenmaster
  • 11
  • 1