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 アットルールを使用する上で必要であり、そのプロパティで許可される構文を記述します。

構文

以下のものはすべて、有効な構文の文字列です。

css
syntax: "<color>"; /* 色を受け入れる */

syntax: "<length> | <percentage>"; /* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない */

syntax: "small | medium | large"; /* カスタム識別子で設定されたこれらの値の何れかを受け入れる */

syntax: "*"; /* 常に有効なトークン */

値

仕様で定義されている対応する構文を持つ文字列。対応する構文は 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> の値のリストです。

公式定義

関連するアット規則@property
初期値n/a (required)
計算値指定通り

形式文法

syntax = 
  <string>

例

--my-color カスタムプロパティに、 <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

ブラウザーの互換性

BCD tables only load in the browser

関連情報