CSS 使用样式化组件进行特征检测

Question

我通常使用 Modernizr 来检测 CSS 特性，例如 flex-box 支持，如果不支持则回退到旧方法：

.mz-flexbox {
  // use flex
}

.mz-noflexbox {
  // use floats
}

如何完成类似于 styled-components with something like Modernizr 的事情，其中类被添加到 <html> 元素以指示功能支持？

此时我唯一的想法是在我的 "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标签的class列表。

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

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

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

都只是 JavaScript :D

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

if(Modernizr.someFeature) { ... }

RE：你的最后一个例子 - 是的，这会起作用，假设你将 modernizr 作为依赖项与你的 javascript 的其余部分捆绑在一起。文档中还有其他设置功能 tests 的方法，这应该有助于减少样式化字符串中的条件重复

CSS feature detection with styled-components