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

【问题标题】：CSS feature detection with styled-components使用样式组件进行 CSS 特征检测
【发布时间】：2018-07-04 04:31:45
【问题描述】：

我通常使用 Modernizr 来检测 CSS 功能（如 flex-box 支持），如果不支持则回退到旧方法：

.mz-flexbox {
  // use flex
}

.mz-noflexbox {
  // use floats
}

使用Modernizr 之类的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;
  `}
`;

这对运行时的检测有用吗？

【问题讨论】：

【解决方案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 的依赖项捆绑在一起，这将起作用。文档中还有其他方法可以设置功能测试，这应该有助于减少样式字符串中的条件重复

【讨论】：