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 は @property アットルール の記述子で、登録された CSS カスタムプロパティに利用できる値を定義します。
これは、プロパティの指定値がどのように処理されて計算値が導出されるかを制御します。
必須の記述子です。欠落または無効な場合、@property ルール全体が不正となり無視されます。
構文
/* データ型名 */
syntax: "<color>";
/* '|' 結合子で複数のデータ型を結合 */
syntax: "<length> | <percentage>";
/* 値の空白区切りのリスト */
syntax: "<color>+";
/* 値のカンマ区切りのリスト */
syntax: "<length>#";
/* キーワード */
syntax: "small | medium | large";
/* データ型とキーワードの組み合わせ */
syntax: "<length> | auto";
/* 全称構文値 */
syntax: "*";
値
許可される値を定義する文字列です（構文文字列と呼ばれています）。 次のいずれかです。
- 1 つ以上の構文成分文字列であり、次のいずれかにになります。
- データ型名（山括弧で囲み、
<color>または<length>のように書きます） - キーワード（山かっこなしで、
autoやnoneのように書きます）
- データ型名（山括弧で囲み、
- 全称構文
*、これは任意の CSS 値を受け入れます。 量化子を指定したり、他の構文成分と組み合わせたりすることはできません。
ｃ構文成分の名前は単独で使用することも、様々な方法で量化や結合を行うこともできます：
-
+（スペース区切り）と#（カンマ区切り）の量化子は、値のリストが期待されることを示します。 例えば、<color>#は<color>値のカンマ区切りのリストが期待される構文であることを意味しています。 -
垂直線 (
|) は期待された条件の「論理和」を表します。 例えば<length> | autoは<length>またはautoを受け入れ、<color># | <integer>#はカンマで区切られた<color>値のリスト、またはカンマで区切られた<integer>値のリストを受け入れます。
次の構文成分の名前に対応しています。
"<angle>"-
あらゆる有効な
<angle>の値です。 "<color>"-
あらゆる有効な
<color>の値です。 "<custom-ident>"-
あらゆる有効な
<custom-ident>の値です。 "<image>"-
あらゆる有効な
<image>の値です。 "<integer>"-
あらゆる有効な
<integer>の値です。 "<length>"-
あらゆる有効な
<length>の値です。 "<length-percentage>"-
あらゆる有効な
<length>または<percentage>の値、および<length>と<percentage>を組み合わせた有効なcalc()式です。 "<number>"-
あらゆる有効な
<number>の値です。 "<percentage>"-
あらゆる有効な
<percentage>の値です。 "<resolution>"-
あらゆる有効な
<resolution>の値です。 "<string>"-
あらゆる有効な
<string>の値です。 "<time>"-
あらゆる有効な
<time>の値です。 "<transform-function>"-
あらゆる有効な
<transform-function>の値です。 "<transform-list>"-
有効な
<transform-function>の値のリストです。 これは"<transform-function>+"と等価です。 "<url>"-
あらゆる有効な
<url>の値です。
公式定義
形式文法
syntax =
<string>
例
型チェック付きのカスタムプロパティの登録
この例は、<color> 値のみを許可するカスタムプロパティ --my-color を定義する方法を示しています。
@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 |