Modernizr：IE10 和 Flexbox：如何检测 IE10 Flexbox

Question

我在我的网站上使用 Modernizr v3 来测试 flexbox 支持。

Modernizr 为支持它的浏览器添加了一个 "flexbox" 主体 class，为不支持它的浏览器添加了 "no-flexbox"。由于不支持 flexbox 的浏览器只是我的一小部分观众，我使用 "no-flexbox" class 来提供回退 CSS。例如：

.ad { /* Default CSS */
display: flex;
}

.no-flexbox .ad { /* Fallback CSS*/
display:table;
}

一切正常，除了 IE10，因为 Modernizr 添加了一个 "no-flexbox" class 到它，即使 IE10 确实支持 Flexbox，它只是使用旧的语法。因此，在 IE10 上，我的布局被破坏了，因为它读取了 flex box 和 non-flexbox 样式。

In this thread，说modernizer对IE10有flexboxtweener风格。因此，我想我可以重写我的回退以使用 .no-flexboxtweaner 而不是 .no-flexbox。

问题是支持新的 flexbox 语法的浏览器也得到了一个 no-flexboxtweaner class，所以他们阅读了后备代码。

我如何设置它以便只有不支持任何形式的 flexbox 的浏览器（无论是新的还是旧的）得到 "no" class.

我知道我可以做“.no-flexbox .ad, .no-flexboxtweaner .ad”，但是那会使 CSS 膨胀（加上运行两个 Modernizr 测试）。我宁愿只有一个 test/class。

Answer 1

I know I could do ".no-flexbox .ad, .no-flexboxtweaner .ad", but then that's bloating the CSS (plus running two Modernizr tests). I'd rather just have a single test/class.

这有点傻，伙计。它只有几个字节——几乎所有字节都将通过 gzip 文件被删除。如果你真的想避免它，你可以创建一个额外的 Modernizr 检查，给你任何 flexbox

Modernizr.addTest('anyflexbox', (Modernizr.flexbox || Modernizr.flexboxtweener))

这将创建一个名为 anyflexbox 的新属性，您可以相应地设置 css 的样式。

Answer 2

检测到对 flex-wrap CSS 属性的支持，Flexbox 的一部分，并非所有 Flexbox 实现（尤其是 Firefox）都存在。

这在 'tweener' 语法（由 IE10 实现）和 'modern' 语法（由其他人实现）中都有体现。只要支持 flex-wrap 属性，此检测对于这些实现中的任何一个都将 return 为真。因此，为确保支持现代语法，请与 Modernizr.flexbox:

一起使用

if (Modernizr.flexbox && Modernizr.flexwrap) {
  // Modern Flexbox with `flex-wrap` supported
}
else {
  // Either old Flexbox syntax, or `flex-wrap` not supported
}

参考：https://modernizr.com/docs

Modernizr：IE10 和 Flexbox：如何检测 IE10 Flexbox

Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

css

modernizr

flexbox