このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 は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 |