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對性能方面不會有太大的改善,但是它們可以讓你的代碼變得更加可控。不妨先試一試這些新特性，然後把感受告訴我們。
原文地址：http://www.adminso.com/articles/view/91851
(站長搜索- http://www.adminso.com/yuanma -源碼下載，更新快，最專業的網站源碼下載！)