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

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

css| 2024-07-14

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

`@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 必须具有颜色值。如果使用非颜色值，则将使用后备值。

注意：您还可以使用 CSS.registerProperty() 在 JavaScript 中设置具有语法、继承和初始值的自定义属性。您可以使用 JavaScript 通过 style.setProperty("--myColor", "hotpink"); 操控自定义属性值。

演示：闪烁渐变背景

@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;
}

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

@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 超能力的实力正在不断提升。

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

发表回复取消回复

相关文章：

趣味游戏：便便消消乐！有点难度

懒人画笔

随机动画

简单所见即所得在线HTML编辑器

Markdown HTML 转换工具

HTML Markdown 转换工具

CSS 玻璃效果生成器

将iOS风格的液体玻璃添加到您的网页

变种数字消消乐 – 令人沉迷的数字游戏

扑克魔术

懒人的俄罗斯方块游戏

人间血照，一个令人深思的游戏

纯 CSS 构建的《我的世界(Minecraft)》

大脑错觉：撒切尔效应

webassembly 二维布料仿真模型

升级版青蛙过河智力游戏

网页小游戏：戳破泡泡

CSS Grid 布局代码生成器

一个 Div 能做的事情

青蛙过河智力小游戏

链接收藏

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

发表回复 取消回复

相关文章：

趣味游戏：便便消消乐！有点难度

懒人画笔

随机动画

简单所见即所得在线HTML编辑器

Markdown HTML 转换工具

HTML Markdown 转换工具

CSS 玻璃效果生成器

将iOS风格的液体玻璃添加到您的网页

变种数字消消乐 – 令人沉迷的数字游戏

扑克魔术

懒人的俄罗斯方块游戏

人间血照，一个令人深思的游戏

纯 CSS 构建的《我的世界(Minecraft)》

大脑错觉：撒切尔效应

webassembly 二维布料仿真模型

升级版青蛙过河智力游戏

网页小游戏：戳破泡泡

CSS Grid 布局代码生成器

一个 Div 能做的事情

青蛙过河智力小游戏

链接收藏

发表回复取消回复