CSS: registerProperty() 静的メソッド
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.
CSS.registerProperty() メソッドはカスタムプロパティを登録し、プロパティ型のチェック、デフォルト値、値の継承の有無の指定を行うことができます。
カスタムプロパティを登録すると、許される型は何か、その値を継承するかどうか、デフォルト値は何かといったカスタムプロパティの動作ををブラウザーに指示することができます。
構文
CSS.registerProperty(propertyDefinition)
引数
propertyDefinition-
以下のプロパティを含むオブジェクトです。
name-
定義するプロパティの名前を
<dashed-ident>型で示す文字列です。 syntax省略可-
定義されたプロパティの期待される構文を表す文字列です。 デフォルト値は
"*"です。syntaxを参照してください。 inherits-
定義されたプロパティを継承するか (
true)、否か (false) を定義する論理値。 デフォルト値はfalseです。 initialValue省略可-
定義されたプロパティの初期値を表す文字列です。
返値
undefined です。
例外
InvalidModificationErrorDOMException-
指定された
nameがすでに登録されている場合。 SyntaxErrorDOMException-
指定された
nameが（--fooのように、 2 つのダッシュで始まる）有効なカスタムプロパティ名ではない場合。 TypeError-
必須の辞書メンバーの
nameまたはinherits、あるいはその両方が指定されていない場合。
例
次の例では、カスタムプロパティの --my-color を、registerProperty() を使用して色として登録し、デフォルト値を指定して、その値を継承しないようにします。
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
この例では、カスタムプロパティ --my-color が構文 <color> を使用して登録されます。 これで、このプロパティを使用して、ポインターを当てたりフォーカスを与えたりするとグラデーションをトランジションで変化させることができます。 登録されたプロパティではトランジションが機能しますが、未登録のプロパティでは機能しないことに注意してください。
.registered {
--my-color: #c0ffee;
background-image: linear-gradient(to right, white, var(--my-color));
transition: --my-color 1s ease-in-out;
}
.registered:hover,
.registered:focus {
--my-color: #b4d455;
}
.unregistered {
--unregistered: #c0ffee;
background-image: linear-gradient(to right, white, var(--unregistered));
transition: --unregistered 1s ease-in-out;
}
.unregistered:hover,
.unregistered:focus {
--unregistered: #b4d455;
}
button {
font-size: 3vw;
}
これらのスタイルをいくつかのボタンに追加できます。
<button class="registered">登録されている背景</button>
<button class="unregistered">登録されていない背景</button>
仕様書
| Specification |
|---|
| CSS Properties and Values API Level 1 # the-registerproperty-function |