特性查询也就是@supports规则,这个属性是作为CSS2.0扩展被引入的,是检测浏览器是否支持css属性值,是由逻辑与,逻辑或和逻辑非组合而成。主要的目的就是为了作者能够在不同的浏览器上根据不同的CSS支持程度来进行特性样式的编写。

1.基本用法

/*html部分*/
/* <div class="box"><div> */
/*css部分*/
.box{
width:200px;
height:200px;
margin:30px auto;
background-color:red;
}
@supports (filter:blur(10px)){
.box{
background-color:green;
}
}
/*用法*/
@supports (写入需要进行判断的css属性,为bool值)){
为true的时候执行,为false的时候忽略
}

因为是谷歌浏览器,因此为了方便验证,实例如下

当判断为 -moz-column-gap:40px

当判断条件为 column-gap:40px

同时 @supports还支持表达式

/*逻辑与*/
@supports ((color:red) and (font-size:14px){ }
/*逻辑或*/
@supports ((color:red) or (font-size:14px)){ }
/*逻辑非*/
@supports (not color:red){ }

并且还支持组合表达的方式,在进行组合的时候将需要判断的条件使用括号括起来就可以进行正常的判断

@supports ((not (color:#fff) and (font-size:14px))or(background-color:#666)){}

@supports特性查询的更多相关文章

  1. 即将来到: CSS Feature Queries (CSS特性查询)

    Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否 ...

  2. 11g新特性-查询缓存(1)

    众所周知,访问内存比访问硬盘快得多,除非硬盘体系发生革命性的改变.可以说缓存在Oracle里面无处不在,结果集缓存(Result Cache)是Oracle Database 11g新引入的功能,引入 ...

  3. sql server 2016新特性 查询存储(Query Store)的性能影响

    前段时间给客户处理性能问题,遇到一个新问题, 客户的架构用的是 alwayson ,并且硬件用的是4路96核心,内存1T ,全固态闪存盘,sql server 2016 . 问题  描述 客户经常出现 ...

  4. 记录一些实用的小技巧-CSS篇

    1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...

  5. 2017年学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  6. 2017年值得学习的3个CSS特性

    原文:https://bitsofco.de/3-new-css-features-to-learn-in-2017/译文:http://caibaojian.com/3-new-css-featur ...

  7. 【译】2017年要学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  8. 2017年要学习的三个CSS新特性

    这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东西要学习.尽管CSS有很多新的特性, ...

  9. 在 CSS 中使用特征查询

    原文地址:Using Feature Queries in CSS 原文作者:Jen Simmons 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:Che ...

随机推荐

  1. sublime text3安装中文版插件

    安装插件前需要先安装 package control 扩展包管理器,安装方法为:进入 https://sublime.wbond.net/Package%20Control.sublime-packa ...

  2. Xcode11 踩坑记录

    1.UITextView控件莫名导致崩溃 如上图所示,点击Step over 前进进入编译器内部 在lldb控制台输入指令 po $arg1 看到编译器给的提示是由于UITextView的问题. 解决 ...

  3. iOS 弹窗alertView使用详解

    转自:http://blog.it985.com/4321.html alertView是iOS自带的弹窗通知框,我们来看下默认样式的效果图 下面直接上代码 1 2 3 4 5 - (void)del ...

  4. 数据挖掘算法(三)--logistic回归

    数据挖掘算法学习笔记汇总 数据挖掘算法(一)–K近邻算法 (KNN) 数据挖掘算法(二)–决策树 数据挖掘算法(三)–logistic回归 在介绍logistic回归之前先复习几个基础知识点,有助于后 ...

  5. Atoder-3620

    The season for Snuke Festival has come again this year. First of all, Ringo will perform a ritual to ...

  6. POJ2528---Mayor's posters

    The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...

  7. Jomoo的模板

    目录 1 杂类算法 1.1 快读模板 1.2 O(1) int64 乘法 2 图论算法 2.1 树类 - Trie 2.2 树类 - 并查集(NB version) 2.3 树类 - LCA 2.4 ...

  8. 基于iCamera App Kit 测试oV5640 500w分辨率 摄像头 总结

    基于iCamera App Kit 测试oV5640 摄像头 总结 iCamera App Kit 下载地址 http://pan.baidu.com/s/1kUMIwB1 可以参考下载链接的说明手册 ...

  9. CrazyBingo mini VIP 2.0 视频开发板 NIOS移植例程(原创)

    创建一个NIOS环境 注意事项 前言:(先了解下硬件) 本板卡目前主要适合以下几类人: (1)对FPGA 逻辑开发有强烈的兴趣,并且有一定的HDL基础 (2)计划采用FPGA图像架构,学习并研究图像算 ...

  10. QEMU让你无需开发板即可玩溜RT-Thread~

    1.1 本文的目的和背景 嵌入式软件开发离不开开发板,在没有物理开发板的情况下,可以使用QEMU等类似的虚拟机来模拟开发板.QEMU是一个支持跨平台虚拟化的虚拟机,它可以虚拟很多开发板.为了方便大家在 ...