javascript - Modernizr 检查 css3d 转换和 flexbox 包括 ie10

Question

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

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

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

1. flex 盒子
2. Flexbox(旧版)
3. Flexbox(补间)
4. CSS 3d 转换
5. CSS 变换样式保留 3d

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

Answer 1

使用 Modernizr，您无需费心检查特定的浏览器版本。 Modernizr 使用 JavaScript 将类添加到用户页面的 html 元素。如果用户的浏览器支持某个特性，Modernizr 将添加一个具有该特性名称的类。如果用户的浏览器不支持某个特性，Modernizr 将添加一个类 'no-' + feature-name。您编写 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 库，然后在完成您的站点后，返回并仅使用您最终在代码中使用的功能构建一个简化版本。