CSS.registerProperty()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
CSS.registerProperty()
メソッドはカスタムプロパティ
を登録し、プロパティ型のチェック、既定値、値の継承の有無の指定を行うことができます。
カスタムプロパティを登録すると、許される型は何か、その値を継承するかどうか、既定値は何かといったカスタムプロパティの動作ををブラウザーに指示することができます。
構文
CSS.registerProperty(PropertyDefinition);
引数
返値
undefined
です。
例外
InvalidModificationError
-
指定された
name
がすでに登録されている場合。 SyntaxError
-
指定された
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, #fff, 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, #fff, var(--unregistered));
transition: --unregistered 1s ease-in-out;
}
.unregistered:hover,
.unregistered:focus {
--unregistered: #b4d455;
}
button {
font-size: 3vw;
}
これらのスタイルをいくつかのボタンに追加できます。
<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>
仕様書
Specification |
---|
CSS Properties and Values API Level 1 # the-registerproperty-function |
ブラウザーの互換性
BCD tables only load in the browser