最近、cssに外から任意の値を与えて表示を弄れるという事に気付いたので、備忘録として。
cssには変数の仕組みがあって、定義を纏める事が出来る。
test.css
:root {
--color: red;
}
div {
color: white;
background-color: var(--color)
}
これを、htmlから使うと
test1.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>赤</div>
</body>
</html>
こうなる
でもこれ、css内で変数として使いまわせるってだけじゃなくて、html側から直接スタイル指定して、変数の上書きも出来る
つまり以下の様なhtmlであれば
test2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div>赤</div>
<div style="--color: blue;">青</div>
<div style="--color: gold;">金</div>
</body>
</html>
こうなる
この仕組みの何が嬉しいかというと、例えば、ユーザー毎に画面デザインを変えたい様な場合に、直接htmlでスタイルを弄ってしまうのではなく、あくまでデザインの指定はcssに寄せたままで値だけを切り替えるのを、htmlとcss間のやり取りだけで実現出来る所。
直接スタイルを弄るだと（<div style="background-color: blue;">みたいな形）、同じスタイルの指定がcssとhtmlで重複してしまうけれど、値だけ渡せれば、デザインはcssで決定するという原則を、ある程度守り続ける事が出来る。
さらにこの実現において、javascriptを通さずにいられる。
デザインはデザインの問題として完結出来るなら、それに越したことは無いので、こうやって閉じ込めてしまえると、気持ちがいい。
rails/haml/scssのアプリで動的に表示を切り替えるのに、大変お世話になりました。