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

css prefixes
user39980 picture user39980 · Oct 13, 2011 · Viewed 11.2k times · Source

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

Paul D. Waite picture Paul D. Waite · Oct 13, 2011

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.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More