CurrentColorは、CSSの動(dòng)的キーワードであり、現(xiàn)在の要素テキストの色を參照しており、その値はColor屬性が変更されると自動(dòng)的に更新されます。 CurrentColorを使用して、色の値を繰り返し定義しないようにし、境界線、アイコン、影、その他のスタイルをテキストの色と一致させます。たとえば、ボーダーカラー：currentColorを設(shè)定した後、色を変更して境界色の色を同期させます。アプリケーションシナリオには、テキストの色、ボーダー、テキストの色、フォームフォーカスステータスなどの統(tǒng)一色マッチングのアイコンカラーが含まれます。使用方法は、.box {color：green;境界線：1px固體電流color; }。ヒントには、SVGアイコンでfill = "CurrentColor"を使用し、CSSを使用したカスタムプロパティを使用することが含まれます。注：最新のブラウザは広くサポートされていますが、IE9以下の互換性の問題に注意する必要があります。継承によって引き起こされる不確実性を避けるために、色の値を明示的に設(shè)定することをお?jiǎng)幛幛筏蓼?。同時(shí)に、DevToolsを使用して実際のレンダリング効果を確認(rèn)し、さまざまなテーマの下でパフォーマンスをテストします。

currentColorは非常に実用的ですが、CSSで見落とされがちなキーワードです。これは、本質(zhì)的に、現(xiàn)在の要素のcolor屬性値を指す動(dòng)的な參照です。つまり、スタイルの要素に設(shè)定したテキスト色に関係なく、 currentColorその色を「覚えている」、境界、背景色、影などの他のCSSプロパティに使用できます。

これは、一貫したテーマスタイルを作成したり、コンポーネントライブラリを開発したりする場合に特に便利です。これにより、特定の値を繰り返すことなく色の定義を再利用できるためです。

currentColorをいつ使用するのですか？

最も一般的なことは、テキストの色と一致しているが、死んだ色の値を書きたくないスタイル（境界、アイコンの色など）が必要な場合です。

たとえば、ボタンを作成したい場合、テキストは青く、境界線は青です。テーマを変更すると、緑のテキストと緑色の境界線に変わります?，F(xiàn)時(shí)點(diǎn)では、 border-color: #3366cc直接書く場合、テーマを変更するたびに2つのポイントを変更する必要があります。ただし、 border-color: currentColorを書く場合、テキストの色を1回変更するだけで、境界線の色が自動(dòng)的に変更されます。

アプリケーションシナリオには、以下が含まれますが、これらに限定されません。

• アイコンの色はテキストの色に従います
• 同じ色の境界、アンダースコア、テキスト
• フォームコントロールのフォーカスステータスは均一です

プロジェクトで使用する方法は？

どんな色の値を使用するのと同じように、使いやすいです。

 。箱 {
  色：緑;
  境界線：1px固體電流color;
}

上記のコードは、 .boxの境界色の色を常にそのテキスト色に等しくします。 JavaScriptまたは親の継承を介して後でテキストの色を変更したとしても、國境は自動(dòng)的に更新されます。

いくつかの実用的なヒント：

• svgアイコンでfill="currentColor"を使用して、テキスト色でアイコンの色を変更します。

• たとえば、CSSカスタムプロパティで使用する方が柔軟です。

   ：根 {
     - テキストカラー：青。
  }
  。例 {
    色：var（ - テキストカラー）;
    ボーダーカラー：CurrentColor;
  }

  ---

  メモと互換性

  最新のブラウザは基本的にcurrentColorをサポートしていますが、一部の古いバージョン（IE9以下など）では認(rèn)識(shí)されない場合があります。これらの古いブラウザと互換性がある必要がある場合は、ダウングレードまたは使用を避ける必要がある場合があります。

  さらに、注意すべきことの1つは、 currentColorが固定値ではなく、動(dòng)的であり、現(xiàn)在の要素のcolor値に依存することです。したがって、 colorを設(shè)定しないと、親要素から継承される可能性があり、時(shí)には予期しない結(jié)果が得られます。

  ヒント：

  • 継承によって引き起こされる不確実性を避けるために、常に明示的にcolor値を設(shè)定します
  • devtoolsを使用して、最終的なレンダリング色が予想通りかどうかを確認(rèn)します
  • 主要なUIコンポーネントのさまざまなトピックの下でパフォーマンスをテストします

  ---

  基本的にそれだけです。 currentColorは複雑ではありませんが、特にシステムやテーマの切り替えシナリオで、冗長コードを削減し、保守性を向上させるのに役立ちます。

  以上がCSScurrentColorとその実用的なアプリケーションとは何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。