progressive-enhancement - 带盒阴影的渐进增强

Question

我想使用WebKit的box-shadow css属性进行一些下拉。代码如下所示:

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

但是，对于不具有此功能的浏览器，我想使用边框来近似此投影，如下所示:

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

问题是，我不希望为支持盒形阴影的浏览器显示基于边框的阴影。我想避免浏览器嗅探，因为我认为很难涵盖所有情况。最简单的方法是什么？我更喜欢无JavaScript的解决方案，但我也会考虑基于javascript的简单解决方案。

Answer 1

Modernizr具有功能检测。代码为:

.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;
}

您需要包括modernizr javascript库才能运行。