syntax

语法

/* A data type name */
syntax: "<color>";

/* A '|' combinator for multiple data types */
syntax: "<length> | <percentage>";

/* Space-separated list of values */
syntax: "<color>+";

/* Comma-separated list of values */
syntax: "<length>#";

/* Keywords */
syntax: "small | medium | large";

/* Combination of data type and keyword */
syntax: "<length> | auto";

/* Universal syntax value */
syntax: "*";

值

一个字符串（称为语法字符串），它定义了允许的值。它可以是以下之一：

• 一个或多个语法组件名称，可以是：
  • 数据类型名称（用尖括号书写，例如 <color> 或 <length>）
  • 关键字（不用尖括号书写，例如 auto 或 none）
• 通用语法 *，它接受任何有效的 CSS 值。它不能与乘法运算符或其他语法组件结合使用。

语法组件名称可以单独使用，也可以通过不同的方式进行乘法和组合

• +（空格分隔）和 #（逗号分隔）乘数表示预期是值列表。例如，<color># 意味着预期的语法是逗号分隔的 <color> 值列表。

• 竖线 (|) 组合符可以为预期语法创建“或”条件。例如，<length> | auto 接受 <length> 或 auto，而 <color># | <integer># 期望逗号分隔的 <color> 值列表或逗号分隔的 <integer> 值列表。

支持以下语法组件名称：

"<angle>"

接受任何有效的 <angle> 值。

"<color>"

接受任何有效的 <color> 值。

"<custom-ident>"

接受任何有效的 <custom-ident> 值。

"<image>"

接受任何有效的 <image> 值。

"<integer>"

接受任何有效的 <integer> 值。

"<length>"

接受任何有效的 <length> 值。

"<length-percentage>"

接受任何有效的 <length> 或 <percentage> 值，以及任何结合了 <length> 和 <percentage> 值的有效 calc() 表达式。

"<number>"

接受任何有效的 <number> 值。

"<percentage>"

接受任何有效的 <percentage> 值。

"<resolution>"

接受任何有效的 <resolution> 值。

"<string>"

接受任何有效的 <string> 值。

"<time>"

接受任何有效的 <time> 值。

"<transform-function>"

接受任何有效的 <transform-function> 值。

"<transform-list>"

接受有效的 <transform-function> 值列表。它等同于 "<transform-function>+"。

"<url>"

接受任何有效的 <url> 值。

正式定义

正式语法

syntax = 
  <string>  

示例

注册带有类型检查的自定义属性

此示例展示了如何定义一个仅允许 <color> 值的自定义属性 --my-color

@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",
});

规范

浏览器兼容性

另见

• 其他 @property 描述符：inherits 和 initial-value
• CSS Properties and Values API
• CSS Painting API
• CSS 类型化对象模型
• Houdini APIs