阅读 362

学透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>
复制代码

文章分类
前端
文章标签