もっと早く知りたかった CSS3 の currentColor

更新日
2017.08.01
作成日
2017.02.11

複数の色の指定ですごく便利な currentColor のメモ。

Vue-material のマニュアルを読んでいたら、CSS で currentColor とか言うものが。字を見ただけでどんなものなのかは直感できましたが、今まで知らずに生きてきました。つらい。CSS3で追加されキーワードだそうです。

要素の color プロパティの計算値です。プロパティや、デフォルトでは継承を行わない子要素のプロパティに、色のプロパティを継承させることができます。

MDN currentColor キーワード

どんな場合に便利になるかと言うと、内側で背景やボーダーに同じ色を使っていたり、同じフォーマットだけど色だけ違うみたいなときですね。

例えばソーシャルアイコンを SVG で並べるとしましょう。

普通に指定した場合

.sbutton {
    display: inline-block;
    margin: 10px;
    padding: 10px 0;
    min-width: 80px;
    background-color: #ffffff;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    transition: 1s background-color;
    font-size: 12px;
}
.sbutton figure {
    margin: 0;
}
.sb_hatena {
    color: #365899;
    fill: #365899;
}
.sb_pocket {
    color: #EF3F56;
    fill: #EF3F56;
}
.sb_twitter {
    color: #1DA1F2;
    fill: #1DA1F2;
}
.sb_facebook {
    color: #3B5998;
    fill: #3B5998;
}
.sbutton:hover figure {
    fill: #fff;
    color: #fff;
}
.sb_hatena:hover {
    background-color: #365899;
}
.sb_pocket:hover {
    background-color: #EF3F56;
}
.sb_twitter:hover {
    background-color: #1DA1F2;
}
.sb_facebook:hover {
    background-color: #3B5998;
}

こんな感じで色の数だけ指定しないといけません…。数が多かったり複雑にデザインしているとまた大変。

currentColor で指定した場合

一番上の .sbutton の指定は両方とも一緒です。

.sbutton {
    display: inline-block;
    margin: 10px;
    padding: 10px 0;
    min-width: 80px;
    background-color: #ffffff;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    transition: 1s background-color;
    font-size: 12px;
}
.sbutton figure {
    margin: 0;
    fill: currentColor;
}
.sbutton.sb_hatena {
    color: #365899;
}
.sbutton.sb_pocket {
    color: #EF3F56;
}
.sbutton.sb_twitter {
    color: #1DA1F2;
}
.sbutton.sb_facebook {
    color: #3B5998;
}
.sbutton:hover {
    background-color: currentColor;
}
.sbutton:hover figure {
    color: #fff;
    fill: #fff;
}

だいぶすっきりと色の指定部分が減りました。JavaScript で動的に色を変える時や、デベロッパーツールなどで色の確認をしたい時も全部の箇所に反映されるので楽になりますね!ネストの途中でテキストに別の color を使いたい場合は タグで囲んでそこだけ色指定しなすとその範囲外は影響されません。

小技で background-image も一緒に使うと色味を変えられたりもします。以下はオーバーレイを入れてグラデーションさせています。

background-image: linear-gradient( to right bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.2) 100% );

元の背景と同じ色味なら最初から指定しておいても見えないですが、それ以外の色の場合は最初透明度を 0 にしておいて背景色と一緒にアニメーションさせるようにするといいです。