你可能不知道的CSS特征查询

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

介绍

做前端的小伙伴肯定经历过各种设备和浏览器的适配工作，不同的浏览器厂商标准很多也是不同，其中涉及到大量的css属性要做兼容，比如说有的浏览器支持网格布局有的就不支持，都要兼容下来可以说是一个头两个大了，本期我将探索一下关于 CSS 的@supports规则，用CSS特征查询的方式来解决浏览器兼容验证支持提供了一种方案。

正文

简介

@supports 是 CSS3 新引入的一个规则，它可以检测一个或多个特定的 CSS 功能是否依赖于浏览器的支持声明，所以被叫做特征查询。除 Internet Explorer 11 和 Opera Mini 外，所有最新版本的主流浏览器都支持 @supports 规则。

基础用法

@supports (display: grid) {
  body {
      background:black;
  }
}

上述代码块，表示如果当前浏览器支持 display: grid ，则让 body 的背景色变为黑色，当然如果不支持 display: grid 那么不会执行下面的变色代码。

用起来就是这么简单，但它的能力远不止于此。除了后续要讲的操作符和选择器之外，你还可以在里判断css变量和浏览器前缀等信息。

@supports (--bg-color: black){}
@supports (-webkit-perspective: 10px){}

not操作符

@supports not (display: grid){
  body {
      background:black;
  }
}

not操作符，顾名思义，实现了逻辑非，上述代码也很好理解就是如果当前浏览器不支持 display: grid 才把背景色变成黑色。

上图是用的是谷歌本身支持 display: grid ,所以不会执行变色代码块。

当然，如果想让它变色，除了去掉一个 not 操作符，你还可以执行双重否定，也就是再加一个 not操作符。

@supports not (not (display: grid)){
  body {
      background:black;
  }
}

and操作符

@supports (display: grid) and (display: flex) {
  body {
      background:black;
  }
}

与 @media 语法相同，它也可以用 and 操作符做为逻辑与来使用，来描述既支持某个条件又支持某个条件时执行下面的代码块。上述代码块，意思是当前浏览器既支持 display: grid 又支持 display: flex ，则 body 的背景色会变为黑色。

当然，还有很多形式的组合。

@supports (display: grid) and (display: flex) and (not (display: inline-grid)) {
  body {
      background:black;
  }
}

or操作符

@supports (display: grid) or (display: flex) {
  body {
      background:black;
  }
}

与 and 操作符类似，or 操作符实现了逻辑或，上述代码表示，支持 display: grid 或者支持 display: flex ,都会执行里面 body 背景色变黑的代码块。

同样，它也可以组合。有时候判断一些兼容问题还是很方便的。如下代码，它是判断如果支持不带前缀以及带前缀的 perspective 属性，里面的代码块才会生效。

@supports ((perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px) ) {}

selector()

它是选择器语法，目前也在实验阶段，如下如果支持子组合器，里面的代码块就会生效。

@supports selector(A > B) {}
@supports selector(A + B) {}
@supports selector(A ~ B) {}

同时，你也可以利用它判断某个伪类的支持情况。

@supports selector(:hover) {}
@supports not selector(:is(a, b)) {}
@supports selector(:nth-child(1n of a, b)) {}

js判断

在js里也可以调用特征查询来判断 CSS 的支持。它作为 window.CSS 中的一个方法（CSS 对象模型接口）。你可以用 CSS.supports() 来访问 @supports 。

书写形式如下：

CSS.supports('(display: grid)')
// or
CSS.supports('display', 'grid')