即將來到: CSS Feature Queries (CSS特性查詢)

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特性查詢)