0

我以前从未使用过 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 之类的类名有什么用？如何应用这些样式？

请用例子详细解释我。谢谢

4

1 回答 1

1

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

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

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

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

因此，您可能会在html标签中添加以下内容，例如classes：

js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns

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

Javascript如果您想在用户关闭后对网站进行不同的样式设置，它也很有用。

于 2013-07-08T15:24:34.657 回答