Feature Queries 是CSS3 Conditional Rules specification中的一部分，它支持“@supports”規(guī)則，“@supports”規(guī)則可以用來(lái)測(cè)試瀏覽器是否支持CSS屬性和值對(duì)。CSS本身有降級(jí)機(jī)制，比如忽視不支持的屬性或值，但當(dāng)很重要的屬性直接被忽視也是很?chē)?yán)重的，這個(gè)時(shí)候你可以用Feature Queries 測(cè)試是否支持所有的CSS規(guī)則，還可以優(yōu)化你的頁(yè)面。Queries在各個(gè)瀏覽器中已經(jīng)有很多穩(wěn)定的實(shí)現(xiàn)了，比如Chrome,Firefox和 Opera。對(duì)瀏覽器的支持仍在加強(qiáng)，你有必要了解一下Featue Queries, 并決定是否在現(xiàn)在的項(xiàng)目中合適它。

Feature Queries in CSS

Feature Queries和Media Queries有點(diǎn)像，舉一個(gè)簡(jiǎn)單的例子，你可以要求瀏覽器運(yùn)行一個(gè)CSS的margin屬性。

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

如果你不太明白，讓我們舉一個(gè)現(xiàn)實(shí)中的例子，假如你想用backgrund-blend-mode來(lái)給背景圖片著色，可以在原有的灰度圖片中添加一個(gè)顏色。

在線調(diào)試唯一地址：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);
    }

這個(gè)功能很酷不是么？然而，瀏覽器對(duì)它的支持還在完善之中， background-blend-mode 目前已經(jīng)可以在很多瀏覽器中使用了, 但是仍有一些無(wú)法顯示出想要的效果。 為了在無(wú)法顯示效果的瀏覽器中同樣完成這個(gè)功能，我們可以通過(guò)類似半透明顏色疊加的方式。

    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，我們可以根據(jù)情況來(lái)改變背景。Feature Query這里就更像Media Query了，，使用@supports并在括號(hào)內(nèi)添加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同時(shí)也支持JavaScript接口：CSS.supports。我們同樣以上面的例子來(lái)說(shuō)明。如果瀏覽器支持background-blend-mode: multiply，我們可以在body標(biāo)簽中添加 blend-mode。

在線調(diào)試唯一地址：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);
    }

像上面的演示一樣，你可以用邏輯運(yùn)算符(and, or 和 not)來(lái)合并測(cè)試。舉例來(lái)說(shuō)，如果你想要讓瀏覽器同時(shí)支持background-blend-mode 和background屬性值，你可以編輯下面的內(nèi)容：

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

或者寫(xiě)成：

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

相信Feature Queries很快就會(huì)在開(kāi)發(fā)者之間廣泛流行起來(lái)，你需要考慮的就是在什么時(shí)候使用它，在測(cè)試的時(shí)候需要確定它們能在同一個(gè)瀏覽器中適用。雖然 Feature Query對(duì)性能方面不會(huì)有太大的改善,但是它們可以讓你的代碼變得更加可控。不妨先試一試這些新特性，然后把感受告訴我們。

極客標(biāo)簽 - 專業(yè)和精準(zhǔn)的分享，關(guān)注你感興趣的極客，社區(qū)提供超棒的精品教程，互動(dòng)授課

了解前端技術(shù)，請(qǐng)?jiān)L問(wèn)極客互動(dòng)課程庫(kù)和代碼錄播

閱讀原文：即將來(lái)到: CSS Feature Queries (CSS特性查詢)