syntax
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
syntax
は CSS の記述子で、 @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>
の値のリストです。
公式定義
形式文法
syntax =
<string>
例
--my-color
カスタムプロパティ
に、 <color>
の構文を使用して型チェックを追加します。
CSS の @property
アットルールを使用すると次のようになります。
@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',
});
仕様書
Specification |
---|
CSS Properties and Values API Level 1 # the-syntax-descriptor |
ブラウザーの互換性
BCD tables only load in the browser