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+ |
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. ...
随机推荐
- php switch判断一个数所在的范围
<?php header("content-type:text/html;charset=utf8"); $score=70; switch($score) { case $ ...
- 配置上这个模板Bug少90%
本来写程序经常会碰到各种难缠的Bug,自从修改了注释模板,bug明显少了,看效果图: 好吧,我逗比了 下面是文字版: /** _oo0oo_ o8888888o 88" . "88 ...
- java代码简单实现队列
1. 基于链表简单实现 import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; / ...
- @codeforces - 141E@ Clearing Up
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N 个点 M 条边的图,每条为黑色或者白色. 现在让你 ...
- @codeforces - 1217F@ Forced Online Queries Problem
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 个点的无向图,标号从 1 到 n.一开始没有任何边 ...
- 洛谷P3366 【模板】最小生成树(kuskal)
#include<bits/stdc++.h> using namespace std; ; ; struct node{ int cnt,fa; }f[maxn]; inline voi ...
- HTML打印print
上代码: //打印 function printme() { global_Html = document.body.innerHTML; //document.body.innerHTML = do ...
- 冒泡排序&直接插入排序&快速排序
一.冒泡排序 0 1 2 3 4 5 假设有一个6个数的数组,0,1,2,3,4,5是索引,冒泡排序就是相邻两个对比,比如5和4比,如果满足条件就互 ...
- Scoop 包管理工具 安装
本人浏览器已经跨域 https://get.scoop.sh 访问该地址成功 安装前提(所需要的环境): 操作环境:win10. 确保你的 PowerShell 版本 >= 3. win7或许低 ...
- web与原生交互+活动
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...