浅谈CSS3特性查询(Feature Query: @supports)功能简介


Posted in HTML / CSS onJuly 31, 2017

我们已经知道使用媒体查询(Media Query)来检测屏幕尺寸,从而实现响应式界面设计。

而特性查询则用来查询用户代理(如桌面浏览器)是否支持某个CSS3的特性,这个功能除了IE之外,已被其他浏览器所支持。

语法格式

@supports <supports-condition> {
  <group-rule-body>
}

特性查询使用@supports规则(和媒体查询@media类似,都是使用一个@符号前缀:at-rule),该CSS规则允许我们把CSS样式写在条件块中,这样只有在当前用户代理支持一个特定的CSS属性值对(property-value pair)的时候才被应用。

举个简单的例子,如果我们要为支持弹性框(flexbox)特性的浏览器定义样式,可以像下面这样写:

@supports ( display: flex ) {
    .foo { display: flex; }
}

同样的,和媒体查询规则类似,可以使用一些逻辑操作符(如and、or和not),并支持串接在一起:

@supports (display: table-cell) and (display: list-item) {
    … /* your styles */
}
 
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* 不支持justify时,用这里的代码来模拟text-align-last:justify */
}

使用实例

检测动画特性:

@supports (animation-name: test) {
    … /* 当UA支持无前缀animations特性时的特定样式 */
    @keyframes { /* @supports 作为一个CSS条件组at-rule,可以包含其他at-rules */
      …    
    }
}

检测自定义属性:

@supports (--foo: green) {
  body {
    color: green;
  }
}

规范状态

尚处于候选推荐CR(Candidate Recommendation)状态,规范链接:CSS Conditional Rules Module Level 3.

浏览器兼容性

桌面系统:

浅谈CSS3特性查询(Feature Query: @supports)功能简介

移动设备:

浅谈CSS3特性查询(Feature Query: @supports)功能简介

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
canvas生成带二维码海报的踩坑记录
Sep 11 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
详解HTML5中CSS外观属性
Sep 10 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 #HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 #HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 #HTML / CSS
css3学习系列之移动属性详解
Jul 04 #HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 #HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 #HTML / CSS
利用css3画个同心圆示例代码
Jul 03 #HTML / CSS
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Python collections模块实例讲解
2014/04/07 Python
利用Python获取操作系统信息实例
2016/09/02 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
python3正则模块re的使用方法详解
2020/02/11 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
电气工程自动化求职信
2014/03/14 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
学风建设演讲稿
2014/09/12 职场文书
委托书格式范文
2015/01/28 职场文书
保管员岗位职责
2015/02/14 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
2016公司新年问候语
2015/11/11 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫
mysql查找连续出现n次以上的数字
2022/05/11 MySQL