css3条件判断_@supports的用法/Window.CSS.supports()的使用
为了判断浏览器是否支持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)){
//支持
}
css3条件判断_@supports的用法/Window.CSS.supports()的使用的更多相关文章
- css3条件判断_@supports的用法 以及 Window.CSS.supports()的使用
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...
- CSS3条件判断——@supports/window.CSS.supports()(转)
CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...
- mybatis中多条件判断---choose when的用法
<select id="getFunctionByPage" resultMap="FunctionRlt"> SELECT K.FUNCTION_ ...
- CSS 条件判断、等宽字体以及ch单位
<!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8"> ...
- 10_bash_变量_条件判断及运算_sed_循环
shell编程: 编译器.解释器编程语言:机器语言.汇编语言.高级语言 静态语言:编译型语言 强类型(变量):变量在使用前,必须事先声明,甚至还需要初始化 事先转换成可执行格式 C/C++.C#.Ja ...
- shell中括号的特殊用法 linux if多条件判断
一. bash [ ] 单双括号 基本要素: Ø [ ] 两个符号左右都要有空格分隔 Ø 内部操作符与操作变量之间要有空格:如 [ “a” = “b” ] Ø 字符串比较中,&g ...
- (转)shell中括号的特殊用法 linux if多条件判断
一. bash [ ] 单双括号 基本要素: Ø [ ] 两个符号左右都要有空格分隔 Ø 内部操作符与操作变量之间要有空格:如 [ “a” = “b” ] Ø 字符串比较中,&g ...
- 第10章 Shell编程(3)_字符处理命令和条件判断
3. 字符处理命令 3.1 排序命令:sort (1)sort命令:#sort [选项] 文件名 选项 作用 -f 忽略大小写 -n 以数值型进行排序,默认使用字符串型排序 -r 反向排序 -t 指定 ...
- Python基础(一)_数据类型、条件判断、循环、列表
编译型语言(中文版)运行代码之前,要先编译.然后再运行编译时间比较长c.c++.c# 解释型语言(翻译版)运行的时候才去编译,运行一次编译.运行效率没有编译型语言快python.ruby.shell. ...
随机推荐
- 第七届蓝桥杯JavaC组省赛真题
解题代码部分来自网友,如果有不对的地方,欢迎各位大佬评论 题目1.有奖竞猜 题目描述 小明很喜欢猜谜语. 最近,他被邀请参加了X星球的猜谜活动. 每位选手开始的时候都被发给777个电子币. 规则是:猜 ...
- Java实现最优二叉查找树
1 问题描述 在了解最优二叉查找树之前,我们必须先了解何为二叉查找树? 引用自百度百科一段讲解: 二叉排序树(Binary Sort Tree)又称二叉查找树(Binary Search Tree), ...
- java矩形的关系
在编写图形界面软件的时候,经常会遇到处理两个矩形的关系. 如图[1.jpg]所示,矩形的交集指的是:两个矩形重叠区的矩形,当然也可能不存在(参看[2.jpg]). 两个矩形的并集指的是:能包含这两个矩 ...
- 解Bug之路-记一次存储故障的排查过程
解Bug之路-记一次存储故障的排查过程 高可用真是一丝细节都不得马虎.平时跑的好好的系统,在相应硬件出现故障时就会引发出潜在的Bug.偏偏这些故障在应用层的表现稀奇古怪,很难让人联想到是硬件出了问题, ...
- STL常用序列容器
这里简要的记述一下STL常用容器的实现原理,要点等内容. vector vector是比较常用的stl容器,用法与数组是非类似,其内部实现是连续空间分配,与数组的不同之处在于可弹性增加空间,而arra ...
- python3 优惠券查询GUI程序
from tkinter import ttkfrom tkinter import messageboximport pymssqlimport tkinterimport decimalimpor ...
- Netty 源码解析: Netty 的 ChannelPipeline
ChannelPipeline和Inbound.Outbound 我想很多读者应该或多或少都有 Netty 中 pipeline 的概念.前面我们说了,使用 Netty 的时候,我们通 ...
- R调用python模块
明明已经安装了sctransfer,但仍然显示没有该模块 Error in py_module_import(module, convert = convert) : ModuleNotFoundEr ...
- el-table的花样需求---表格加图片、加音频、加序号、多级动态表头
elemnet-ui组件库大家应该不陌生,在展示多条结构类似的数据方面,el-table可谓扛把子,不仅可以把数据展示的整齐,还支持排序.筛选或其他自定义操作.那么,除了上述的基本功能外,你还遇到过哪 ...
- PyQt5 对话框示例
import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * class Example(QMainWindow): def _ ...