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

投稿日: 2022-04-20 2022-10-06
タグ: css

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

getdocs

13036