CSS3条件判断——@supports/window.CSS.supports()(转)
CSS3条件判断,听起来“不明觉厉”,如果你对CSS稍为熟悉一点的话,你会发现CSS中的“@media”就是条件判断之一。是的,在CSS3的条件判断规范文档中包含了两个部分,其一是“@media”规则,主要用来“根据媒体属性区分样式表”(特别是在Responsive设计中,发挥的作用更是强大);其二是“@supports”规则,主要用来代替前面常用的Modernizr库,在不支持CSS3的浏览器下实现渐进增强式设计。换句话来说,@supports可以让我们在不支持CSS3属性的浏览器下配上单独的样式,看起来很强大,那具体如何使用呢?我们今天一起简单的来学习一下:
@supports起源
众所周知,不同的浏览器(不管是现代浏览器还是老版本的IE浏览器)对Web页面的解析都是不一样,为了让Web页面在这些浏览器下渲染达到基本一致的情况,给用户更好的体验,我们必须为他们写不同的样式代码。
不同特征的检测方法我们早期都是依赖于javascript来检测,后来通过第三方js库Modernizr来完成。但这样真的有用吗?除了要懂怎么检测之外,我们还需要了解更多的浏览器解析机制,这样一来对于我们前端人员来说就是“没办法”。还好CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则,它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。这对我们来说是非常重要。
@supports语法规则
要想更好的使用@supports,我们有必要先从其语法开始入手,只有知道了怎么用,我们才能更好的去用。
@supports <条件规则> {
/* 特殊样式规则 */
}
@supports中的“条件规则”可以声明一条或者几个由不同的逻辑运算符相结合的声明(比如说,非(not),或(or),与(and)等)。而且还可以使用括号来确定其操作的优先级关系。
最简单的条件表达式是一个CSS声明,一个CSS属性名,后面加上一个属性值,属性名与属性值之前用分号隔开,比如:
(display:flex)
我们来看一个简单的例子:
@supports (display:flex) {
section { display: flex }
...
}
上面这段代码的意思是:如果浏览器支持“display:flex”属性,那么在“section”元素上就运用“display:flex”样式。
@supports还可以根据不同的逻辑运算符相结合,具有不同的语法规则,接下来我们一起来细化一下@supports的语法规则,以及使用细节。
基本属性的检查
正如前面的示例一样,你可以使用CSS的基本属性来进行检查:
@supports (display: flex) {
div { display: flex; }
}
这种是@supports最基本的使用规则。
not逻辑声明——排除
@supports可以使用not逻辑声明,主要作用是,在不支持新特性时,可以提供备用样式。换过来也可以理解,如果你的浏览器不支持@supports条件判断中的样式,你可以通过@supports为浏览器提供一种备用样式,如:
@supports not (display: flex){
#container div{float:left;}
}
上面的代码表示的是,如果你的浏览器不支持“display:flex”属性,那么你可以使用“float:left”来替代。
and逻辑声明——联合(与)
@supports的条件判断中也可以使用“and”逻辑声明。用来判断是否支持多个属性。例如:
@supports (column-width: 20rem) and (column-span: all) {
div { column-width: 20rem }
div h2 { column-span: all }
div h2 + p { margin-top:; }
...
}
上面的代码表示的是,如果你的浏览器同时支持“column-width:20rem”和“column-span:all”两个条件,浏览器将会调用下面的样式:
div { column-width: 20rem }
div h2 { column-span: all }
div h2 + p { margin-top:; }
...
反之,如果不同时支持这两个条件,那么浏览器将不会调用这部分样式。
注:多个and边接并不需要使用括号:
@supports (display: table-cell) and (display: list-item) and (display:run-in){
/*样式*/
}
or逻辑声明——or(或)
@supports除了“not”和“and”逻辑声明之外,还可以使用“or”逻辑声明。主要用来判断浏览器是否支持某一CSS特性。也就是说,可以使用“or”逻辑声明,同时专声明多个条件,只要其中一个条件成立就会启用@supports中的样式:
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
…
}
}
上面的例子是@supports中“or”运用场景之一。flex在opera和IE10中不需要前缀,而在其他的现代浏览器中还是需要浏览器厂商的前缀,通过上面的使得,浏览器支持“flex”属性就会调用下面的样式:
section {
display: -webkit-flex;
display: -moz-flex;
display: flex;
…
}
上面是有关于@supports的几种语法的使用规则介绍,在使用这几种规则时,有几点需要特别注意:
“or”和“and”混用
在@supports中“or”和“and”混用时,必须使用括号()来区分其优先级:
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) {
// ...
}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) {
// ...
}
以前两种写法优先级计算并不一样。
只有一条表达式时必须用括号()
在@supports中,如果条件判断表达式只有一条,那么这条表达式必须使用括号包起来:
@supports (display: flex) {
// ...
}
浏览器兼容性
通过上面对@supports的语法介绍,大家都知道这个属性对于做一些渐进增加式样式,或者浏览器的兼容性特别方便,但浏览器本身对其的兼容性如何呢?我们一起来看Caniuse.com提供的兼容性表格:目前IE浏览器不支持,火狐&谷歌浏览器支持
虽然目前仅有两个浏览器支持,但我们应该相信,这将是一种趋势,迟早其他浏览器也会跟上的,最终被支持。
CSS.supports
在javascript中支持css的@supports的写法是“window.CSS.supports”。CSS.supports规范提供了两种写法。第一种方法包括了两个参数,一个是属性,另一个是属性值:
var supportsFlex = CSS.supports("display", "flex");
第二种写法简单的提供整个字符串的写法:
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");
在使用javascript的supports,最重要的是先检测他的特性,Opera浏览器使用不同的名称方法:
var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);
使用@supports来替代Modernizr库?
众说周知,早前都是使用Modernizr库来做一些浏览器对属性的检测,从而判断浏览器是否支持这些特性。自从@supports推出后,Modernizr真的是老了吗?他们之间有什么优势呢?
@supports和Modernizr相比,在速度、性能和功能都要比Modernizr强。为什么这么说呢?因为@supports采用浏览器本地方法实现,这样速度会更快、效率也会更高;另外Modernizr需要依赖于js库,而@supports避免了引入js库,减少了http的请求量和服务器流量,并且让开发更简单快捷;而且@support支持多种逻辑条件样式判断,可以很好的满足多种需求。
但话又说回来,如果你的浏览器不支持@supports,目前来说你还是需要依赖于Modernizr来做一些检测。其实Paul Irish说过,Modernizr也在计划,未来将使用@supports来替代自身的检测方法。
更多:
document.documentElement.style判断浏览器是否支持Css3属性
CSS3条件判断——@supports/window.CSS.supports()(转)的更多相关文章
- css3条件判断_@supports的用法 以及 Window.CSS.supports()的使用
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...
- css3条件判断_@supports的用法/Window.CSS.supports()的使用
为了判断浏览器是否支持css3的一些新属性样式,当不兼容该样式的时候,我们可以更优雅的降级处理.这就需要使用到css3的条件判断功能:在css中支持@supports标记.或者在js中使用CSS.su ...
- CSS 条件判断、等宽字体以及ch单位
<!DOCTYPE> <html lang="en"> <head> <meta charset="utf-8"> ...
- Sass&Scss入门 选择器 混合器 导入 条件判断 迭代
Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...
- wordpress 函数、条件判断以及文件的总结
WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css : CSS(样式表)文件 index.php : 主页模板 archive.php : Arc ...
- python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器
python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 1. 创建一个 zqxt_tm ...
- HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断
折腾: [已解决]给react-hot-boilerplate中的index.html换成用HtmlWebpackPlugin自动生成html 期间,已经有了思路了,但是不知道如何在ejs的html中 ...
- vue学习笔记(二)- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
随机推荐
- Two-phase Termination模式
停止线程是一个目标简单而实现却不那么简单的任务.首先,Java没有提供直接的API用于停止线程.此外,停止线程时还有一些额外的细节需要考虑,如待停止的线程处于阻塞(等待锁)或者等待状态(等待其它线程) ...
- bzoj2120 2453
明显的数据结构题这道题的特殊性在于n只有10000,修改的操作只有1000那么就是说即便是O(n)的修改也没有太大的问题,只要常数写小一点即可考虑到以前对同色点的处理pre[i]表示与这个位置同色的前 ...
- [Exchange2013] 无法正常发送存入草稿箱 或者 只能发不能收
可能是由于你的域控的DNS设置导致: 1.那么首先我们添加一个EX的记录在域控的DNS里面 2.登录exchange的控制台,设置DNS Server
- 游戏开发设计模式之子类沙盒模式(unity3d 示例实现)
积累提供所有操作(的实现)来定义子类的行为用一个最简单的例子来讲解这个模式玩家操纵的英雄也就是这个游戏的主角会有许多技能,我们想定义许多不同的技能,来让玩家使用.首 先我们定义一个skillBase类 ...
- 安装完出现Deprecated: Function ereg_replace() is deprecated in
php5.3说明 先不要用php5.3吧,毕竟目前版本要修改这个工作量太大,而且可能会有很多未知错误,这只能在下一版全部改用perl的正则了,都不明白php官方发 什么神经,此外不支持应该是直接屏 ...
- 三大跨平台网盘--ubuntu one
背景介绍 Ubuntu One是由Ubuntu背后的公司Canonical所推出的一项网络服务.该服务能够存储你的文件,并允许你在多台电脑上同步,还可以与好友分享这些文件. 准备工作 帐号--ubun ...
- 整数区间及区间集合(C#实现)
/// <summary> /// 整数区间类 /// </summary> private class Interval { , _end = ; public int St ...
- select、poll、epoll三组IO复用
int select(int nfds,fd_set* readfds,fd_set* writefds,fd_set* exceptfds,struct timeval* timeout)//其中n ...
- 并查集hdu1232
Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道 ...
- November 4th Week 45th Friday 2016
Problems are not stop signs, they are guidelines. 问题不是休止符,而是指向标. Most of the problems can be overcom ...