欢迎来到站长教程网!
兔子CDN

DIV&CSS

当前位置:主页 > 网页制作 > DIV&CSS >

详解CSS中@supports的用法

时间:2020-10-18|栏目:DIV&CSS|点击:

基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr.js推出来之后。其实w3c也出了规范,可以基于css来做一些特性检测,也就是@supports,这个特性已经有两年多了,之前浏览器支持度不够,现在webkit nightly也开始支持了,也就是说safari 9会支持到,这样的话,Blink+webKit+gecko都支持了,只剩下IE浏览器不支持了,嗯,这样更方便对IE差异化处理了。

但是@supports并不能完全替代JS的特性检测方法,它只支持对CSS属性的检测,其它HTML5 api以及webP等技术的检测还是需要JS来完成。
用法:

@supports就像media query一样简单:

CSS Code复制内容到剪贴板
  1. @supports(prop:value) { /* more styles */ }  

@supports也允许你用各种复杂的组合来进行特性检测。
基本用法:

CSS Code复制内容到剪贴板
  1. @supports (display: flex) { div { display: flex; } }  

你可以用这种方法来检测各种基本的CSS属性。
not关键词

就像这样:

CSS Code复制内容到剪贴板
  1. @supports not (display: flex) { div { floatleft; } /* alternative styles */ }  

个人感觉有些鸡肋了,支持@supports的浏览器会不支持各种CSS属性么?不过万事没有绝对,这种情况以后还是可能会有。嗯,私有前缀的话可以试试。
多条件检测

CSS Code复制内容到剪贴板
  1. @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /* use styles here */ }   
  2.   
  3. /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /* something crazy here */ }  

你也可以将or和and语句放在一起混用。

CSS Code复制内容到剪贴板
  1. @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /* use styles here */ }  

或者更复杂的:

CSS Code复制内容到剪贴板
  1. @supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){ … /* specific CSS applied to simulate text-align-last:justify */ }  

JS方法

同时也可以用javascript来做类似的检测,方法也很简单:

CSS Code复制内容到剪贴板
  1. boolValue = CSS.supports(propertyName, value); boolValue = CSS.supports(supportCondition);  

上一篇:CSS3动画制作的简单示例

栏    目:DIV&CSS

下一篇:CSS3中HSL和HSLA的简单使用示例

本文标题:详解CSS中@supports的用法

本文地址:www.dtcnnet.com/CSS/43285.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号