特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS中的@supports
属性已经不是新东西了,只不过一直以来,大家碍于浏览器对其支持度不强,而无人问冿。这两天看到两篇新文单都是介绍@supports
。其中一篇是介绍怎么使用@supports
来查询CSS的新特性,另外一篇是如何使用@supports
来改变你的生活。
- How to use CSS Feature Queries by @Abbey Fitzgerald
@supports
will change your life by @CHARLOTTE JACKSON
今天也继续来说说这个@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
如需转载,烦请注明出处:https://www.w3cplus.com/css3/supports-will-change-your-life.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!