Modernizr 检查 css3d 转换和 flexbox 包括 ie10

Question

我正在尝试找出我需要使用什么版本的modernizr，以检测对css3d 转换和flexbox 的支持，以允许ie10 通过。

查看 http://caniuse.com/#search=flexbox 和 http://caniuse.com/#search=3d ie10 似乎部分支持这些，但有几个例外，例如 flexbox 的旧语法和不支持 preserve-3d。

查看现代化的下载选项有​​以下几种：

1. 弹性盒
2. Flexbox（旧版）
3. Flexbox（补间）
4. CSS 3d 变换
5. CSS 变换样式保留 3d

所以我的问题是我需要哪些以及如何使用它们来设置支持检查 ie10+ 浏览器（以及所有大男孩，如 chrome、firefox 等）通过的地方？

Answer 1

使用 Modernizr，您无需检查特定的浏览器版本。 Modernizr 使用 JavaScript 向用户页面的 html 元素添加类。如果用户的浏览器支持某个功能，Modernizr 将添加一个具有该功能名称的类。如果用户的浏览器不支持某个功能，Modernizr 将添加一个类 'no-' + 功能名称。您编写您的 css 或 JavaScript 来检查 html 元素是否包含您想要支持的功能的类。

/* For all browsers */
.foo {
  display: inline-block;
}

/* For browsers that support Flexbox */
.flexbox .foo {
  display: flex;
}

/* For browsers that don't support Flexbox. I never use the 'no' classes
as I add features, not remove them. */
.no-flexbox .foo {
  display: inline-block;
}

理想情况下，它不应该是“通过”或“失败”的情况。您应该尽量支持较旧的浏览器，为使用最新浏览器版本的浏览器添加额外的功能和特性。

这里是 Modernizr Flexbox 选项的细分：

1. Flexbox - 支持当前语法的浏览器（显示：flex;）
2. Flexbox（旧版）- 支持旧 2009 语法的浏览器（显示：框；）
3. Flexbox（补间）- IE 10（显示：flexbox；）

如果您是从头开始，则不需要 2 和 3。它们将用于支持在语法被淘汰之前构建的网站。

决定包含哪些 Modernizr 功能取决于您计划使用的功能。您应该刚开始使用完整的 Modernizr 库，然后在您完成网站后，返回并仅使用您最终在代码中使用的功能构建简化版本。