特性查询也就是@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. 2017 CCPC秦皇岛 G题 Numbers

    DreamGrid has a nonnegative integer . He would like to divide  into nonnegative integers  and minimi ...

  2. 笔记||Python3之对象与变量

    什么是对象?什么是变量? 在python中,一切都是对象,一切都是对象的引用. 变量相当于数学中的等式,比如xy = 20 .在编程中变量还可以是任意数据类型. 对象是分配的一块内存,有足够的空间去表 ...

  3. 【重温基础】16.JSON对象介绍

    本文是 重温基础 系列文章的第十六篇. 今日感受:静. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1-14篇 [重温基础]15.JS对象介绍 本章节复习的 ...

  4. font-family与font-face的区别

    font-family:指定字体 设置后,电脑上无该字体时,观看网页不能显示该字体效果, 针对中文版操作系统,为保证网页效果,通常只指定:宋体.黑体.微软雅黑等系统上默认自带的字体. font-fac ...

  5. CSS之position属性

    层级的话可以用z-inde进行设置

  6. 从多谐振荡器详细解析到555定时器基本电路(控制LED闪烁)

    在学期末,笔者参加了学校的电工实习,前六天做都很快,但是今天要做一个关于555多谐振荡器的LED闪烁电路,由于笔者没有提前准备,导致今天就算把电路搭建出来也不懂具体原理,耗费了不少时间,所以我打算专门 ...

  7. java基础-数据类型之殇

    一 前言 Java的数据类型分为2种,分别是基本数据类型和引用数据类型:java的数据类型是强数据类型,意味着每声明一个变量,其必定有与之对应的数据类型:面试常问的java8大基本数据类型其实是基本数 ...

  8. 这几种JavaScript语法不要轻易使用,容易出事

    文章目录 12种不宜使用的JavaScript语法 1. == 2. with 3. eval 4. continue 5. switch 贯穿 6. 单行的块结构 7. ++和-- 8. 位运算符 ...

  9. 规范git commit提交记录和版本发布记录

    在开发过程中我们一般都会用到git管理代码,在git commit提交代码时我们一般对git commit message随便写点简单的描述,可是随着项目参与人数的增多,发现提交的commit记录越来 ...

  10. Web基础了解版04-XML-Tomcat-Http

    XML 什么是XML - Tomcat - Http XML:eXtensible Markup Language (可扩展标记语言). XML 是一种标记语言,很类似 HTML. XML 的设计宗旨 ...