Progressive Enhancement with box-shadow

Posted by toby on Stack Overflow See other posts from Stack Overflow or by toby
Published on 2010-01-11T20:47:54Z Indexed on 2010/03/11 5:53 UTC
Read the original article Hit count: 397

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.

© Stack Overflow or respective owner

Related posts about progressive-enhancement

Related posts about css