浅谈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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
Html5踩坑记之mandMobile使用小记
Apr 02 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
css3 选择器
May 11 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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
开发大型PHP项目的方法
2006/10/09 PHP
web方式ftp
2006/10/09 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
jquery 上下滚动广告
2009/06/17 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Django实现文件上传下载功能
2019/10/06 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python是怎样处理json模块的
2020/07/16 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
教学质量评估实施方案
2014/03/17 职场文书
2015年环卫工作总结
2015/04/28 职场文书
2015年纪委工作总结
2015/05/13 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang