css3条件判断_@supports的用法/Window.CSS.supports()的使用
2024-08-28 03:04:29
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理。这就需要使用到css3的条件判断功能:在css中支持@supports标记、或者在js中使用CSS.supports函数,来检测浏览器是否支持css3的新属性。下面就来看看如何实现的!
CSS @supports标记:
语法:
@supports (rule)[operator (rule)]* { sRules }
说明:
rule: 指定一条具体的CSS规则,必须使用括号包裹。
operator: 使用or | and | not等操作符指定多条规则。
1、基本用法:
@supports ( display: flex ) {
body {
display: flex;
}
#main {
flex: auto;
}
}
代表浏览器支持flex标准,则使用里面的规则,如果不支持,可以如下实现。
2、not关键词 :
@supports not ( display: flex ) {
#main{
float: left;
}
}
当然not关键词使用的比较少,一般支持@supports的浏览器,都会支持大部分css3属性。
3、多条件检测 :
我们可以使用or和and语句,来实现多条件检查。例如:
@supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) {
/* use styles here */
}/
4、@supports浏览器的兼容:
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
12.0+ | 22.0+ | 28.0+ | 9.0+ | 15.0+ | 9.0+ | 4.4+ | 27.0+ |
设计导航https://www.wode007.com/favorites/sjdh
Js中CSS.supports函数
同css的@supports标记一样,js里也提供了Window.CSS.supports()方法,用来检查浏览器对css3属性是否支持,该函数提供2中调用方式:
第一种方法是使用两个参数:一个是属性名,另一个是属性值 。
var supportsFlex = CSS.supports("display", "flex");
第二种用法是:简单的提供整个需要分析的样式字串。
var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");
CSS.supports函数返回的是一个布尔值,如果为true这代表支持该属性,当然在使用该函数之前,我们需要先判断浏览器是否支持CSS.supports,方法如下:
if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){
//支持
}
最新文章
- dynamic 的使用 待续
- 递归,回溯,DFS,BFS的理解和模板【摘】
- Codeforces Round #370 (Div. 2) A B C 水 模拟 贪心
- uiatuomator如何调试
- 第16章 观察者模式(Oberver Pattern)
- [Python] spides
- 最近公共祖先(LCT)
- (二)阿里云ECS Linux服务器外网无法连接MySQL解决方法(报错2003- Can't connect MySQL Server on 'x.x.x.x'(10038))(自己亲身遇到的问题是防火墙的问题已经解决)
- 【干货】Jquery.Datables与Bootstrap3的组合使用
- Java多线程核心技术(六)线程组与线程异常
- 非极大值抑制(NMS)的几种实现
- window.setTimeout
- 推荐系统之协同过滤的原理及C++实现
- 关于在win8系统下用VMware 9.0装系统导致物理机不断重启的解决办法
- mysql跨库复制: replicate_wild_do_table和replicate-wild-ignore-table
- 某些material英文翻译
- 【转】(八)unity4.6Ugui中文教程文档-------概要-UGUI Rich Text
- PTA (Advanced Level) 1021 Deepest Root
- jenkins slave 挂载
- elasticsearch聚合--桶(Buckets)和指标(Metrics)的概念