1. このページの目的
CSS Properties and Values API をテストする。
具体的には、CSSのプロパティを独自に定義して使用する（カスタムプロパティ）。
2. デモその１
JavaScript
window.CSS.registerProperty({
name: '--my-color',
syntax: '',
inherits: false,
initialValue: '#0000ff',
});
CSS
html {
--my-color: red;
}
.thing1 {
--my-color: green;
color: var(--my-color);
}
.thing2 {
color: var(--my-color);
}
HTML
<p class="thing1">こんにちは！</p>
<p class="thing2">こんばんは！</p>
結果
こんにちは！
こんばんは！
メモ
- Chrome 78 の場合「こんばんは！」は、デフォルト値にフォールバックされて青になった。
- Firefox 70 (
CSS.registerProperty未対応) の場合「こんばんは！」は、html に対して定義した 'red' が適用された。 CSS.registerPropertyを使わなくても動作するが、その場合 Chrome 78 の動作は Firefox 70 の動作と同じになった。
3. デモ その２
JavaScript
window.CSS.registerProperty({
name: "--stop-color",
syntax: "",
inherits: false,
initialValue: "rgba(0,0,0,0)"
});
CSS
.button {
--stop-color: red;
background: linear-gradient(var(--stop-color), black);
transition: --stop-color 1s;
}
.button:hover {
--stop-color: green;
}
HTML
<button class="button">マウスを重ねてください</button>結果
メモ
CSS.registerPropertyを使わなくても動作する。