Progressive enhancement 盒影渐进增强

我想使用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的解决方案。

这不会覆盖所有的场景，我认为它在Opera中失败了，但是我会这样做：

.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 */
}

测试结果

显然，

rgba

是在Firefox3.0中引入的，但是

-moz-box-shadow

是在3.5中引入的。因此，Firefox3.0没有通过测试。我们目前的立场如下：

• Firefox 2.0——通过（灰色1px线）
• Firefox 3.0——失败
• Firefox 3.5——通过（阴影）
• Internet Explorer 6.0--通过（灰色1px线）
• Internet Explorer 7.0--通过（灰色1px线）
• Internet Explorer 8.0--通过（灰色1px线）
• Safari 3.0——通行证（阴影）
• Safari 4.0——通行证（阴影）
• Chrome 3.0--通过（阴影）
• Opera 10——失败

---

如果不为每个浏览器使用特定的技巧，就很难做到这一点

---

无论是IE有条件的评论（因为我认为现在只有IE不支持某些版本的box shadow…）还是css黑客…

基于Gaby所说的，不仅没有一个好的方法来实现这一点，而且它反对渐进增强的想法

以下是一些不考虑你所建议的理由：

这些边框将为具有适当长方体模型的任何浏览器中的图元增加宽度。如果不计划增加的宽度，则可能会导致诸如浮动图元被碰撞到新行上之类的问题

渐进增强是指以累加的方式进行增强。创建“替代”条件样式是维护的难题

如果选择吸引人的边框样式，它们在被阴影遮挡时可能会看起来更好。我发现在许多项目中都是如此。阴影确实使边界以一种吸引人的方式脱颖而出

希望这能有所帮助。

进行功能检测。代码为：

.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库才能使其正常工作。

不支持rgba的浏览器是否与不支持阴影的浏览器相同？@Gaby我知道那些支持框阴影的浏览器支持rgba，但我不确定这是另一种方式。。。试着运行一些测试，做得很好。但我想还没有找到一个好的解决方案。实际上我还没有意识到FF现在也支持它。我想我的目标会有所不同。谢谢。问题是只有3.5+的FF支持阴影，所以以前的版本+Opera+IE都不支持阴影。看来你的建议是建立最低的公分母。我认为他所做的是完全可以接受的：在支持它的浏览器中使用好的东西，在其他浏览器中使用好的替代品。你的宽度点是有效的，但很容易解释。他问到渐进增强，这是网页设计中的一种特定哲学/范式。这不是关于最低公分母；它是从最基本的功能开始，逐步以非破坏性的方式对视觉或功能增强进行分层，以便支持所有浏览器，但最新的浏览器得到最闪亮的玩具。查看ALA的文章，可以很好地了解渐进式增强的含义：加布里埃尔：我同意你所说的大部分内容，但我不同意有条件的风格与渐进式增强的理念背道而驰。条件行为和样式是许多Javascript库所做的。jQuery尤其擅长测试特性，并根据需要有条件地做不同的事情。我认为这个问题更多地说明了CSS的弱点。例如，如果我们可以测试一个属性是否受支持，如果不受支持，我们可以应用不同的样式——以标准方式，我认为这将解决一大类问题，而不会带来麻烦。Modernizer是一个很好的库。它允许您以干净的方式执行条件css。