说说CSS中的@supports

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

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

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

@supports是什么

@supportsCSS条件查询规范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

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

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