syntax

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

syntaxCSS の記述子で、 @property アットルールを使用する上で必要であり、そのプロパティで許可される構文を記述します。

構文

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

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)
計算値指定通り

形式文法

Error: could not find syntax for this item

--my-color カスタムプロパティに、 <color> の構文を使用して型チェックを追加します。

CSS@property アットルールを使用すると次のようになります。

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

JavaScriptCSS.registerProperty を使用すると次のようになります。

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

関連情報