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: "<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