syntax
Baseline 2024Newly 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 |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
syntax descriptor |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support