Feature Queries 是CSS3 Conditional Rules specification中的一部分,它支持“@supports”规则,“@supports”规则可以用来测试浏览器是否支持CSS属性和值对。CSS本身有降级机制,比如忽视不支持的属性或值,但当很重要的属性直接被忽视也是很严重的,这个时候你可以用Feature Queries 测试是否支持所有的CSS规则,还可以优化你的页面。Queries在各个浏览器中已经有很多稳定的实现了,比如Chrome,Firefox和 Opera。对浏览器的支持仍在加强,你有必要了解一下Featue Queries, 并决定是否在现在的项目中合适它。

Feature Queries in CSS

Feature Queries和Media Queries有点像,举一个简单的例子,你可以要求浏览器运行一个CSS的margin属性。

@supports (margin: 0) { /*CSS to apply*/ }

如果你不太明白,让我们举一个现实中的例子,假如你想用backgrund-blend-mode来给背景图片着色,可以在原有的灰度图片中添加一个颜色。

在线调试唯一地址:http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm

    body {
background-blend-mode: multiply;
background: linear-gradient(rgb(59, 89, 106)
, rgb(63, 154, 130))
, url(background.png);
}

这个功能很酷不是么?然而,浏览器对它的支持还在完善之中, background-blend-mode 目前已经可以在很多浏览器中使用了, 但是仍有一些无法显示出想要的效果。 为了在无法显示效果的浏览器中同样完成这个功能,我们可以通过类似半透明颜色叠加的方式。

    body {
background: #3F9A82;
background: linear-gradient(rgba(59, 89, 106, 0.8)
, rgba(63, 154, 130, 0.8))
, url(background.png);
}

上面的代码中,如果浏览器不支持semi-transparent颜色图层,那就只能显示一种背景。如果我们使用Feature Query,我们可以根据情况来改变背景。Feature Query这里就更像Media Query了,,使用@supports并在括号内添加CSS声明即可使用。

    @supports (background-blend-mode: multiply) {
body {
background-blend-mode: multiply;
background: linear-gradient(rgb(59, 89, 106)
, rgb(63, 154, 130))
, url(background.png);
}
}

Feature Queries in JavaScript

Feature Queries同时也支持JavaScript接口:CSS.supports。我们同样以上面的例子来说明。如果浏览器支持background-blend-mode: multiply,我们可以在body标签中添加 blend-mode。

在线调试唯一地址:http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm

    window.onload = function() {
if (CSS.supports('(background-blend-mode: multiply)'))
document.body.classList.add('blend-mode');
}
    body.blend-mode {
background-blend-mode: multiply;
background: linear-gradient(rgb(59, 89, 106)
, rgb(63, 154, 130))
, url(background.png);
}

像上面的演示一样,你可以用逻辑运算符(and, or 和 not)来合并测试。举例来说,如果你想要让浏览器同时支持background-blend-mode 和background属性值,你可以编辑下面的内容:

    @supports (background-blend-mode: multiply)
and (background: linear-gradient(...), url(...))

或者写成:

    CSS.supports('(background-blend-mode: multiply) \
and (background: linear-gradient(...), url(...))');

相信Feature Queries很快就会在开发者之间广泛流行起来,你需要考虑的就是在什么时候使用它,在测试的时候需要确定它们能在同一个浏览器中适用。虽然 Feature Query对性能方面不会有太大的改善,但是它们可以让你的代码变得更加可控。不妨先试一试这些新特性,然后把感受告诉我们。

极客标签 - 专业和精准的分享,关注你感兴趣的极客,社区提供超棒的精品教程,互动授课

了解前端技术,请访问极客互动课程库代码录播

阅读原文:即将来到: CSS Feature Queries (CSS特性查询)

即将来到: CSS Feature Queries (CSS特性查询)的更多相关文章

  1. [CSS] Conditionally Apply Styles Using Feature Queries @supports

    While browsers do a great job of ignoring styles they don’t understand, it can be useful to provide ...

  2. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  3. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  4. CSS media queries

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  5. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  6. 了解HTML CSS选择器操作和特性

    子选择器 在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的<span>标签进行样式设定(<span>标签必须为段落标签下的第一代子元素, ...

  7. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

  8. 任务十二:学习CSS 3的新特性

    任务目的 学习了解 CSS 3 都有哪些新特性,并选取其中一些进行实战小练习 任务描述 实现 示例图(点击查看) 中的几个例子 实现单双行列不同颜色,且前三行特殊表示的表格 实现正常状态和focus状 ...

  9. css:Media Queries: How to target desktop, tablet and mobile?

    <!doctype html> <html> <head> <meta name="viewport" content="wid ...

随机推荐

  1. poj 1659 Frogs' Neighborhood( 青蛙的邻居)

    Frogs' Neighborhood Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 9639   Accepted: 40 ...

  2. 平衡树之treap luoguP3369

    今天又复习了一遍treap,这题有前驱后继排名排位添加和删除等操作. 非常好写,虽然代码颇长但逻辑性很强. #include<bits/stdc++.h> using namespace ...

  3. BZOJ 3231: [Sdoi2008]递归数列 (JZYZOJ 1353) 矩阵快速幂

    http://www.lydsy.com/JudgeOnline/problem.php?id=3231   和斐波那契一个道理在最后加一个求和即可 #include<cstdio> #i ...

  4. bzoj1123 Blockade

    Description Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n&l ...

  5. ngxin error日志

    日志模块ngx_errlog_module对于支持可变参数平台提供的三个接口 #define ngx_log_error(level, log, ...) \ if ((log)->log_le ...

  6. 把json格式的字符串转换成javascript对象或数组

      第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...

  7. linux基础命令学习(六)文件的特殊属性

    Linux chattr命令用于改变文件属性. 这项指令可改变存放在ext2文件系统上的文件或目录属性,这些属性共有以下8种模式: a:让文件或目录仅供附加用途.    b:不更新文件或目录的最后存取 ...

  8. mysql 绿色版安装

    1. 下载MySql5.6.10GA解压缩版,这就不多说也不上图了,下不到或者下好之后不知道如何解压的接下去的文章也没什么好多看的. 2. 解压好之后进入根目录是这样个情况(本人使用的是MySql5. ...

  9. Read UNIQUE ID and flash size method for stm32

    /* 读取stm32的unique id 与 flash size */ /* func: unsigned int Read_UniqueID_Byte(unsigned char offset) ...

  10. directio mysql 编绎选项

    http://www.myexception.cn/linux-unix/495407.html http://www.iyunv.com/thread-25950-1-1.html