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

男娘i 2022-08-12 01:11 21阅读 0赞

[![0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg][]][0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg 1]

[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来给背景图片着色，可以在原有的灰度图片中添加一个颜色。

![121532527462161.jpg][]

在线调试唯一地址：[http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm][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。

![121533352151087.jpg][]

在线调试唯一地址：[http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm][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对性能方面不会有太大的改善,但是它们可以让你的代码变得更加可控。不妨先试一试这些新特性，然后把感受告诉我们。

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

了解前端技术，请访问极客[互动课程库][Link 1]和[代码录播][Link 2]

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

[0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg
[0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0ba231b9-b961-47e9-b310-b85ef7ae9ff6.jpg
[Feature Queries]: http://www.w3.org/TR/css3-conditional/#at-supports
[CSS3 Conditional Rules specification]: http://www.w3.org/TR/css3-conditional/
[121532527462161.jpg]: /images/20220810/76c903d759d84a8b88a4e63aee67ef3a.png
[http_www.gbtags.com_gb_debug_76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm]: http://www.gbtags.com/gb/debug/76f8c728-796d-48c7-a82f-f8400e8ba2a0.htm
[121533352151087.jpg]: /images/20220810/1938177fc0d34b09a380ef40aea0c47d.png
[http_www.gbtags.com_gb_debug_beef5e87-2159-45e9-872a-c85b51046e29.htm]: http://www.gbtags.com/gb/debug/beef5e87-2159-45e9-872a-c85b51046e29.htm
[Link 1]: http://www.gbtags.com/gb/gblibrary.htm
[Link 2]: http://www.gbtags.com/gb/listcodereplay.htm
[CSS Feature Queries _CSS_]: http://www.gbtags.com/gb/share/3810.htm