Question

我通常使用Modernizr对CSS功能进行功能检测，如支持flex-box，如果不支持，则使用旧方法：

.mz-flexbox {
  // use flex
}

.mz-noflexbox {
  // use floats
}

此时我唯一的想法是导入我的“App.js”中的组件并使用injectGlobal来定位它们：

import MyComponent from './components/my-component';

injectGlobal`
  .mz-flexbox {
    ${MyComponent} {
      // use flex
    }
  }
`;

看来@supports会是一个很好的解决方案，但我确实关心Internet Explorer，所以这不是这个项目的解决方案。

最后，我不确定这是否是一个很好的方法，但这样的功能是否适用于功能检测？我不是100％使用样式组件编译的内容以及可以在运行时计算的内容：

styled.div`
  ${window.Modernizr.flexbox && css`
    display: flex;
    align-items: center;
  `}
`;

这会在运行时检测吗？

Answer 1

您只需查询hmtl代码的classList。

const modern = document.querySelector('html').classList

然后只需检查您要查找的要素类是否在该列表中。例如：

if (modern.contains('noflexbox') {
  // Adjust as per usual
}

这只是JavaScript：D

然而，更好的方法是直接使用Modernizr API，而不是依赖于类的存在。所以你的代码看起来更像是：

if(Modernizr.someFeature) { ... }

RE：你的最后一个例子 - 是的，这会有效，假设你将modernizr与你的其他javascript捆绑在一起。在文档中还有其他方法可以设置功能测试，这有助于减少样式字符串中的条件重复