CSSのcurrentColorキーワードを理解する

CSSにカスタムプロパティがあるので、CSSの独自の変数をほぼ完全に活用できます。ただし、これらが役立つ前でも、CSSカラーモジュールレベル3、currentColor以降で使用可能なキーワードを使用して、要素内の色の一貫性を保つことができます。

currentColorは、要素のcolorプロパティの現在の値の変数のように機能します。また、CSSの Cascading 部分は引き続き有効であるため、要素にcolorプロパティが定義されていない場合、カスケードはcurrentColorの値を決定します。

使用法

currentColorは、特定の色を要素内で一貫させたい場合に役立ちます。たとえば、要素の境界線の色を要素のテキストの色と同じにする場合は、currentColorを使用するのが理にかなっています。これは、メインのテキストの色を決定する場合にのみ値を変更できるためです。一箇所。

例

言葉はすべてうまくいっていますが、例に勝るものはありません！簡単な例で、いくつかの異なる場所でcurrentColorを利用してみましょう。 currentColorがSVGのfillプロパティの値としてどのように役立つかがわかります。

最後の例は次のようになります（可能な場合はカーソルを合わせてください）。

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機能のサポートに関するデータ。