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

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

浏览器支持

  • Chrome:85。 <ph type="x-smartling-placeholder">
  • 边缘:85。 <ph type="x-smartling-placeholder">
  • Firefox:128。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <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 type="x-smartling-placeholder">
</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 超能力的实力正在不断提升。

附加阅读材料