【意外と知らないCSS】currentColorで簡単に色を指定する

CSSの「currentColor」をご存知でしょうか？

CSS3で導入された「currentColor」は、CSSでカラーの指定を変数のような形で使える便利な値です。

プロパティの値に指定することで、その要素に適応されているcolorと同じ値を適応してくれる便利な機能です。

少々特殊ですが、「background」などのCSSのプロパティではなく、「red」等の値に指定します。

こういうシーンで使いたい

• 親要素の色を子要素でも使いたい。
• ボーダーの色を文字色に合わせたい。
• SVGのアイコン画像の色と文字色を合せたい。

使用例

現在の要素から色を継承する

See the Pen 【currentColor】現在の要素から色を継承する by sister (@sister_web) on CodePen.

現在の要素のborderの色がcolorの値を継承しています。

親要素から色を継承する

See the Pen 【currentColor】親要素から色を継承する by sister (@sister_web) on CodePen.

親要素のcolorの値を継承しています。

SVGの色を動的に適用する

See the Pen 【currentColor】SVGの色を動的に適用する by sister (@sister_web) on CodePen.

html側SVGのfill=“currentColor”を設定。colorで設定した色が入るように設定しています。

CSS側でhoverしたら色が変わるようにcolor値を変更しています。

その他にもsvgは以下のプロパティもcurrentColorを使用できます。

• fill
• stroke
• stop-color
• flood-color
• lighting-color

まとめ

意外と知られていないcurrentColorの存在。実はとても変更に強く、保守性が高いです。

生のCSSを使っている場合だと大きな恩恵を感じやすいと思いました。
sassを使っていると恩恵は薄くなりそうですが、svgの色の変更の際はsassを使っていても重宝すると思います。