使用特性查询

功能查询是条件组规则，用于测试用户代理是否支持一个或多个 CSS 功能，例如 CSS 属性和属性值。功能查询为 Web 开发人员提供了一种方法来测试浏览器是否支持某个功能，然后提供仅根据该测试结果运行的 CSS。在本指南中，您将学习如何使用功能查询实现渐进增强。

功能查询是使用 CSS @规则 @supports（或 @import @规则声明中的 supports() 函数）创建的。

语法

CSS 功能查询是 CSS 条件规则模块的一部分，该模块还定义了媒体查询 @media @规则。功能查询的行为类似于媒体查询。区别在于，使用媒体查询时，您正在测试网页运行环境的某些内容，而使用功能查询时，您正在测试浏览器对 CSS 功能的支持。

功能查询由 @supports @规则后跟支持条件或 supports() 函数以及 @import @规则声明中的声明参数组成。

css

/* `@supports` at-rule */
@supports <support-condition> {
  CSS rules to apply
}

/* `supports()` function */
@import url_to_import supports(<declaration>);

例如，如果用户代理支持将 red 作为 CSS color 属性的有效值，我们可以应用一组样式或导入整个样式表。

css

/* `@supports` at-rule */
@supports (color: red) {
  CSS rules to apply
}

/* `supports()` function */
@import `/css/styles.css` supports(color: red);

作为另一个示例，如果您想检查浏览器是否支持 row-gap 属性，则会编写以下功能查询。在很多情况下，您使用的值并不重要：如果您只想检查浏览器是否支持此属性，则任何有效值都可以。

如果您正在测试特定属性的新值，则属性-值对的值部分会更重要。所有浏览器都支持 color: red：这可以追溯到 CSS1。但是，CSS 中的属性通常会添加其他值，例如相对颜色，这些值可能不受支持。功能查询可以测试属性和值对，这意味着我们可以检测对值的支持。

扩展上面 color 属性的示例，这里我们检查浏览器是否支持 color: AccentColor 声明。

css

/* `@supports` at-rule */
@supports (color: AccentColor) {
  CSS rules to apply
}

/* `supports()` function */
@import `/css/styles.css` supports(color: AccentColor);

在这些示例中，我们已使用功能查询来检查用户代理是否支持 CSS 属性的特定值，在括号内列出单个声明。您可以测试多个属性值或不支持的情况。

测试不支持的情况

除了询问浏览器是否支持某个功能外，您还可以通过添加 not 关键字来测试相反的情况。

css

/* `@supports` at-rule with `not` */
@supports not (property: value) {
  CSS rules to apply
}

如果浏览器不支持 row-gap，则以下示例功能查询中的 CSS 将运行。

测试多个特性

您可能需要在特性查询中测试多个属性的支持。为此，您可以包含一个要测试的特性列表，并用and关键字分隔。

css

/* multiple feature `@supports` at-rule */
@supports (property1: value) and (property2: value) {
  CSS rules to apply
}

例如，如果您要运行的 CSS 需要浏览器支持 CSS Shapes 和 CSS Grid，则可以创建一个规则来测试浏览器对这两个特性的支持。只有当浏览器同时支持shape-outside: circle()和display: grid时，以下规则才会返回 true。

测试多个特性中的至少一个

您还可以使用or，仅当一个或多个声明得到支持时才应用 CSS。

css

/* any feature `@supports` at-rule */
@supports (property1: value) or (property2: value) {
  CSS rules to apply
}

如果某个特性带有供应商前缀，这将特别有用，因为您可以测试标准属性以及任何供应商前缀。

其他特性查询选项

特性查询不限于属性-值对。您可以在特性查询中包含font-tech()、font-format()和selector()函数，以便根据用户代理是否分别支持指定的字体技术、字体格式或选择器语法来选择性地应用 CSS。

例如，selector()函数可用于为支持供应商前缀伪元素的浏览器导入样式表。

css

/* A `selector()` query within a `supports()` function */
@import `/css/webkitShadowStyles.css`
  supports(selector(::-webkit-inner-spin-button));

示例

浏览器支持测试

在此示例中，我们检查浏览器是否支持AccentColor <system-color>，如果颜色类型受支持，则使用display: none将默认的“不受支持”消息更改为“受支持”消息。

HTML

html

<p class="accentcolor">
  Your browser does <span>not</span> support <code>AccentColor</code> as a color
  value.
</p>

CSS

css

@supports (color: AccentColor) {
  p {
    color: green;
    border: 2px solid;
  }
  span {
    display: none;
  }
}
@supports not (color: AccentColor) {
  p {
    color: red;
  }
}