註：由於半形的 ＠ 會觸發 Medium 編輯器的標記功能，為避免奇怪問題這裡都採用全形的 ＠。
今天這篇我們來記錄一個很有意思的 CSS at-rule。at-rule 看起來有點陌生，但它其實就是讓我們指定 CSS 應該如何執行。例如我們在不同斷點須撰寫特定樣式時會使用的 ＠media 就是一種 at-rule：
@media screen and (min-width: 900px) {
article {
display: flex;
}
}類似於 ＠media，＠supports 讓我們告訴瀏覽器：「當你懂括號內的屬性和值，再套用裡面的 CSS。」使用方式如下：
@supports (<supports-condition>) {
/* 當樣式被瀏覽器所支援，才套用此處的樣式 */
}也可以像是 ＠media 那樣，運用 and 撰寫多個條件：
@supports (<supports-condition>) and (<supports-condition>) {
/* 當兩個樣式都被瀏覽器所支援，才套用此處的樣式 */
}實際應用——Firefox 滾動軸問題
前陣子解決的一個問題便利用了 ＠supports，Firefox 對於滾動軸的 CSS 語法支援與其他主流瀏覽器是不同的。當我們這樣撰寫時：
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: red;
}在 Firefox 上是不會作用的，我們需要撰寫 Firefox 專用的滾動軸屬性才能套用至 Firefox 上，此時我覺得就是個適用的時機：
/* Supports firefox */
@supports (scrollbar-width: thin) {
* {
scrollbar-color: red #fff;
scrollbar-width: thin;
}
}
not 運算符
當瀏覽器不支援某屬性時，便會套用其中的樣式：
@supports not (<supports-condition>) {
/* 當樣式不被瀏覽器所支援就套用此處的樣式 */
}實際應用 — — aspect-ratio 問題
aspect-ratio 讓我們可以為元素定義長寬比，這個屬性在 2021 年下旬才慢慢被 Safari 所支援，而至今仍有部份裝置使用者使用的是較舊版 iOS 的裝置，例如：
<div></div>div {
background-color: red;
width: 300px;
aspect-ratio: 16 / 9;
}這樣的樣式在較舊版本的 Safari 可能就會無法正常顯示。此時我們就可以使用 not 搭配 padding-hack 去解決這個問題：
div {
background-color: red;
width: 300px;
aspect-ratio: 16 / 9;
}
/* fallback to use padding-hack */
@supports not (aspect-ratio: 16 / 9) {
div {
padding-top: 56.25%;
}
}
除了 not 、 and 之外，我們也能使用 or ：
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
/* 當瀏覽器支援 transform-style: preserve 或 -moz-transform-style: preserve 時，採用其中樣式 */
}甚至可以使用 selector：
@supports selector(h2 > p) {
/* 當瀏覽器支援子瀏覽器時，採用其中樣式 */
}其他如 font-tech, font-format 等也都能進行瀏覽器支援的確認以決定是否套用其中的樣式。
以上就是關於 CSS ＠supports 的相關記錄。以往在解決類似問題時，我都是使用 JS 進行 navigator 的判斷，也曾在後端渲染前藉由取得請求方瀏覽器決定是否吐某個專門支援該瀏覽器的 CSS 資源，直到近期碰到支援問題查找資料時才發現：原來 CSS 竟然可以辦到這樣的事情！希望這篇文有幫助到你，內文若有任何錯誤也歡迎指出，謝謝大家。
References:
