Progressive Enhancement with box-shadow

Question

I would like to use WebKit's box-shadow css property for a little drop-down. The code would look like:

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

However, for browsers that do not have this capability, I would like to use borders to approximate this drop shadow, like so:

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}

The problem is, I don't want the border-based shadow to show up for the browsers that DO support box-shadow. I would like to avoid browser sniffing because I assume it's hard to cover all the cases. What is the simplest way to do this? I prefer a javascript-less solution, but I will consider simple javascript-based ones too.

Answer 1

This will not cover all scenarios, and I think it fails in Opera, but I would do this:

.drop_down{
  -webkit-box-shadow: 1px 1px 4px #888;
  -moz-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
  border: solid 1px #bbb;
  border: solid 0px rgba(0,0,0,0); /* Ignored by browsers that don't support it */
}

Test Results

Apparently rgba was introduced in Firefox 3.0, but -moz-box-shadow was introduced in 3.5. So, Firefox 3.0 fails the test. Here are where we stand so far:

Test Page

• Firefox 2.0 -- Pass (Grey 1px line)
• Firefox 3.0 -- Fail
• Firefox 3.5 -- Pass (Shadow)
• Internet Explorer 6.0 -- Pass (Grey 1px line)
• Internet Explorer 7.0 -- Pass (Grey 1px line)
• Internet Explorer 8.0 -- Pass (Grey 1px line)
• Safari 3.0 -- Pass (Shadow)
• Safari 4.0 -- Pass (Shadow)
• Chrome 3.0 -- Pass (Shadow)
• Opera 10 -- Fail

Answer 2

No easy way to do it without using specific tricks for each browser ...

either IE conditional comments (because i think only the IEs do not support some version of the box-shadow now..) or css hacks..

Answer 3

Building off what Gaby said, not only is there not a good way to accomplish that, but it's against the idea of Progressive Enhancement.

Here's a few reasons to consider not doing what you're proposing:

1. Those borders will add width to your element in any browser that has a proper box model. That could cause problems like floated elements being bumped onto new lines if you don't plan for the added width.
2. Progressive enhancement is about building up in an additive manner. Creating "alternative" conditional styles is inviting headaches for maintenance.
3. If you choose appealing border styles, they may actually look better when shadowed. I've found that to be true in a number of projects. The shadow really makes the border stand out in an appealing way.

Hopefully that helps.

Answer 4

Modernizr does feature detection. Code would be:

.drop_down{
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
  border-right: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.boxshadow .drop_down{
  border: 0px none;
  -webkit-box-shadow: 1px 1px 4px #888;
  box-shadow: 1px 1px 4px #888;
}

You need to include the modernizr javascript library for this to work.