js库Modernizr的介绍和使用(2)

日期：2020-06-10 栏目：程序人生浏览：次

Modernizr 类（属性）

@font-face fontface
::before and ::after pseudo-elements generatedcontent
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow

CSS animations

cssanimations

CSS 2D transformations

csstransforms

CSS 3D transformations

csstransforms3d

CSS transitions

csstransitions

flexible box layout

flexbox

gradients

cssgradients
hsla() hsla

multi-column layout

csscolumns

multiple backgrounds

multiplebgs
opacity opacity

reflection

cssreflections
rgba() rgba
text-shadow textshadow

无论在哪对特定的CSS属性进行测试，类的名称和属性名称都是一样的，然而这要求去除任何连字号或是括号。其它类是按照它们参考的CSS3模块而命名。

Modernizr的使用

1. 下载

首先从下载Modernizr的最新的稳定版。把它加入页面的<head>区域：

<!DOCTYPE HTML>

<html>

当Modernizr运行的时候，它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情，它还会为所有它检测过的特性添加class类，如果浏览器不支持某个特性，它就为该特性对应的类名加上“no-”的前缀。
添加no-js class到html元素下，是告诉浏览器是否支持JavaScript，如果不支持就显示no-js，如果支持就把no-js删掉
此时如果使用Dreamweaver 的Live Code，可以看到Modernizr添加了大量的表明浏览器功能的类，如下图

js库Modernizr的介绍和使用

如图所示， no-js 类已经被js类替代，这表明 JavaScript 已经启用。

如果你的 Dreamweaver 版本没有 Live Code（或者你正使用不同的 HTML 编辑器），那么你可以使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。

3. 使用案例1——在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框

复制代码代码如下:

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;
} .no-boxshadow #MyContainer { border: 2px solid black;
}

因为如果浏览器支持box-shadows的话，Modernizr就会将boxshadow class添加到<html>元素，然后你可以将它管理到一个相应的div的id上。如果不支持，Modernizr就会将no- boxshadow class添加到<html>元素，这样显示的就是一个标准的边框。这样我们就可以很方便地在支持CSS3特性的浏览器上使用CSS3新功能，不支持的浏览器上继续使用以前的方式。

4. 使用案例2——对本地存储进行测试

转载注明出处：https://www.heiqu.com/wgjgys.html

js库Modernizr的介绍和使用(2)

相关推荐