css @property

October 13, 2024

兼容性：https://caniuse.com/mdn-css_at-rules_property

@property 用于注册自定义属性。注册后的自定义属性称为已注册自定义属性（registered custom property）。区分与在此特性之前的自定义属性被称为未注册自定义属性（unregistered custom properties）

已注册自定义属性有一个实用特性就是它在使用 var() 函数后会被替换为计算值，而非用于生成该值的原始标记序列（对于未注册自定义属性）。

Syntax

css

@property <custom-property-name> {
  <declaration-list>
}

与普通选择器一样，包含一组声明列表。不过列表中不是样式声明（qualified rule），而是只允许 syntax inherits initial-value 三个描述符。

其中 syntax 可指定为字符串表示的语法规则，参见规范。
可以简单理解为数据类型语法。

declare namespace CSS {
    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSS/registerProperty_static) */
    function registerProperty(definition: PropertyDefinition): void;
}
interface PropertyDefinition {
    /** A string representing the name of the property being defined. */
    name: string;
    /** A string representing the expected syntax of the defined property. Defaults to "*". */
    syntax?: string;
    /** A boolean value defining whether the defined property should be inherited (`true`), or not (`false`). Defaults to `false`. */
    inherits: boolean;
    /** A string representing the initial value of the defined property. */
    initialValue?: string;
}

示例

动画性

CSS 动画和过渡依赖于动画性（animatable）属性这一概念。

对于已注册自定义属性，其动画类型为按计算值，且其计算值类型由此属性的语法定义所决定。
对于未注册自定义属性，其动画类型为离散。

←Back to home

This work is licensed under CC BY-NC-SA 4.0