この記事は
CSS Advent Calendar 2019 9日目の記事です。
CSS Custom Properties、ときにCSS変数やCSS Variablesとも呼ばれているプロパティがある。昨今のダークモード等のテーマ変更の需要の高まりとともに、多くのウェブサイトで使われるようになった。
たとえば、CSS Custom Propertiesを使うと以下のようにCSSだけでOSのテーマを判別し、ダークモード表示ができる。
/* Default / Light Theme */
:root {
--color: black;
--background-color: white;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
:root {
--color: white;
--background-color: black;
}
}
body {
color: var(--color);
background-color: var(--background-color);
}
他にも以下のようにスタイルの管理がしやすくなる。
/* Before */
a {
color: #0000EE;
}
a:visited {
color: #800080;
}
a:active {
color: #FF0000;
}
a.grayscale {
color: LightSlateGray;
}
a.grayscale:visited {
color: Silver;
}
a.grayscale:active {
color: LightSteelBlue;
}
/* After */
a {
--link: #0000EE;
--link-visited: #800080;
--link-active: #FF0000;
}
a.grayscale {
--link: LightSlateGray;
--link-visited: Silver;
--link-active: LightSteelBlue;
}
a {
color: var(--link);
}
a:visited {
color: var(--link-visited);
}
a:active {
color: var(--link-active);
}
参考:
Patterns for Practical CSS Custom Properties Use | CSS Tricks
すごい、、、すごく便利そう!!
しかし、一見便利そうなCSS Custom Propertiesも
使い方によっては闇を生み出してしまう。
ということで、当記事では
NES.css(CSSフレームワーク)開発で得た
<知見>を元に、CSS Custom Propertiesのメリット・デメリットを理解し良好な関係を築く方法を紹介する。