Do I still have to use all five vendor prefixes for the CSS box-shadow property?

Question

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?

Answer 1

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.)

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.

Answer 2

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.

Answer 3

Maybe Prefix free will help.

It will add the prefixes that are required per browser.