^23）なんか微妙なCSS変数

ネイティブなCSSで変数が使えるらしく、使ってみました。といっても今更なんで、使用頻度の高い値（色）だけです。CSS変数の正しい名称は、「CSS custom properties for cascading variables」で、CSSカスタムプロパティ、CSS変数などと呼ばれているようです。まあ、結論は使いづらいです。

変数の使い方は、（1）ある文字（文字列）を変数として宣言する。（2）その変数に数字や文字（文字列）といった値を代入する。（3）変数を参照することで値を利用する。というものです。CSS変数は、セレクタ（.classや:root）にプロパティとして宣言・代入し、var(変数名)で参照します。

変数を使用するメリットは、変数に代入する値を変更するだけで、同名の変数の値が全て変更できる点です。例えば、今回の変更では、同じ色（#fefefe）を12箇所で使っていました、もし色を変更したい場合には、12 箇所全てを変える必要があります。しかし、変数を使えば、代入値を変更するだけの一箇所で済みます。

CSS変数はChromeやSafari、Edgeといったモダンブラウザで対応しています。しかし、Internet Explorerといったレガシーブラウザは未対応なので、レイアウトが著しく崩れます（上下部のリストの文字色が初期色の青に）。2013年に開発終了しているInternet Explorerを使う理由が良くわからないので、対策はしないことにしました。（可能性としては図書館や公民館などで使える、市民に開かれたパソコンか。）

2018-03-19