@supports使用方法

最新推荐文章于 2025-06-06 07:11:39 发布

LTIven

最新推荐文章于 2025-06-06 07:11:39 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

分类专栏： css 前端开发成长轨迹文章标签： css3 @supports css条件样式

原文链接：https://blog.csdn.net/u014291497/article/details/81417253

前端开发同时被 3 个专栏收录

177 篇文章

订阅专栏

成长轨迹

123 篇文章

订阅专栏

css

18 篇文章

订阅专栏

@supports是CSS3中用于检测浏览器对特定CSS属性支持情况的规则，它可以帮助开发者为不同浏览器提供适配的样式。当浏览器支持指定的CSS属性时，如display:grid，@supports内的样式将被应用。该规则支持逻辑运算符如not、and和or，可用于复杂条件判断。同时，JavaScript中也可通过CSS.supports方法实现类似功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址：https://justforuse.github.io/blog/zh-cn/2018/08/supports-tutorial/

@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.

基本使用方式：

@supports (display: grid) {
    .container {
        color: red;
    }
}

类似@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){...}

括号内不一定都要是“关键字”，只要是CSS语法都可以，比如：

@supports (border-radius: 4px) or (--btn-color: red){...}

上面就表示支持border-radius或者css variables就会加载其中的样式

js中也可以调用类似的方法：

if(CSS.supports('display', 'grid')){
    alert('it support!')
}

当然，这个支持性IE下全跪

个人觉得这其中有个很矛盾的地方，就是这个属性基本只有在“高级”浏览器下才会是生效，但“高级”浏览器的支持范围又支持大部分的CSS属性，所以觉得把他当做一个“低级”浏览器检测器倒是个不错的选择

参考链接：https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/