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

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.