currentcolorキーワードで効率設計
UI開発者 佐竹最近、デザインシステムを意識した設計をすることが増えてきたことから、カスタムプロパティに設定した色からプロパティに設定する色を選びがちではないでしょうか。
そのような時に少し立ち止まって思い出して欲しいのがcurrentcolorキーワードです！
currentcolorキーワードはState of CSS 2022のアンケート結果では47.3%の人が「使った」16.8%の人が「知っている」という結果となっていますので、主要なキーワードであると思います。
しかし、そのように主要なキーワードであるはずのcurrentcolorですが、カスタムプロパティという強い存在によりうっかり使い忘れられるということがあるように感じています。
よって、この記事でcurrentcolorキーワードの魅力を再認識できればと思います。
currentcolorキーワードとは？
currentcolorキーワードはcolorプロパティの値を表します。
currentcolorキーワードでポイントになるのは継承です。
ある要素のプロパティにcurrentcolorキーワードを設定すると、その擬似要素、子要素、孫要素など、継承が続く限り設定した色を伝搬させることができます。
そしてfocusやhoverなどといったユーザーアクションに合わせてcolorの値を変更すると、その値がcurrentcolorキーワードにも継承されます。
つまり、一度currentcolorキーワードを設定すれば、後はcolorの値だけで色を操作できます。
実用例
ボタンを例に説明します。
currentcolorキーワード使用しない例
まずはcurrentcolorキーワードを使わない方法からです。
See the Pen currentcolorキーワード使用しない例 by ミツエーリンクス (@mitsue-links) on CodePen.
CSSは48行になりました。
currentcolorキーワード使用した例
次はcurrentcolorキーワードを使った方法です。
See the Pen currentcolorキーワード使用した例 by ミツエーリンクス (@mitsue-links) on CodePen.
CSSは38行になりました。
例ではボタンの枠線と擬似要素でアローをborderで作成して、border-colorの値をcurrentcolorとしました。
アローはボタンの子要素としてHTMLにsvg画像で配置して、fillの値にcurrentcolorを設定する方法でもcolorの値を継承することができます。
まとめ
ボタンの例ではcurrentcolorキーワードを使うだけで、10行分のコードが省略できました。これがサイトで使用するコンポーネントモジュール全てに適用されれば、結構なコード量の削減が期待できます。
currentcolorキーワードを使ってどんどん効率的な設計をしていきたいですね。