@supports

試一試

.flex-container > * {
  padding: 0.3em;
  list-style-type: none;
  text-shadow: 0 0 2px red;
  float: left;
}

@supports (display: flex) {
  .flex-container > * {
    text-shadow: 0 0 2px blue;
    float: none;
  }

  .flex-container {
    display: flex;
  }
}

<ul class="flex-container">
  <li><a href="#">Index</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Contact</a></li>
</ul>

在 JavaScript 中，可以透過 CSS 物件模型介面 CSSSupportsRule 來訪問 @supports。

語法

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

@supports @ 規則由一個帶有支援條件的語句塊組成。這些條件可以透過合取（and）、析取（or）和/或否定（not）進行組合。運算子的優先順序可以透過括號來定義。

支援條件可以使用 <property>: <value> 宣告語法或 <function()> 函式語法。以下各節描述了每種支援條件的用法。

宣告語法

宣告語法用於檢查瀏覽器是否支援指定的 <property>: <value> 宣告。該宣告必須用括號括起來。如果瀏覽器支援 transform-origin: 5% 5% 表示式，以下示例將返回 true。

@supports (transform-origin: 5% 5%) {
}

函式語法

函式語法用於檢查瀏覽器是否支援函式內的值或表示式。函式語法支援的函式將在以下各節中描述。

selector()

此函式評估瀏覽器是否支援指定的選擇器語法。如果瀏覽器支援子代組合器，以下示例將返回 true 並應用 CSS 樣式。

@supports selector(h2 > p) {
}

font-tech()

此函式檢查瀏覽器是否支援指定的字型技術進行佈局和渲染。如果瀏覽器支援 COLRv1 字型技術，以下示例將返回 true 並應用 CSS 樣式。

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

下表描述了可以使用 font-tech() 函式查詢的字型技術（<font-tech>），包括彩色字型技術（<color-font-tech>）、字型特性技術（<font-features-tech>）以及其他可用的字型技術。

font-format()

此函式檢查瀏覽器是否支援指定的字型格式進行佈局和渲染。如果瀏覽器支援 opentype 字型格式，以下示例將返回 true 並應用 CSS 樣式。

@supports font-format(opentype) {
}

下表描述了可使用此函式查詢的可用格式（<font-format> 值）。

not 運算子

not 運算子位於表示式之前，表示對錶達式的否定。如果瀏覽器的 transform-origin 屬性認為 10em 10em 10em 無效，則以下表達式返回 true：

@supports not (transform-origin: 10em 10em 10em) {
}

與任何運算子一樣，not 運算子可以應用於任何複雜度的宣告。以下兩個示例都是有效的。

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

and 運算子

and 運算子透過兩個較短表示式的合取來建立一個新表示式。它僅當兩個較短表示式都為 true 時才返回 true。以下示例當且僅當兩個較短表示式同時為 true 時才返回 true。

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

多個合取可以並列，而無需更多括號。以下兩者是等效的。

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

or 運算子

or 運算子透過兩個較短表示式的析取來建立一個新表示式。如果一個或兩個較短表示式為 true，它就返回 true。以下示例在至少有一個較短表示式為 true 時返回 true。

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

多個析取可以並列，而無需更多括號。以下兩者是等效的。

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

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

正式語法

@supports = 
  @supports <supports-condition> { <rule-list> }  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-selector-fn>     |
  <supports-font-tech-fn>    |
  <supports-font-format-fn>  |
  <supports-at-rule-fn>      |
  <supports-decl>            

<general-enclosed> = 
  [ <function-token> <any-value>? ) ]  |
  [ ( <any-value>? ) ]                 

<supports-selector-fn> = 
  selector( <complex-selector> )  

<supports-font-tech-fn> = 
  font-tech( <font-tech> )  

<supports-font-format-fn> = 
  font-format( <font-format> )  

<supports-at-rule-fn> = 
  at-rule( <at-keyword-token> )  

<supports-decl> = 
  ( <declaration> )  

<complex-selector> = 
  <complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*  

<font-tech> = 
  <font-features-tech>  |
  <color-font-tech>     |
  variations            |
  palettes              |
  incremental           

<font-format> = 
  <string>           |
  collection         |
  embedded-opentype  |
  opentype           |
  svg                |
  truetype           |
  woff               |
  woff2              

<complex-selector-unit> = 
  [ <compound-selector>? <pseudo-compound-selector>* ]!  

<combinator> = 
  '>'          |
  '+'          |
  '~'          |
  [ '|' '|' ]  

<font-features-tech> = 
  features-opentype  |
  features-aat       |
  features-graphite  

<color-font-tech> = 
  color-COLRv0  |
  color-COLRv1  |
  color-SVG     |
  color-sbix    |
  color-CBDT    

<compound-selector> = 
  [ <type-selector>? <subclass-selector>* ]!  

<pseudo-compound-selector> = 
  <pseudo-element-selector> <pseudo-class-selector>*  

<type-selector> = 
  <wq-name>         |
  <ns-prefix>? '*'  

<subclass-selector> = 
  <id-selector>            |
  <class-selector>         |
  <attribute-selector>     |
  <pseudo-class-selector>  

<pseudo-element-selector> = 
  : <pseudo-class-selector>         |
  <legacy-pseudo-element-selector>  

<pseudo-class-selector> = 
  : <ident-token>                   |
  : <function-token> <any-value> )  

<wq-name> = 
  <ns-prefix>? <ident-token>  

<ns-prefix> = 
  [ <ident-token> | '*' ]? '|'  

<id-selector> = 
  <hash-token>  

<class-selector> = 
  '.' <ident-token>  

<attribute-selector> = 
  '[' <wq-name> ']'                                   |
  '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'  

<legacy-pseudo-element-selector> = 
  : [ before | after | first-line | first-letter ]  

<attr-matcher> = 
  [ '~' | '|' | '^' | '$' | '*' ]? '='  

<attr-modifier> = 
  i  |
  s  

示例

測試對 CSS 屬性的支援

@supports (animation-name: test) {
  /* CSS applied when animations are supported without a prefix */
  @keyframes {
    /* Other at-rules can be nested inside */
  }
}

測試對給定 CSS 屬性或其帶字首版本的支援

@supports (text-stroke: 10px) or (-webkit-text-stroke: 10px) {
  /* CSS applied when text-stroke, prefixed or not, is supported */
}

測試對特定 CSS 屬性的不支援

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {
  /* CSS to provide fallback alternative for text-align-last: justify */
}

測試對選擇器的支援

CSS 條件規則提供了測試對選擇器（例如 :has()）支援的能力。

/* This rule won't be applied in browsers that don't support :has() */
ul:has(> li li) {
  /* CSS is applied when the :has(…) pseudo-class is supported */
}

@supports not selector(:has(a, b)) {
  /* Fallback for when :has() is unsupported */
  ul > li,
  ol > li {
    /* The above expanded for browsers that don't support :has(…) */
  }
}

/* Note: So far, there's no browser that supports the `of` argument of :nth-child(…) */
@supports selector(:nth-child(1n of a, b)) {
  /* This rule needs to be inside the @supports block, otherwise
     it will be partially applied in browsers which don't support
     the `of` argument of :nth-child(…) */
  :is(:nth-child(1n of ul, ol) a, details > summary) {
    /* CSS applied when the :is(…) selector and
       the `of` argument of :nth-child(…) are both supported */
  }
}

測試對字型技術的支援

如果瀏覽器支援 COLRv1 字型技術，以下示例將應用 CSS 樣式。

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";

@supports font-tech(color-COLRv1) {
  p {
    font-family: "Bungee Spice", fantasy;
  }
}

也可以透過在 @font-face @ 規則中使用 tech 函式來測試對字型技術的支援。如果瀏覽器不支援該字型技術，則可以使用備用字型（Bungee-fallback.otf）。

@font-face {
  font-family: "Bungee Spice";
  src:
    url("https://fonts.googleapis.com/css2?family=Bungee+Spice")
      tech(color-COLRv1),
    url("Bungee-fallback.otf") format("opentype");
}

測試對字型格式的支援

如果瀏覽器支援 woff2 字型格式，以下示例將應用 CSS 樣式。

@supports font-format(woff2) {
  p {
    font-family: "Open Sans", sans-serif;
    src: url("open-sans.woff2") format("woff2");
  }
}

規範

瀏覽器相容性

另見

• 使用特性查詢
• CSS @ 規則函式
• CSSSupportsRule
• CSS.supports() 方法