Box Shadows in CSS

Question

This is not a question, but just a rant. Or maybe a question... or maybe I just don't know much about box shadows..

In order to use box shadows in CSS3 in different browsers, here what I have to do:

-webkit-box-shadow: 0px 0px 10px #676767;
-moz-box-shadow: 0px 0px 10px #676767;
box-shadow: 0px 0px 10px #676767;

Is there anyone else finding this incredibly stupid in order for Firefox, Opera and Safari/Chrome/Webkit to work? And it will not even work in IE at all!

Is there anything I can do to reduce the duplicated CSS values?

Thanks, badallen

Answer 1

Because box-shadow is not yet officially specified, you need the vendor-specific prefixes (eg: -moz, -webkit, -ms). IE doesn't support them period; I'd recommend using CSS3 PIE if you want to use IE. PIE also adds support for other CSS 3 eye-candy like border-radius and gradients.

If you want to avoid having to write the same code every time, I'd recommend using LESS or SASS and their mixins:

http://lesscss.org/
http://sass-lang.com/

Answer 2

Unfortunately but inevitably, this is the way standards are made:

1. Part of the standard is specified. (Often just by one browser-maker internally.)
2. One or more companies implement that part in a browser.
3. The standard is revised based on real-world usage of the standard as implemented so far.

The key part is 3 — if the vendor prefixes weren’t used, part 3 couldn’t happen, so mistakes couldn’t be rectified without a lot of pain for every web developer in the world. (See e.g. the Internet Explorer box model, the rats nest of bugs that is Internet Explorer 6’s float implementation, and, well, pretty much the entire history of Internet Explorer up until version 8.)

At some point, browsers that require vendor prefixes for box-shadow will be unpopular enough that you can skip -webkit-box-shadow and -moz-box-shadow. Until then, it’s just the price you pay for using bleeding edge CSS features.

Answer 3

Note that as of 2010-09-14, the -moz prefix has been removed for Mozilla Platform builds. Firefox 4 will fully support box-shadow!