Question

There is some odd behaviour, when it comes to box shadows in Chrome and Safari.

When I use box-shadow the Chrome Browser in recent versions does support the CSS3 specification without the -webkit-* prefix, but the Safari browser doesn’t.

This wouldn’t be too bad, if Chrome simple would overwrite the -webkit-box-shadow with the box-shadow, which it does, when both shadows are the same.

So to have my box shadow in Chrome and Safari, I need following.

.some-class {
   box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

which works fine in Safari and in Chrome and in FF and in Opera

But for IE9 the box shadow looks ugly. I must have a different box-shadow for IE9, something like box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35); should be used

So my CSS is as follows

.some-class {
   box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

But I don’t want the FF to have the IE9 box-shadow so I insert a CSS hack

.some-class {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
/* IE9 */
@media all and (min-width:0) {
    .some-class  > ul.navigationlist{
         box-shadow: 0 0 4px 1px rgba(0,0,0,0.35) \0/;
    }
}

---

now my question:
Is there a better way to do this? Except for Conditional Comments, which I know are designed for that, blah, blah…

---

edit
2nd question:
Do you all see the box-shadow in IE9 different to those in FF or Chrome, too?

---

edit
3rd question:
Is there a different prefix than -ms-* to use for box-shadow as -ms-box-shadow does not work?

Answer 1

Normally, you would cascade from vendor prefixes down to the standard property value, but in your case, I think you need to use the cascade effect in reverse and put the standard at the top and the vendor prefixes below, allowing the vendor specific to override the standard in all but IE.

.some-class {
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}