说说CSS中的@supports

作者：大漠 日期：2016-10-25 点击：3140
@supports
会员专栏

特别声明：开通VIP通道，年费价格为 ¥199.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS中的@supports属性已经不是新东西了，只不过一直以来，大家碍于浏览器对其支持度不强，而无人问冿。这两天看到两篇新文单都是介绍@supports。其中一篇是介绍怎么使用@supports来查询CSS的新特性，另外一篇是如何使用@supports来改变你的生活。

今天也继续来说说这个@supports属性。

@supports是什么

@supports是CSS条件查询规范（CSS3 Conditional Rules Specification）中属性之一，CSS中条件查询除了今天要说的@supports之外，还有大家较为熟悉的媒体查询（@media）和@viewport。

@supports作用是什么

从@Abbey Fitzgerald的《How to use CSS Feature Queries》一文的标题来看，就大概知道@supports是用来查询CSS的新特性的。那么查询CSS的新特性有什么用处呢？或许你知道新出现的CSS特性，但又担心浏览器不支持，从而又不敢使用。很多时候就算是使用了CSS的新特，达到自己需要的效果，但为了让自己的项目给用户带来更好的体验，希望在一些不支持新特性的浏览器做一些降级方案。那么这个时候@supports功效或者说作用就出来了。

从这一点而言，CSS的@supports作用就是用来查询浏览器是否支持CSS的特性。

对于Web前端开发的同学，对Modernizr这个JavaScript库并不会陌生，一直以来都是依赖于这个库帮助大家做一些降级处理。那么有了CSS的@supports，将可以抛弃这个JavaScript库。先来简单的看看一个小示例：

body {
    width: 100vw;
    height: 100vh;
    background-blend-mode: hue;
    background-image:linear-gradient(to right, rgb(166, 80, 80), rgb(139, 0, 0)), url(//c8.staticflickr.com/4/3654/3485478215_19a06ca23c_b.jpg);
    background-repeat:repeat, no-repeat;
    background-position: center;
    background-size: cover;
}

早期，我们依赖Modernizr库，需要这样处理：

.no-background-blend-mode {
    background-image:url(//c8.staticflickr.com/4/3654/3485478215_19a06ca23c_b.jpg);
}

而现在，我们只需要这样做即可：

body {
    width: 100vw;
    height: 100vh;
    background: url(//c8.s
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css3/supports-will-change-your-life.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部