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