携手创作,共同成长!这是我参与「掘金日新计划 · 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')