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來給背景圖檔着色，可以在原有的灰階圖檔中添加一個顔色。

這個功能很酷不是麼？然而，浏覽器對它的支援還在完善之 中， background-blend-mode 目前已經可以在很多浏覽器中使用了, 但是仍有一些無法顯示出想要的效果。 為了在無法顯示效果的浏覽器中同樣完成這個功能，我們可以通過類似半透明顔色疊加的方式。

上面的代碼中，如果浏覽器不支援semi-transparent顔色 圖層，那就隻能顯示一種背景。如果我們使用feature query，我們可以根據情況來改變背景。feature query這裡就更像media query了，，使用@supports并在括号内添加css聲明即可使用。

feature queries in javascript

feature queries同時也支援javascript接口：css.supports。我們同樣以上面的例子來說明。如果浏覽器支援background-blend-mode: multiply，我們可以在body标簽中添加 blend-mode。

像上面的示範一樣，你可以用邏輯運算符(and, or 和 not)來合并測試。舉例來說，如果你想要讓浏覽器同時支援background-blend-mode 和background屬性值，你可以編輯下面的内容：

或者寫成：

相 信feature queries很快就會在開發者之間廣泛流行起來，你需要考慮的就是在什麼時候使用它，在測試的時候需要确定它們能在同一個浏覽器中适用。雖然 feature query對性能方面不會有太大的改善,但是它們可以讓你的代碼變得更加可控。不妨先試一試這些新特性，然後把感受告訴我們。