syntax

構文

/* データ型名 */
syntax: "<color>";

/* '|' 結合子で複数のデータ型を結合 */
syntax: "<length> | <percentage>";

/* 値の空白区切りのリスト */
syntax: "<color>+";

/* 値のカンマ区切りのリスト */
syntax: "<length>#";

/* キーワード */
syntax: "small | medium | large";

/* データ型とキーワードの組み合わせ */
syntax: "<length> | auto";

/* 全称構文値 */
syntax: "*";

値

許可される値を定義する文字列です（構文文字列と呼ばれています）。 次のいずれかです。

• 1 つ以上の構文成分文字列であり、次のいずれかになります。
  • データ型名（山括弧で囲み、<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 プロパティと値 API
• CSS 描画 API
• CSS 型付きオブジェクトモデル
• Houdini API