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

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

阅读余下内容

css| 2024-07-14

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

相关文章：

发表回复取消回复

一个 Div 能做的事情

青蛙过河智力小游戏

数字消消乐

交互式演示教程教会你精通掌握 CSS Flexbox 布局

交互式教程教你精通掌握 CSS Grid 布局

弹跳球：通用各种 Web 动画技实现弹跳球来比较各种 Web 技术

将网页漂亮的打印到纸上的CSS

如何居中一个 Div–CSS 居中技术终极指南

互动式指导开发 SVG 加载旋转器

如何用你的双眼读出二维码里的信息！

正弦波谐波序列生成器

乒乓球战争

CSS loading 效果生成器

CSS 3D 云朵效果

HTML 美丽螺旋图生成器

ffmpeg 命令行生成工具

你和亿万富翁之间有趣的对比

用交互式动画帮你理解SVG绘制弧线，二次、三次贝塞尔曲线

用25个例子一步步学习 SVG 绘制图片技术

世界地理游戏：乘飞机从A国到B国途经哪些国家？

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

相关文章：

发表回复 取消回复

一个 Div 能做的事情

青蛙过河智力小游戏

数字消消乐

交互式演示教程教会你精通掌握 CSS Flexbox 布局

交互式教程教你精通掌握 CSS Grid 布局

弹跳球：通用各种 Web 动画技实现弹跳球来比较各种 Web 技术

将网页漂亮的打印到纸上的CSS

如何居中一个 Div–CSS 居中技术终极指南

互动式指导开发 SVG 加载旋转器

如何用你的双眼读出二维码里的信息！

正弦波谐波序列生成器

乒乓球战争

CSS loading 效果生成器

CSS 3D 云朵效果

HTML 美丽螺旋图生成器

ffmpeg 命令行生成工具

你和亿万富翁之间有趣的对比

用交互式动画帮你理解SVG绘制弧线，二次、三次贝塞尔曲线

用25个例子一步步学习 SVG 绘制图片技术

世界地理游戏：乘飞机从A国到B国途经哪些国家？

发表回复取消回复