Progressive Enhancement with box-shadow
- by toby
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.
