为了判断浏览器是否支持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()的使用的更多相关文章

  1. css3条件判断_@supports的用法/Window.CSS.supports()的使用

    为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...

  2. CSS3条件判断——@supports/window.CSS.supports()(转)

    CSS3条件判断,听起来"不明觉厉",如果你对CSS稍为熟悉一点的话,你会发现CSS中的"@media"就是条件判断之一.是的,在CSS3的条件判断规范文档中包 ...

  3. mybatis中多条件判断---choose when的用法

    <select id="getFunctionByPage" resultMap="FunctionRlt"> SELECT K.FUNCTION_ ...

  4. CSS 条件判断、等宽字体以及ch单位

    <!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8"> ...

  5. 10_bash_变量_条件判断及运算_sed_循环

    shell编程: 编译器.解释器编程语言:机器语言.汇编语言.高级语言 静态语言:编译型语言 强类型(变量):变量在使用前,必须事先声明,甚至还需要初始化 事先转换成可执行格式 C/C++.C#.Ja ...

  6. shell中括号的特殊用法 linux if多条件判断

    一.   bash [  ] 单双括号 基本要素: Ø  [ ] 两个符号左右都要有空格分隔 Ø  内部操作符与操作变量之间要有空格:如  [  “a”  =  “b”  ] Ø  字符串比较中,&g ...

  7. (转)shell中括号的特殊用法 linux if多条件判断

    一.   bash [  ] 单双括号 基本要素: Ø  [ ] 两个符号左右都要有空格分隔 Ø  内部操作符与操作变量之间要有空格:如  [  “a”  =  “b”  ] Ø  字符串比较中,&g ...

  8. 第10章 Shell编程(3)_字符处理命令和条件判断

    3. 字符处理命令 3.1 排序命令:sort (1)sort命令:#sort [选项] 文件名 选项 作用 -f 忽略大小写 -n 以数值型进行排序,默认使用字符串型排序 -r 反向排序 -t 指定 ...

  9. Python基础(一)_数据类型、条件判断、循环、列表

    编译型语言(中文版)运行代码之前,要先编译.然后再运行编译时间比较长c.c++.c# 解释型语言(翻译版)运行的时候才去编译,运行一次编译.运行效率没有编译型语言快python.ruby.shell. ...

随机推荐

  1. php switch判断一个数所在的范围

    <?php header("content-type:text/html;charset=utf8"); $score=70; switch($score) { case $ ...

  2. 配置上这个模板Bug少90%

    本来写程序经常会碰到各种难缠的Bug,自从修改了注释模板,bug明显少了,看效果图: 好吧,我逗比了 下面是文字版: /** _oo0oo_ o8888888o 88" . "88 ...

  3. java代码简单实现队列

    1. 基于链表简单实现 import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; / ...

  4. @codeforces - 141E@ Clearing Up

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N 个点 M 条边的图,每条为黑色或者白色. 现在让你 ...

  5. @codeforces - 1217F@ Forced Online Queries Problem

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 个点的无向图,标号从 1 到 n.一开始没有任何边 ...

  6. 洛谷P3366 【模板】最小生成树(kuskal)

    #include<bits/stdc++.h> using namespace std; ; ; struct node{ int cnt,fa; }f[maxn]; inline voi ...

  7. HTML打印print

    上代码: //打印 function printme() { global_Html = document.body.innerHTML; //document.body.innerHTML = do ...

  8. 冒泡排序&直接插入排序&快速排序

    一.冒泡排序 0       1      2      3      4      5 假设有一个6个数的数组,0,1,2,3,4,5是索引,冒泡排序就是相邻两个对比,比如5和4比,如果满足条件就互 ...

  9. Scoop 包管理工具 安装

    本人浏览器已经跨域 https://get.scoop.sh 访问该地址成功 安装前提(所需要的环境): 操作环境:win10. 确保你的 PowerShell 版本 >= 3. win7或许低 ...

  10. web与原生交互+活动

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...