CSSのcurrentColorキーワードを理解する
CSSにカスタムプロパティがあるので、CSSの独自の変数をほぼ完全に活用できます。 しかし、それらが役立つようになる前でも、CSSカラーモジュールレベル3以降に使用可能なキーワードを使用できます。 currentColor
、要素内で色の一貫性を保つため。
currentColor
の現在の値の変数のように機能します color
要素のプロパティ。 また、CSSの Cascading の部分は引き続き有効であるため、定義されていない場合は color
要素のプロパティ、カスケードはの値を決定します currentColor
.
使用法
currentColor
要素内で特定の色を一貫させたい場合に便利です。 たとえば、要素の境界線の色を要素のテキストの色と同じにする場合は、次を使用します。 currentColor
本文の色を決めると、1か所でしか値を変更できないので非常に理にかなっています。
例
言葉はすべてうまくいっていますが、例に勝るものはありません! 活用しましょう currentColor
簡単な例では、いくつかの異なる場所で。 あなたはどのように見るでしょう currentColor
の値としても非常に役立ちます fill
SVGのプロパティ。
最後の例は次のようになります(可能な場合はカーソルを合わせてください)。
CodePenのalligatorio( @alligatorio )によるペンbGprJqgを参照してください。
まず、マークアップ:
<div class="outer-circle">
<svg width="150" height="150" viewBox="0 0 322 322">
<g fill="none" fill-rule="evenodd">
<circle class="main-circle" cx="161" cy="161" r="161"/>
<circle class="left-eye" fill="#6A76C0" cx="108" cy="109" r="25"/>
<path d="M112 239h99a49.5 49.5 0 0 1-99 0zM161 201c13.8 0 25-26.2 25-40 0-9.2-8.3-17.5-25-25-16.7 7.5-25 15.8-25 25 0 13.8 11.2 40 25 40z" fill="#51BAB6"/>
<circle fill="#6A76C0" cx="221" cy="109" r="25"/>
</g>
</svg>
</div>
ご覧のとおり、マークアップには特別なことは何もありません。外側だけです。 div
それにシンプルなSVGグラフィックが含まれています。
魔法✨はCSSスタイルで発生します:
.outer-circle {
color: gold;
border: 10px solid currentColor;
box-shadow: 0px 0px 15px currentColor;
width: 200px;
height: 200px;
border-radius: 50%;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
}
.main-circle {
/* inherited from parent */
fill: currentColor;
}
.outer-circle:hover .left-eye {
fill: currentColor;
}
さらに、 color
CSS変数になり、 currentColor
それでも私たちの期待値になります:
CodePenのalligatorio( @alligatorio )によるペンBaKdEZQを参照してください。
マークアップは、外側の円に追加のクラスがあることを除いて、基本的に同じです。
<div class="outer-circle alternative">
<!-- ... -->
</div>
そして、スタイルでは、からの色をオーバーライドします .outer-circle
代わりに、このサイトで利用可能なCSS変数の1つの値を使用してください。
.alternative {
color: var(--code);
}
まとめ
あなたのマイレージ currentColor
色を含む多くのプロパティはデフォルトで現在の値になるため、異なる場合があります。 color
とりあえず (border
, box-shadow
, text-decoration
…)。 これに、本格的なCSS変数があるという事実に加えて、プルしないことに気付くかもしれません。 currentColor
最近はトリックのバッグから頻繁に。 それでも、必要が生じた場合はそこにあります。 SVGアイコンが現在のテキストの色と同じ色で塗りつぶされていることを確認すると特に役立ちます。
ブラウザのサポート
currentcolorを使用できますか? caniuse.comの主要なブラウザーでのcurrentcolor機能のサポートに関するデータ。