此页面由 Cloud Translation API 翻译。

@property：新一代 CSS 变量现已支持通用浏览器

Una Kravets

为 CSS 强化做好准备！现在，所有现代浏览器均完全支持 @property 规则（CSS Houdini API 范围的一部分）。这项颠覆性功能将 CSS 自定义属性（也称为 CSS 变量）的控制和灵活性提升到新的水平，让您的样式表更加智能和动态。

浏览器支持

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

来源

`@property` 的优势

语义含义：使用 @property 定义自定义属性的类型（语法）。这将告知浏览器，您的自定义属性包含哪些类型的数据（例如颜色、长度或数字），防止出现意外结果并支持新可能性，例如为渐变添加动画效果。
Fallback values：再也不需要消失的样式了！使用 @property 为自定义属性设置初始值。如果稍后分配了无效值，浏览器会正常地使用您定义的回退。
改进了错误处理方式：字体安全增强，并且能够设置后备广告，为您开辟了直接在 CSS 中进行测试和验证的新机会。

创建高级自定义属性

要创建“标准”自定义属性，请设置以 -- 为前缀的属性名称，并为此属性指定一个值。浏览器会将这些自定义属性的值解析为字符串。

以下示例展示了如何初始化默认（基于字符串的）自定义属性。

:root {
 --myColor: hotpink;
}

若要获享这些“高级自定义属性”的优势（包括字符串之外的语义），请向 @property 注册您的 CSS 自定义属性。

在此示例中，同一自定义属性使用 @property 进行了初始化。

@property --myColor {
    syntax: '<color>';
    inherits: false;
    initial-value: hotpink;
  }

使用 @property 初始化的自定义属性提供更多详细信息，而不仅仅是名称和值。它包含语法类型，并将继承设置为 true 或 false。

这种方法的优势在于，对于标准属性，您希望该属性包含颜色值，并将在样式表的其他位置使用该颜色。如果有人要更新该属性，使其包含数字值，则在其他位置使用该属性的操作将会失败。使用 @property 定义了一种后备颜色，以及用于声明此属性的 syntax 必须具有颜色值。如果使用非颜色值，则将使用后备值。

演示：闪烁渐变背景

@property 的一个巧妙应用是，为以前无法转换的属性（如渐变）提供平滑的动画效果，这些属性被浏览器视为图片。不过，如果您通过 @property 为变量赋予语法含义，则可以在梯度语句中使用这些变量。现在，您要描述渐变中两个声明值之间的动画，从而启用动画。请看以下示例：一张卡片，带有一个微妙的背景动画，该动画由两种在不同时间轴上改变颜色的径向渐变组成：

</ph> <ph type="x-smartling-placeholder">。

使用 @property 在背景渐变中为动画颜色设置样式。

这可以通过将自定义属性值设置为颜色来实现：

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: lavender;
}

@property --shine-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: wheat;
}

@property --shine-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: lightpink;
}

然后，访问它们以创建初始渐变背景：

.card {
background: radial-gradient(
      300px circle at 55% 60% in oklab,
      var(--shine-2), transparent 100% 100%),
      radial-gradient(farthest-side circle at 75% 30% in oklab,
      var(--shine-1) 0%, var(--card-bg) 100%);
}

此外，您还可以更新关键帧中的值：

@keyframes animate-color-1 {
  to {
    --shine-1: orange;
  }
}

@keyframes animate-color-2 {
  to {
    --shine-2: hotpink;
  }
}

然后为每个元素添加动画效果：

animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;

总结

CSS 注册的自定义属性是一项非常强大的功能，它通过为 CSS 变量提供含义和上下文来扩展 CSS 语言。现在，随着 @property 进入基准，此 CSS 超能力的实力正在不断提升。