语法

基线 2024

新功能

自 2024 年 7 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

当使用 @property at-rule 时，需要 syntax CSS 描述符，它描述了属性允许的语法。

语法

以下都是有效的语法字符串

css

syntax: "<color>"; /* accepts a color */

syntax: "<length> | <percentage>"; /* accepts lengths or percentages but not calc expressions with a combination of the two */

syntax: "small | medium | large"; /* accepts one of these values set as custom idents. */

syntax: "*"; /* any valid token */

值

一个具有规范定义的支持语法的字符串。支持的语法是 CSS 类型的一个子集。这些可以单独使用，或者可以组合使用多种类型。

"<length>": 任何有效的 <length> 值。
"<number>": 任何有效的 <number> 值。
"<percentage>": 任何有效的 <percentage> 值。
"<length-percentage>": 任何有效的 <length-percentage> 值。
"<color>": 任何有效的 <color> 值。
"<image>": 任何有效的 <image> 值。
"<url>": 任何有效的 url() 值。
"<integer>": 任何有效的 <integer> 值。
"<angle>": 任何有效的 <angle> 值。
"<time>": 任何有效的 <time> 值。
"<resolution>": 任何有效的 <resolution> 值。
"<transform-function>": 任何有效的 <transform-function> 值。
"<custom-ident>": 任何有效的 <custom-ident> 值。
"<transform-list>": 一个有效的 <transform-function> 值列表。

正式定义

相关 at-rule	`@property`
初始值	`n/a（必需）`
计算值	如指定

正式语法

syntax = 
  <string>

示例

使用 <color> 语法为 --my-color 自定义属性添加类型检查

使用 CSS @property at-rule

css

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

使用 JavaScript CSS.registerProperty()

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

规范

规范
CSS 属性和值 API 级别 1 # the-syntax-descriptor

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。