Modernizr在初始化的时候会首先找寻class=“no-js”的元素:
<!DOCTYPE html> <html class="no-js"> <head lang="en"> <title>ModernizrDemo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./stylesheets/base.css"> </head> <body> <script src="js/Modernizr.js"></script> </body> </html>
如果浏览器支持JavaScript，那么节点的class会被变成“js”，使用firebug或者谷歌控制台查看就是如下结果:
<!DOCTYPE html> <html class="js fontface cssanimations backgroundsize borderradius boxshadow csstransitions no-csscalc"> <head lang="en"> <title>ModernizrDemo</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./stylesheets/base.css"> </head> <body> <script src="js/Modernizr.js"></script> </body></html>
我们可以看到，在html节点，附加了一些“未知”的样式名称，这正是Modernizr检测CSS支持情况的结果，如果附加的className是no-""，那么表明当前浏览器内核不支持改css属性，那么就为我们在开发中解决浏览器的差异上提供了很大的便利。
本文只阐述如题观点，如果你同时在使用sass作为css预处理器的话，实测可以告诉您一个技巧，来看一个例子：
.csscalc .mg-right{ margin-right:calc(100% - 900px); } .no-csscalc .mg-right{ margin-right: 3%; }
上述样式说明了，在浏览器支持css运算函数calc的时候，右边距样式使用calc来计算，不支持的时候右边距样式为3%;
这就使得我们在使用sass的时候，如果我们很元素都在使用这个边距，
那么我们不能以一个函数（@mixin）来表示公共的右边距了，因为它不具备一个单独的样式木块（不具备一个具体名称mg-right），不能被命名空间.csscalc或者.no-csscalc所管理：
如下代码：
/**这种方式编译到样式中以后并不能被Modernizr所产成的命名空间所管理，bad**/ @mixin mixin_mg_right(){ margin-right: calc(100% - 900px); margin-right: 3%; } body{ @include mixin_mg_right(); } /**使用继承的方式来管理。good**/ .csscalc .mg-right{ margin-right:calc(100% - 900px); } .no-csscalc .mg-right{ margin-right: 3%; } body{ @extend .mg-right; }
如此，完结！