使用Modernizr辅助修正样式问题

发布日期:2015-09-17 14:30:54
And the winner isn’t…网站非常适合使用 Modernizr来辅助修正一个样式问题。我们的问答页面在支持 3D变形的浏览器中效果正常, 在不支持该特性的浏览器中则仅做了一个简单的悬停效果。现在,无论浏览器是否支持 3D变形,我们在页面上都有一段备注告知用户: 该页面效果需要 3D变形的支持。 如果你没看到海报图片的 3D翻转效果, 试试 Safari或 Chrome。
有了 Modernizr追加的额外类名,就有办法仅在不支持 3D变形特性的浏览器中显示备注
信息了。
.note {
display: none;
}
.no-csstransforms3d .note {
display: block;
}
分析一下,首先将备注设置为默认不显示:
.note {
display: none;
}
这意味着支持 3D变形特性的浏览器(如 Google Chrome 16)就不会看到备注信息(如下
图) :
接下来的规则使用了 Modernizr追加的额外类名来为不支持 3D变形的浏览器显示备注:
.no-csstransforms3d .note {
display: block;
}

下图显示了同一页面在 Firefox 9中的效果:

使用Modernizr辅助修正样式问题

Modernizr让我们抛弃浏览器的角度,转而从功能特性的角度考虑问题。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计