Question

任何人都可以解释（因为github页面没有）为什么Modernizr认为需要将所有这些类名添加到HTML标记中？加载Modernizr后，它看起来像这样：

<!doctype html>
<html class=" js flexbox canvas canvastext webgl ~~~~ etc etc

我完全没有解释为什么要这样做。 Modernizr提供的属性让我知道是否支持canvas（Modernizr.canvas == true？）。这些html类名是否为比这更容易的测试添加了？

Answer 1

这些类名称应在CSS代码中使用，因此您可以添加后备样式，以防功能不受支持。来自modernizr docs页面的示例：

/* Simulated box shadow using borders: */
.box {
   border-bottom: 1px solid #666;
   border-right:  1px solid #777;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: #666 1px 1px 1px;
      -moz-box-shadow: #666 1px 1px 1px;
           box-shadow: #666 1px 1px 1px;
}

Answer 2

我可能错了（如果我是，请纠正我），这里的类表示Modernizr检测到的特定浏览器支持（或实际上不支持）的功能。

请查看此处的文档：http://modernizr.com/docs/

举个例子：

<html class="no-js">

如果JavaScript被禁用，则modernizr无法运行，因此该类将保持"no-js"但如果启用了JavaScript，则Modernizr将"no-js"替换为"js"，同样会告诉您支持哪些其他功能

使用Modernizr库，为什么要在html标记中添加类

2 个答案: