CSS - @supports_CSS 菜鸟教程

CSS @supports 规则允许您根据浏览器对特定 CSS 功能的支持来定义 CSS 声明。

@supports 规则必须放在代码的顶层，或者应嵌套在任何其他条件组 at 规则中。

语法

@supports 规则包括具有支持条件的语句块。此条件由一个或多个名称/值对定义。（不包括，<property> : <value>）


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

在这里，<supports-condition>是一个功能查询，用于检查浏览器是否支持特定的CSS属性和值。如果条件为 true，则将应用 @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) {
}

字体技术（）

此功能检查浏览器是否支持给定的字体技术进行显示和布局。如果浏览器支持 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	graphite特征，即 Silf、Glat、Gloc、 Feat、Till 台
Other <font-tech> values
incremental-patch	使用 patch 子集方法的增量字体加载
incremental-range	使用范围请求方法进行增量字体加载
incremental-auto	使用方法协商进行增量字体加载
variations	TrueType 和 OpenType 字体中的字体变体，用于控制字体轴、粗细、字形等。
palettes	字体调色板通过 font-palette 在字体中选择众多调色板之一。

字体格式（）

此函数检查浏览器是否支持呈现和排列给定的字体格式。如果浏览器支持 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 开放字体格式)	.woff
woff2	WOFF 2.0 （Web 开放字体格式)	.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 将两个较短的表达式组合在一起以形成一个新表达式。仅当两个较短的表达式也为 true 时，它才会被评估为 true。


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

可以将多个连词放在一起，而无需额外的括号。

or 运算符

or 运算符通过分离连接两个较短的表达式来形成一个新表达式。当一个或两个较短的表达式为 true 时，它将被评估为 true。


@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;填充：20px;。

@supports规则：

@supports选择器（:has（> li > ul））和（background-color：lightblue）：应用颜色的样式：绿色;字体粗细：粗体;当两个表达式都为真时。

:is（）选择器：

.容器 :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规则。第一条规则检查浏览器是否支持显示：grid CSS 属性。
如果是这样，则应用 at 规则内的样式。在本例中，body 元素设置为 display： grid，从而创建具有两列和 20 像素间隙的网格布局。
.box 类使用背景色、填充和居中文本设置样式。
第二个@supports at-rule 检查浏览器是否不支持 display： grid 属性。
否则，将应用规则内的样式。在本例中，body 元素设置为 display： flex，创建一个 flexbox 布局，其中包含包装的项目和它们之间的空间。
.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 的字体技术。
此条件规则允许以下 CSS，其中 font-family 属性设置为 Brygada1918-Italic via。@font面规则，仅当浏览器支持指定的字体技术（color-COLRv1）时才应用。
它确保有选择地使用字体 Brygada1918-Italic，具体取决于浏览器与 color-COLRv1 font-tech 函数的兼容性。


<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 的字体格式。
此条件规则允许以下 CSS，其中 font-face 属性设置为 woff via。@font面规则，仅当浏览器支持指定的字体格式（WOFF）时才应用。
它确保有选择地使用字体 SansationLight，具体取决于浏览器与 woff font-format 函数的兼容性。


<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>

<< CSS - 伪类 :out-of-range CSS - 伪类 :picture-in-picture >>