Question

我之前从未使用过Modernizr。所以阅读文章并找到一些前缀为

的css

.no-cssgradient.how the below style will be applied.

.no-js .glossy,
.no-cssgradients .glossy {
    background: url("glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

上述风格的含义是什么......它是如何运作的？

4）如何自动应用样式？

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

我从网站获得了代码段。类名称如.no-cssgradients或.no-audio的用法如何应用这些样式？

请详细解释我的例子。感谢

Answer 1

Modernizr是一个检测HTML5和CSS3功能的JavaScript库在用户的浏览器中。

来自http://modernizr.com/

它基本上会检测当前浏览器支持的功能，或者它不支持的功能，然后您可以使用这些class名称来相应地设置页面样式。

例如 - 如果您的浏览器支持HTML5和音频标记，则可以显示它。如果浏览器不支持音频标记，您可以使用.no-audio - 并隐藏播放器，或为旧浏览器提供后备选项。

如果使用Firebug或等效的调试器调试Modernizr站点，您可以看到它会自动将类添加到HTML标记。

因此，您可能会将以下内容添加到html标记中，作为classes：

js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns

所以你知道浏览器支持这些功能。

如果您希望在用户关闭Javascript时以不同方式设置网站样式，这也很有用。

现代化与现代化HTML新功能＆amp;样式

1 个答案: