1

我最近查看了 Modernizr 并阅读了文档，但是有些事情对我来说似乎有点不清楚。从阅读文档中可以看出，Modernizr 主要用于检测浏览器中是否有某些东西可用，例如边框半径、媒体查询等。它是否修复了这些东西以在旧浏览器上按预期呈现？

我阅读了有关 Polyfills 的文档，但我不确定如何实现这些以在不支持它们的浏览器上为 div 添加圆角。

此外，Modernizr 是否可以用于允许媒体查询在旧浏览器中工作，或者它只是一种检测媒体查询是否可以使用的方法。

如果它只是一个检测工具，那它为什么这么有用？例如，我已经知道我不能在旧版本的 Internet Explorer 上使用媒体查询或边框半径。如果它不仅仅是一个检测工具，那么我如何使用它在旧浏览器中添加新功能？

4

2 回答 2

3

我想我的问题是，如果它只是一个检测工具，那么它为什么这么有用？例如，我已经知道我不能在旧版本的 Internet Explorer 上使用媒体查询或边框半径。

是的，它是一种检测工具。Modernizr 的目的是提供嗅探而不是浏览器嗅探。您提到您已经知道 IE 的功能。忘记 IE/特定浏览器以及它们可以做什么。Modernizr 可帮助您确定某个功能是否可用，然后轻松编写 CSS/JS 用例以供回退。

于 2013-04-29T13:41:59.180 回答
1

Modernizer 使用 javascript 在页面加载时向页面的 HTML 元素添加一堆类。例如

<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">

这些类描述了 HTML5/CSS3 功能是否可以在浏览页面的浏览器中使用。

这允许您通过仅在浏览器可以处理 CSS3 样式（渐进增强）的情况下应用更有效的 css。

例如

.no-audio .music-player {
   display: none
}
.audio .music-player {
   /* styles for music player */
}

此外，Modernizer 还允许您测试这些元素是否可用于其 javascript API。这对于为旧版浏览器（polyfills）提供后备很有用。因此，对于圆角，您可以这样做：

Modernizr.load({
  test: Modernizr.borderradius,
  yep : /* do nothing */
  nope: 'borderradius.js' /* css3 pie for example */
});

或者：

if (Modernizr.borderradius) {
   // do nothing
}else{
    /* script for making rounded corners e.g css3 pie */
}

或者在 CSS 中仅使用我们的边界半径（如果可用）：

.box {
 border: 1px solid #000; /* all browsers, no rounded corners */
}

.borderradius .box{
  border-radius: 15px; /* only CSS3 compliant browsers get this style */
}

旧版 (IE <9) 浏览器的媒体查询需要另一个插件，例如 repond.js

于 2013-04-29T14:16:25.460 回答