@supports使用方法
原文地址:https://justforuse.github.io/blog/zh-cn/2018/08/supports-tutorial/
@supports是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.
基本使用方式:
@supports (display: grid) {
.container {
color: red;
}
}
1
2
3
4
5
类似@media媒体查询,当浏览器支持display:grid这个CSS属性时才应用其中的样式
所以上述代码比如在IE9下就不会显示为红色字体。
主要用在防止旧浏览器不支持某些属性造成排版混乱的情况,使用@supports当做备选项。
此外,还支持逻辑运算符;not, and, or
例如
@supports not(display: grid){...}
@supports (display: grid) and (position: sticky){...}
@supports (display: grid) or (display: flex){...}
1
2
3
括号内不一定都要是“关键字”,只要是CSS语法都可以,比如:
@supports (border-radius: 4px) or (--btn-color: red){...}
1
上面就表示支持border-radius或者css variables就会加载其中的样式
js中也可以调用类似的方法:
if(CSS.supports('display', 'grid')){
alert('it support!')
}
1
2
3