CSS Properties and Values API をテストする(カスタムプロパティ)

1. このページの目的

CSS Properties and Values API をテストする。

具体的には、CSSのプロパティを独自に定義して使用する(カスタムプロパティ)。

2. デモその1

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>

結果

こんにちは!

こんばんは!

メモ

3. デモ その2

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>

結果

メモ

参考