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>

打印页面