css @support

[TokenYangForever]

简介

• @supports是css中用来检测浏览器是否支持某些css语法功能的一个标签，它和@media一样支持or(或者)、and(并且)、not(非)关键字用来做逻辑判断。下面是一个使用supports来检测浏览器是否支持flex的示例代码：

  @supports (display: -webkit-flex) or
        (display: -moz-flex) or
        (display: flex) {
  div { display: flex; }
  }

• 或许现代浏览器大都支持flex语法了，不需要再用supports来判断，但是未来可能也会加入新的语法而需要进行兼容，这又涉及到渐进增强和优雅降级的概念，例如下面讲的适配iPhone X。

  适配iPhone X

• iPhone X面市后，因为其特殊的手机屏幕而需要做特定的适配，这里就可以用到supports来进行检测了

  /* 头部适配ios11 */
  @supports (padding: constant(safe-area-inset-top)) or (padding: env(safe-area-inset-top)) {
  body > header {
  background: #fff;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  }
  }

• 上面是我们项目中用来使头部适配iPhone X的代码，其中用到了constant和env，算是新增的方法用来解决iPhone X适配问题(具体用法我也不太了解)，再使用supports来进行检测是否支持。