代码之家 › 专栏 › 技术社区 › airportyh

盒影渐进增强

css3 progressive-enhancement css

2

airportyh · 技术社区 · 15 年前

我想使用Webkit的box shadow css属性进行一点下拉。代码如下:

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

但是,对于没有此功能的浏览器,我希望使用borders来近似此放置阴影,如下所示:

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

问题是,我不希望基于边框的阴影出现在支持框阴影的浏览器中。我想避免浏览器嗅探,因为我认为很难涵盖所有的情况。最简单的方法是什么?我更喜欢少用javascript的解决方案,但我也会考虑简单的基于javascript的解决方案。

4 回复 | 直到 14 年前

1

4

airportyh 14 年前

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

您需要包含Modernizer JavaScript库,这样才能工作。

2

3

Doug Neiner 15 年前

这不包括 全部的 场景,我认为它在歌剧中失败了,但我会这样做:

.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 是在火狐3.0中引入的,但是 -moz-box-shadow 在3.5中引入。所以,火狐3.0没有通过测试。现在我们站在这里:

Test Page

火狐2.0——通过(灰色1px线)
火狐3.0——失败
火狐3.5——通过(阴影)
Internet Explorer 6.0--通过(灰色1px线)
Internet Explorer 7.0--通过(灰色1px行)
Internet Explorer 8.0--通过(灰色1px行)
Safari 3.0—通过(阴影)
Safari 4.0—通过(阴影)
Chrome3.0——通过(阴影)
歌剧10——失败

3

Gabriel Hurley 15 年前

根据加比的话,不仅没有一个很好的方法来实现这一点,而且它反对渐进式增强的想法。

以下是一些需要考虑的原因不按照你的建议去做:

这些边框将在任何具有适当方框模型的浏览器中为元素添加宽度。如果不计划增加宽度,这可能会导致诸如浮动元素被碰撞到新行上的问题。
渐进增强是指以相加的方式进行增强。创建“备选”条件样式会让维护人员头疼。
如果你选择吸引人的边框样式,它们可能看起来 更好的 在阴影下。我发现在很多项目中都是这样。阴影真的使边界以一种吸引人的方式突出。

希望有帮助。

4

1

Gabriele Petrioli 15 年前

如果不为每个浏览器使用特定的技巧,就不容易做到这一点…

IE条件注释(因为我认为只有IES现在不支持某些版本的box shadow…)或CSS黑客。