学透CSS-@support 判断兼容性

前言

@support并属于比较新的CSS3属性了，几年前，@support刚出现的时候，大家其实对这个属性并没有啥感觉，因为那个时候CSS3在浏览器上的兼容性不是太好，并且有的浏览器也不兼容@support属性了，但是现在我觉得大家真的可以用起来了！

@support

允许我们在应用样式块之前，测试浏览器是否支持特定的属性：值组合；这个就有点类似@media，当浏览器的宽度介于每个区间，匹配的CSS生效。比如@media当浏览器窗口的宽度小于某个指定大小时查询如何匹配然后里面的CSS生效。

语法

@supports (属性: 属性值) {
想要生效的样式
}

例如下面这个例子：先判断时候支持grid，支持的话设置div的布局为grid.

@supports (display: grid) {
  div {
    display: grid;
  }
}

逻辑运算

not:

@supports not (display: grid) {

}

and:

@supports (display: grid) and (-webkit-display:grid) {

}

or:

@supports (display:grid) or (-webkit-display:grid ) {

}

混合:

@supports ((display:grid) or
          (-webkit-display:grid) ) and (display:-webkit-grid) {

}

JS支持

判断存不存CSS

if (window.CSS && window.CSS.supports) {

}

可以属性和值分开

let supportsGrid = CSS.supports("display", "grid");

也可以不分开

let supportsGrid = CSS.supports("(display: grid)");

场景1

有这样三个div。

.child{
  width:100px;
  margin:0 10px;
  display: inline-block;
  vertical-align: middle;
  background-color: pink;
}
<div style="width:400px;height: 100px;border: 1px solid #000;">
  <div class="child">div1</div>
  <div class="child">div2</div>
  <div class="child">div3<br />div3</div>
</div>

此时我们我们想将三个子div设置为等高，第一反应就是child设置height:100px;但是呢我们又不允许使用具体的值，这个时候fill-available就排上用场了！

  @supports (height: fill-available) or (height: -webkit-fill-available) {
  .child {
    height: -webkit-fill-available;
    height: fill-available;
  }
}
.child {
    width: 100px;
    height: fill-available;
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
    background-color: pink;
  }

场景2

测试是否支持自定义属性

div {
  color: red;
}

@supports (--css: variables) {
  div {
    --my-color: blue;
    color: var(--my-color, "blue");
  }
}
<div>
<h1>
 浏览器支持变量则文字蓝色，不支持则文字红色
</h1>
</div>