Feature Queries 是CSS3 Conditional Rules specification中的一部分，它支持“@suppZ喎?/kf/ware/vc/" target="_blank" class="keylink">vcnRzobG55tTyo6yhsEBzdXBwb3J0c6GxuebU8r/J0tTTw8C0suLK1OSvwMDG98rHt/HWp7PWQ1NTyvTQ1LrNJiMyMDU0MDu21KGjQ1NTsb7J7dPQvbW8trv61sajrLHIyOe69srTsrvWp7PWtcTK9NDUu/ImIzIwNTQwO6Ostau1sbrc1tjSqrXEyvTQ1NaxvdOxu7r2ytPSssrHutzRz9bYtcSjrNXiuPbKsbryxOO/ydLU08NGZWF0dXJlIFF1ZXJpZXMKILLiytTKx7fx1qez1sv509C1xENTU7nm1PKjrLu5v8nS1NPFu6/E47XE0rPD5qGjUXVlcmllc9TauPe49uSvwMDG99bQ0tG+rdPQuty24M7Itqi1xMq1z9bBy6OsscjI50Nocm9tZSxGaXJlZm94us0gT3BlcmGho7bU5K/AwMb3tcTWp7PWyNTU2rzTx7+jrMTj09Cx2NKqwcu94tK7z8JGZWF0dWUgUXVlcmllcywgsqK+9raoyse38dTaz9bU2rXEz+7Ev9bQus/Kysv8oaM8L3A+CjxoMz5GZWF0dXJlIFF1ZXJpZXMgaW4gQ1NTPC9oMz4KPHA+RmVhdHVyZSBRdWVyaWVzus1NZWRpYSBRdWVyaWVz09C148/xo6y+2dK7uPa88rWltcTA/dfTo6zE47/J0tTSqsfz5K/AwMb31MvQ0NK7uPZDU1O1xG1hcmdpbsr00NShozwvcD4KCjxwcmUgY2xhc3M9"brush:java;">@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特性查询)