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

发布时间:2024 年 7 月 12 日

准备好提升 CSS 技能吧!@property 规则是 CSS Houdini 大伞下的 API 之一,现在所有现代浏览器都完全支持该规则。这项具有变革意义的功能可为 CSS 自定义属性(也称为 CSS 变量)带来前所未有的控制力和灵活性,让您的样式表更加智能、更加动态。

  • 语义含义:使用 @property 为自定义属性定义类型(语法)。这会告知浏览器您的自定义属性包含哪些类型的数据(例如颜色、长度或数字),从而防止出现意外结果,并支持渐变动画等新功能。
  • 回退值:不再出现样式消失的情况!使用 @property 为自定义属性设置初始值。如果稍后分配了无效的值,浏览器会妥善使用您定义的回退。
  • 改进了错误处理:增强的类型安全性和设置回退项的功能,让您可以在 CSS 中直接进行测试和验证。

创建高级自定义媒体资源

如需创建“标准”自定义属性,请设置以 -- 开头的属性名称,并为此属性指定值。浏览器会将这些自定义属性的值解析为字符串。

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

:root {
 --myColor: hotpink;
}

如需获享这些“高级自定义属性”的好处(包括超出字符串的语义),请向 @property 注册您的 CSS 自定义属性。

在此示例中,使用 @property 初始化了相同的自定义属性。

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

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

这种方法的好处在于,使用标准属性时,您希望该属性包含颜色值,并打算在样式表的其他位置使用该颜色。如果有人将该属性更新为使用数字作为值,则在其他位置使用该属性的任何操作都会失败。使用 @property 时,系统会定义回退颜色,并声明 syntax 此属性必须包含颜色值。如果使用非颜色值,系统会改用回退值。

演示:闪烁的渐变背景

@property 的一个巧妙用途是,让之前无法进行转换的属性(例如浏览器会将其视为图片的渐变)实现流畅的动画效果。不过,如果您通过 @property 为变量赋予语法意义,则可以在梯度语句中使用这些变量。现在,您将描述渐变中两个声明值之间的动画,从而启用动画。下面是一个示例:一张卡片带有细微的背景动画,该动画由两个放射状渐变组成,这两个渐变在不同的时间轴上会发生颜色变化:

使用 @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 超级功能的强大程度也越来越高。

附加阅读材料