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.

syntaxCSS の記述子で、 @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;
}

JavaScriptCSS.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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
syntax descriptor

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報