File Under: Uncategorized

CSS 3 Box Shadow Showcases Browser Differences

The CSS 3 box-shadow property allows for drop shadows and other gradient-based effects without the need for images or other hacks. Box shadow works in Firefox 3+, Chrome, Safari, Opera and Internet Explorer 9. Older versions of IE will ignore the rule, but in most cases losing the shadows won’t be catastrophic for your design.

Box Shadows are handy and can do a lot more than just create a shadow effect. Check out this experiment for some examples of the myriad effects you can achieve with just a few box shadow rules (note that some only work in WebKit browsers). However, the box-shadow rule also showcases the ever-present differences between web browsers — even when the browsers all handle the CSS just fine.

While box-shadow works in all the browsers listed above, that doesn’t mean that it looks the same in every browser. For an interesting look at the variety of ways web browsers display box-shadow, head over to this handy guide to box shadow.

As you can see from the screenshot above, there’s considerable variation between the four browsers — everything from the almost non-existant shadow in some IE 9 examples, to the much heavier shadows in Firefox 4. That’s not to say that any one of them is right and the others wrong, just that there are differences. You’ll also find quite a bit of variation in font display and CSS gradients.

The point is, no matter how hard you try, you’re never going to to have pixel perfect rendering across web browsers. Nor do you need pixel perfect rendering across browsers. The real lesson of box shadows is that there will be variety, so stop worrying and get on with creating.

See Also: