摘要：多年以來(lái)，開發(fā)者們都在使用來(lái)實(shí)現(xiàn)功能查詢，但是需要。完全沒(méi)有必要使用功能查詢或者測(cè)試，就是這樣運(yùn)作的。當(dāng)你需要混合使用的新規(guī)則和舊規(guī)則的時(shí)候，并且，僅當(dāng)新功能被支持的時(shí)候，就可以使用功能查詢了。

在 CSS 里，有一個(gè)你可能沒(méi)有聽過(guò)的工具，但是它已經(jīng)出現(xiàn)一段時(shí)間了，而且非常強(qiáng)大。也許，它會(huì)成為 CSS 中你最喜歡的東西之一。

那么，是什么呢？就是 @support，也就是功能查詢。

通過(guò) @support，你可以在 CSS 中使用一小段的測(cè)試來(lái)查看瀏覽器是否支持一個(gè)特定的 CSS 功能(這個(gè)功能可以是 CSS 的某種屬性或者某個(gè)屬性的某個(gè)值)，然后，根據(jù)測(cè)試的結(jié)果來(lái)決定是否要應(yīng)用某段樣式。比如：

@supports ( display: grid ) {
    // 如果瀏覽器支持 Grid，這里面的代碼才會(huì)執(zhí)行
}

如果瀏覽器能夠理解 display: grid，那么，大括號(hào)里的代碼都會(huì)被應(yīng)用，否則，這些樣式就會(huì)被跳過(guò)。

現(xiàn)在，對(duì)于功能查詢是什么，你也許還有一點(diǎn)疑惑。這并不是通過(guò)某種額外的驗(yàn)證來(lái)分析瀏覽器是否已經(jīng)確切的實(shí)現(xiàn)了某個(gè) CSS 屬性。如果你需要查看額外的驗(yàn)證，可以查看 Test the Web Forward。

功能查詢讓瀏覽器自己就能夠表現(xiàn)出是否支持某個(gè) CSS 屬性或者 CSS 屬性值。然后通過(guò)這個(gè)結(jié)果來(lái)判斷是否要應(yīng)用某段 CSS。如果一個(gè)瀏覽器沒(méi)有正確的(或者完全的)實(shí)現(xiàn)一個(gè) CSS 屬性，那么，@supports 就沒(méi)有什么用了。它并不是一個(gè)能夠讓瀏覽器的 bug 消失的魔杖。

但是，我已經(jīng)發(fā)現(xiàn) @supports 是那么難以置信的有幫助。比起以前沒(méi)有這個(gè)屬性的時(shí)候，@supports 能夠讓我一再的使用新的 CSS 功能。

多年以來(lái)，開發(fā)者們都在使用 Modernizr 來(lái)實(shí)現(xiàn)功能查詢，但是 Modernizr 需要 JavaScript。雖然這部分 JavaScript 很小，但是，CSS 結(jié)構(gòu)中添加了 Modernizr 的話，在 CSS 被應(yīng)用之前，就需要下載 JavaScript 然后等待執(zhí)行完成。比起使用 CSS，加入了 JavaScript 總是會(huì)更慢。而且，要是 JavaScript 執(zhí)行失敗了呢？另外，Modernizr 還需要一層額外復(fù)雜的、很多項(xiàng)目都無(wú)法理解的東西。相比之下，功能查詢更快，功能更強(qiáng)大，使用起來(lái)更簡(jiǎn)單。

你也許注意到了，@supports 的寫法和媒體查詢很類似，我覺(jué)得他們可能就是堂兄弟的關(guān)系。

@supports ( display: grid ) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

大多數(shù)時(shí)候，你其實(shí)不需要這樣的測(cè)試。比如，你可以直接這樣寫：

aside {
    border: 1px solid black;
    border-radius: 1em;
}

如果瀏覽器能夠理解 border-radius，那么，在相應(yīng)的容器上就會(huì)應(yīng)用圓角樣式。如果它不能理解這個(gè)屬性，那么，就會(huì)直接跳過(guò)并繼續(xù)執(zhí)行下面的語(yǔ)句。容器的邊緣也就保持直角了。完全沒(méi)有必要使用功能查詢或者測(cè)試，CSS 就是這樣運(yùn)作的。這是屬于 CSS 中穩(wěn)固設(shè)計(jì)，漸進(jìn)增強(qiáng)的一個(gè)基本的原則。瀏覽器會(huì)直接跳過(guò)他們無(wú)法解析的語(yǔ)句，不會(huì)拋出任何錯(cuò)誤。

大多數(shù)瀏覽器都會(huì)應(yīng)用 border-radius: 1em;，然后展示出右邊的效果。但是，在 IE6，7，8 上你卻不能看到圓角，你看到的將是左邊的效果。可以看看這個(gè)例子：A Rounded Corner Box。

對(duì)于這個(gè)例子，沒(méi)有必須要使用功能查詢。

那么，什么時(shí)候才需要使用 @supports 呢？功能查詢是將 CSS 聲明綁定在一起的一個(gè)工具，以便于這些 CSS 規(guī)則能夠在某種條件下以一個(gè)組合的方式運(yùn)行。當(dāng)你需要混合使用 CSS 的新規(guī)則和舊規(guī)則的時(shí)候，并且，僅當(dāng) CSS 新功能被支持的時(shí)候，就可以使用功能查詢了。

譯者注：以下例子中的 initial-letter 屬性現(xiàn)在在所有現(xiàn)代瀏覽器中都不受支持，所以，以下例子中的代碼可能都是無(wú)效的代碼。如果下文中有提到此屬性在某某瀏覽器中受支持的話，請(qǐng)忽略。需要了解 initial-letter 詳細(xì)的說(shuō)明，可以參考 initial-letter | MDN。

來(lái)看一個(gè)關(guān)于使用 initial-letter 的例子。這個(gè)屬性告訴瀏覽器要將特指的那個(gè)元素變得更大，就像一個(gè)段首大字一樣。在這里，我們要做的就是讓段落的第一個(gè)字母的大小為四行文字那么大。同時(shí)，我們?cè)賹?duì)它進(jìn)行加粗，在它的右邊設(shè)置一些 margin，還給它設(shè)置一個(gè)高亮的橘色。OK，很不錯(cuò)了。

p::first-letter {
    margin-right: 0.5em;
    color: #FE742F;
    font-weight: bold;
    -webkit-initial-letter: 4;
    initial-letter: 4;
}

這是在 Safari 上的效果

讓我們看看在其他瀏覽器上的效果。

好吧，簡(jiǎn)直沒(méi)法接受。除了使用 initial-letter 來(lái)達(dá)到我們想要的效果之外，我們并不想要改變字體的 color，margin，和 font-weight。所以，我們需要一個(gè)方法來(lái)測(cè)試瀏覽器是否支持 initial-letter 這個(gè)屬性，然后在瀏覽器支持這個(gè)屬性的時(shí)候再應(yīng)用相關(guān)的樣式。所以，使用功能查詢：

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}

注意，測(cè)試的時(shí)候需要進(jìn)行完全的測(cè)試，CSS 屬性和值都得寫上。一開始我也比較疑惑，為什么非得測(cè)試 initial-letter: 4 呢？4 這個(gè)值很重要嗎？如果我寫成 17 呢？莫非是需要匹配我即將要應(yīng)用的 CSS 中的樣式嗎？

原因是這樣的：@supports 在測(cè)試的時(shí)候，需要提供屬性和值，因?yàn)橛袝r(shí)候測(cè)試的是屬性，有時(shí)候測(cè)試的是值。對(duì)于 initial-letter ，你輸入多少值并不重要。但是，如果是 @suports ( dislay: grid ) 就不一樣了，所有瀏覽器都識(shí)別 display，但是，并不是所有瀏覽器都識(shí)別 display: grid。

回到我們的例子，當(dāng)前的 initial-letter 只在 Safari 9 上受支持，并且需要加前綴。所以，我加了前綴，同時(shí)，保持著不加前綴的規(guī)則，并且，我還寫了測(cè)試來(lái)測(cè)試另外的屬性。沒(méi)錯(cuò)，在功能查詢中，還可以使用 and, or, not 聲明。

下面是新的結(jié)果。理解 initial-letter 的瀏覽器會(huì)顯示一個(gè)巨大加粗高亮的段首大字。其他瀏覽器的行為就像是這個(gè)段首大字不存在一樣。當(dāng)然，如果更多的瀏覽器支持了這個(gè)屬性，那么，他們的行為也將會(huì)是有一個(gè)段首大字。

現(xiàn)在，也許你迫不及待的想要使用這個(gè)工具來(lái)將你的代碼分為兩個(gè)分支，使其變得干凈一些。“Hey，瀏覽器，如果你識(shí)別 Viewport 單位，就執(zhí)行這個(gè)，否則，執(zhí)行另外的”。感覺(jué)很不錯(cuò)，有條理。

@supports ( height: 100vh ) {
    // 支持 viewport height 的樣式
}
@supports not ( height: 100vh ) {
    // 對(duì)于舊瀏覽器的替代樣式
}
// 我們希望是好的，但這是一段爛代碼

這段代碼并不好，至少當(dāng)前看來(lái)是這樣的。發(fā)現(xiàn)問(wèn)題了嗎？

問(wèn)題就是，并不是所有的瀏覽器都支持功能查詢，不理解 @supports 的瀏覽器會(huì)直接跳過(guò)兩段代碼，這也許就太糟糕了。

意思就是，除非瀏覽器百分之百支持功能查詢，否則我們就沒(méi)法使用了嗎？當(dāng)然不是，我們完全可以使用功能查詢，而且應(yīng)該使用功能查詢，只要不像上面那樣寫代碼就行。

那么，怎么做才對(duì)呢？其實(shí)與使用媒體查詢類似，我們?cè)跒g覽器完全支持媒體查詢之前就開始使用了不是嗎？事實(shí)上，功能查詢使用起來(lái)比媒體查詢更簡(jiǎn)單，只要腦子放聰明一點(diǎn)就行了。

你想要讓你的代碼知道瀏覽器是否支持功能查詢或者正在測(cè)試的某個(gè)功能，我來(lái)告訴你怎么做。

當(dāng)然，在未來(lái)，瀏覽器 100% 支持功能查詢的時(shí)候，我們可以大量使用 @supports not 來(lái)組織我們的代碼。

所以，@supports 現(xiàn)在支持度什么樣了呢？

自從 2013 年中，@supports 就能夠在 Firefox，Chrome 和 Opera 中使用了。在 Edge 的各個(gè)版本中也受支持。Safari 在 2015 年秋季才實(shí)現(xiàn)這個(gè)功能。具體的支持情況，請(qǐng)看下面這張圖：

你可能會(huì)覺(jué)得 IE 不支持此功能會(huì)是一個(gè)大問(wèn)題，但是，其實(shí)不是這樣的。待會(huì)兒就會(huì)告訴你原因。我相信，最大的一個(gè)障礙是 Safari 8，我們需要留意在這個(gè)瀏覽器上發(fā)生的事情。

讓我們來(lái)看另外一個(gè)例子。假設(shè)我們有些布局代碼，為了正常運(yùn)行，需要使用 object-fit: cover;。對(duì)于不支持這個(gè)屬性的瀏覽器，我們想要使用不同的樣式。

所以，我們可以這樣寫：

@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
    p::first-letter {
        -webkit-initial-letter: 4;
        initial-letter: 4;
        color: #FE742F;
        font-weight: bold;
        margin-right: 0.5em;
    }
}

div {
    width: 300px;
    background: yellow;
}
@supports (object-fit: cover) {
    img {
        object-fit: cover;
    }
    div {
        width: auto;
        background: green;
    }
}

會(huì)發(fā)生什么呢？@supports 有支持或者不支持的情況，object-fit 也有支持或者不支持的情況，所以，就有了四種可能性：

所以，我們應(yīng)該怎么寫功能查詢的代碼呢？像下面這樣：

// fallback code for older browsers

@supports ( display: grid ) {
    // code for newer browsers
    // including overrides of the code above, if needed
}

譯者注：本文的主要內(nèi)容是介紹功能查詢和 @supports 的使用方法，所以，某些代碼可能是無(wú)法運(yùn)行的，希望讀者們注意。同時(shí)，由于原文中的一些內(nèi)容顯得比較冗余，所以部分內(nèi)容并沒(méi)有翻譯。如果需要了解詳細(xì)內(nèi)容，請(qǐng)查看原文。
翻譯自 Using Feature Queries in CSS