syntax

Baseline 2024
Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

syntax CSS 描述符在使用@property at-rule时是必需的，它描述了该属性所允许的语法结构。

语法

如下是所有的有效 syntax 字符串：

css
syntax: "<color>"; /* 接收一个颜色值 */

syntax: "<length> | <percentage>"; /* 接收长度或百分比参数，但是二者之间不进行计算合并 */

syntax: "small | medium | large"; /* 接收这些参数值之一作为自定义标识符 */

syntax: "*"; /* 任何有效字符 */

取值

规范定义的、受语法支持的字符串。支持的语法是CSS types的子集。这些可以单独使用，一些类型也可以结合使用。

"<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>"

A list of valid <transform-function> 值。

形式定义

Related at-rule@property
初始值n/a (required)
计算值as specified

形式语法

syntax = 
  <string>

实例

为 --my-color 自定义属性添加颜色值类型检测、设置默认值并且设置属性值不允许被继承。

使用 CSS @property 规则:

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

使用 JavaScript 中的 CSS.registerProperty函数：

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

规范

Specification
CSS Properties and Values API Level 1
# the-syntax-descriptor

浏览器兼容性

参见