CSS.registerProperty()
メソッドはカスタムプロパティ
を登録し、プロパティ型のチェック、デフォルト値、およびそれらの値を継承するまたは継承しないプロパティを許可します。
カスタムプロパティを登録すると、カスタムプロパティの振る舞い(許される型は何か、カスタムプロパティがその値を継承するかどうか、カスタムプロパティのデフォルト値は何か)をブラウザーに指示できます。
構文
CSS.registerProperty(PropertyDefinition);
パラメーター
次のメンバーを含むことができる PropertyDefinition
ディクショナリオブジェクトです。
戻り値
undefined
。
例外
InvalidModificationError
- 指定された
name
はすでに登録されています。 SyntaxError
- 指定された
name
は(--foo
のように、2つのダッシュで始まる)有効なカスタムプロパティ名ではありません。 TypeError
- 必要なディクショナリメンバーの
name
またはinherits
、あるいはその両方が指定されていません。
例
次の例では、registerProperty()
を使用してカスタムプロパティ
--my-color
を色として登録し、デフォルト値を指定して、その値を継承しません。
window.CSS.registerProperty({
name: '--my-color',
syntax: '<color>',
inherits: false,
initialValue: '#c0ffee',
});
この例では、カスタムプロパティ --my-color
が構文 <color>
を使用して登録されています。 これで、このプロパティを使用して、ホバーまたはフォーカスでグラデーションを遷移(transition)できます。 登録されたプロパティでは遷移が機能しますが、未登録のプロパティでは機能しないことに注意してください!
.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>
仕様
仕様 | 状態 | コメント |
---|---|---|
CSS Properties and Values API Level 1 The registerProperty() function の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.