Modernizr 检查 css3d 转换和 flexbox 包括 ie10

Question

我正在尝试弄清楚我需要使用哪种构建的 modernizr 来检测对 css3d 转换和 flexbox 的支持，同时也允许 ie10 通过。

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

查看 modernizers 下载选项，有以下选项：

弹性框
Flexbox（旧版）
Flexbox（补间）
CSS 3d 变换
CSS 变换样式保留 3d

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

Answer 1

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

/* 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;
}

理想情况下，它永远不应该是 'pass' 或 'fail' 的情况。您应该尽可能地支持旧版浏览器，为那些使用最新版本浏览器的浏览器添加额外的功能和特性。

以下是 Modernizr Flexbox 选项的细分：

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

如果您是从头开始，那么您不需要 2 和 3。它们将用于支持语法被解决之前构建的站点。

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

Modernizr 检查 css3d 转换和 flexbox 包括 ie10

Modernizr to check for css3d transforms and flexbox include ie10

javascript

css

flexbox

modernizr

feature-detection