CSS - @supports

CSS 的 @supports 規則允許您根據瀏覽器對特定 CSS 功能的支援來定義 CSS 宣告。

@supports at-rule 必須放置在程式碼的頂層，或者巢狀在任何其他條件組 at-rule 中。

語法

@supports at-rule 包括帶有支援條件的語句塊。此條件由一個或多個名稱-值對定義。（例如，<property> : <value>）

@supports (<supports-condition>) {
/* Apply the CSS within this block if the condition is true. */
}

這裡，<supports-condition> 是一個功能查詢，用於檢查瀏覽器是否支援特定的 CSS 屬性和值。如果條件為真，則將應用 @supports 塊內的樣式；否則，將忽略它們。

可以使用連線詞（and）、析取詞（or）和/或否定詞（not）組合條件。

@supports (<supports-condition>) and (<supports-condition>) {
/* Apply the CSS within this block if the condition is true. */
}

可以使用括號指示運算子的優先順序。支援條件可以採用 <property>: <value> 宣告結構或 <function()> 語法。

以下部分解釋了每種型別支援條件的用法。

宣告語法

宣告的語法檢查瀏覽器是否支援指定的 <property>: <value> 宣告，該宣告必須用括號括起來。

@supports (transform-origin: 10px 10px) {
}

函式語法

如果瀏覽器接受函式內的值或表示式，則透過函式語法進行驗證。以下部分提供了函式語法支援的函式的描述。

選擇器

此函式檢查瀏覽器是否支援給定的選擇器語法。如果瀏覽器支援後代組合器，則以下示例返回 true 並應用 CSS 樣式。

@supports selector(div p) {
}

font-tech()

此函式檢查瀏覽器是否支援給定的字型技術進行顯示和佈局。如果瀏覽器支援color-colrv0 字型技術，則以下示例返回 true 並應用 CSS 樣式。

@supports font-tech(color-COLRv0) {
}

可以使用 font-tech() 函式請求的字型技術（<font-tech>）在下面的表格中進行了描述，以及顏色字型技術（<color-font-tech>）、字型特性技術（<font-features-tech>）和其他可用的字型技術。

字型技術	支援
<color-font-tech>
color-colrv0	透過 COLR 版本 0 表格實現多色字形
color-colrv1	透過 COLR 版本 1 表格實現多色字形
color-svg	SVG 多色表格
color-sbix	標準點陣圖圖形表格
color-cbdt	彩色點陣圖資料表格
<font-features-tech>
features-opentype	OpenType GSUB 和 GPOS 表格
features-aat	TrueType morx 和 kerx 表格
features-graphite	石墨特性，即 Silf、Glat、Gloc、Feat 和 Sill 表格
其他 <font-tech> 值
incremental-patch	使用補丁子集方法增量載入字型
incremental-range	使用範圍請求方法增量載入字型
incremental-auto	使用方法協商增量載入字型
variations	TrueType 和 OpenType 字型中的字型變體，用於控制字型軸、粗細、字形等。
palettes	透過 font-palette 使用字型調色盤，以從字型中的多個顏色調色盤中選擇一個。

font-format()

此函式檢查瀏覽器是否支援渲染和排列給定的字型格式。如果瀏覽器支援svg 字型格式，則以下示例返回 true 並應用 CSS 樣式。

@supports font-format(svg) {
}

下表列出了可以使用此函式查詢的易於訪問的格式（<font-format> 值）。

格式	描述	副檔名
collection	OpenType 集合	.otc、.ttc
embedded-opentype	嵌入式 OpenType	.eot
opentype	OpenType	.ttf、.otf
svg	SVG 字型（已棄用）	.svg、.svgz
truetype	TrueType	.ttf
woff	WOFF 1.0（Web Open Font Format）	.woff
woff2	WOFF 2.0（Web Open Font Format）	.woff2

not 運算子

not 運算子位於表示式的前面，對其進行否定。當瀏覽器的 transform-origin 屬性識別 15px 15px 15px 為無效時，以下語法返回 true。

@supports not (transform-origin: 15px 15px 15px) {
}

not 運算子可以與任何複雜度的宣告一起使用，即與其他運算子（如 and 和另一個 not）一起使用。

注意：在頂層，not 運算子不需要用兩個括號括起來，但是當 not 運算子與其他運算子（如 and 和 or）組合時，必須將其用括號括起來。

and 運算子

and 運算子將兩個較短的表示式組合成一個新表示式。僅當兩個較短的表示式也為真時，它才計算為真。

@supports (display:list-item ) and (display: table-row ) {
}

可以將多個連線詞放在一起，而無需額外的括號。

or 運算子

or 運算子透過析取連線兩個較短的表示式來形成一個新表示式。當一個或兩個較短的表示式為真時，它才計算為真。

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {
}

可以組合多個析取詞，而無需額外的括號。

注意：使用 and 和 or 運算子時，必須正確使用括號以指定應用它們的順序。如果括號使用不當，則條件將被視為無效，並且整個規則將被忽略。

CSS @supports - 測試 CSS 選擇器支援

以下示例使用 CSS @supports at-rule 根據瀏覽器對某些選擇器的支援有條件地應用 CSS 樣式。

:has() 選擇器

.list:has(> li > ul): 目標是具有直接子列表項的無序列表，這些子列表項包含巢狀的無序列表，在支援:has() 時應用特定的樣式，即 background-color: lightblue; padding: 20px;。

@supports 規則

@supports selector(:has(> li > ul)) and (background-color: lightblue): 當兩個表示式都為真時，應用 color: green; font-weight: bold; 的樣式。

:is() 選擇器

.container :is(h2, h3): 選中.container內部的<h2>和<h3>元素，在支援:is()偽類的瀏覽器中應用顏色樣式。

<html>
<head>
<style>
   /* This rule won't be applied in browsers that don't support :has() */
   .list:has(> li > ul) {
      /* CSS is applied when the :has(…) pseudo-class is supported */
      background-color: lightblue;
      padding: 20px;
   }
   /* Fallback for when :has() is unsupported */
   @supports selector(:has(> li > ul)) and (background-color: lightblue) {
      ul > li > ul {
      color: green;
      font-weight: bold;
      }
   }
   /* Check for support of the :is() selector */
   @supports selector(:is(h2, h3)) {
      /* Styles applied when the :is() selector is supported */
      .container :is(h2, h3) {
      color: red;
      }
   }
</style>
</head>
<body>
   <div class="container">
      <h2>@supports example</h2>
      <h3>to check selectors</h3>
      <ul class="list">
      <li>Item 1
         <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
         </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3
         <ul>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
         </ul>
      </li>
      </ul>
   </div>
</body>
</html>

CSS @supports - 測試 CSS 屬性的支援情況

以下示例測試了某些 CSS 屬性在不同瀏覽器中的支援情況。

在下面的示例中，我們有兩個@supports規則。第一個規則檢查瀏覽器是否支援display: grid CSS 屬性。
如果支援，則應用規則內的樣式。在本例中，body 元素設定為display: grid，建立一個包含兩列且間距為 20 畫素的網格佈局。
.box 類應用了背景顏色、內邊距和居中文字樣式。
第二個@supports規則檢查瀏覽器是否不支援display: grid屬性。
如果不支援，則應用規則內的樣式。在本例中，body 元素設定為display: flex，建立一個包含換行專案且專案間有間距的彈性盒子佈局。
.box 類應用了背景顏色、內邊距、居中文字樣式，以及 45% 的寬度和底部邊距。

<html>
<head>
<style>
   @supports (display: grid) {
   body {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
   }
   .box {
      background-color: gray;
      padding: 20px;
      text-align: center;
   }
   }
   @supports not (display: grid) {
   body {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   .box {
      background-color: #fff;
      padding: 20px;
      text-align: center;
      width: 45%;
      margin-bottom: 20px;
   }
   }
</style>
</head>
<body>
   <div class="box">Box 1</div>
   <div class="box">Box 2</div>
   <div class="box">Box 3</div>
   <div class="box">Box 4</div>
</body>
</html>

CSS @supports - 測試字型技術的支援情況

以下示例用於測試字型技術的支援情況；

在下面的示例中，CSS @supports 用於檢查瀏覽器是否支援名為color-COLRv1的字型技術。
此條件規則允許僅在瀏覽器支援指定的字型技術（color-COLRv1）時，應用以下 CSS，其中字型家族屬性透過@font-face規則設定為Brygada1918-Italic。
它確保Brygada1918-Italic字型根據瀏覽器對color-COLRv1字型技術的相容性進行選擇性使用。

<html>
<head>
<style>
   @supports font-tech(color-COLRv1) {
      @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      }
   }

   h1, p {
      font-family: "f1";
   }
</style>
</head>
<body>
   <h1>Welcome to My Website</h1>
   <p>This is an example of using a font called Brygada1918-Italic.</p>
</body>
</html>

CSS @supports - 測試字型格式的支援情況

以下示例用於測試字型格式的支援情況。

在下面的示例中，CSS @supports 用於檢查瀏覽器是否支援名為woff的字型格式。
此條件規則允許僅在瀏覽器支援指定的字型格式（woff）時，應用以下 CSS，其中字體面屬性透過@font-face規則設定為woff。
它確保SansationLight字型根據瀏覽器對woff字型格式函式的相容性進行選擇性使用。

<html>
<head>
<style>
   @supports font-format(woff) {
      @font-face {
         font-family: "SansationLight";
         src: url("font/SansationLight.woff") format("woff");
      }
   }

   h1, p {
      font-family: "SansationLight";
   }
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using a font called SansationLight, with font-format(woff).</p>
</body>
</html>

列印頁面