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 は 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 |
ブラウザーの互換性
Loading…