CSSには不思議な変数があり、自然が人々によって使用されていないことを知っている人はほとんどいません。それは単なるcrrentColor変数（またはCSSキーワードですが、変数を理解する方が簡単だと思います）です。

最初の知人

なに？効果は何ですか？どこから来たの？これらの質問で私たちは続けます。

MDNからの説明は次のとおりです。

currentColor現在の要素が適用されるcolor色の値を表します。現在のカラー値を他の属性、またはネストされた要素の他の属性に適用するために使用します。

このように理解できます。CSSでは、currentColorこの変数を色を書く必要がある場所ならどこでも使用できます。この変数の値は、現在の要素のcolor値です。現在の要素がCSS colorで明示的に値を指定していない場合、その色の値はCSSルールに従い、親要素から継承されます。

この時点で、上記の3つの哲学的問題は解決されたようですが、それでもまだあいまいです。プログラマー間のコミュニケーションはよりよいです。

シーン1

<p>约么？</p>

p{
    color: red;
}

このとき、<p>ラベルcurrentColorの値red。

シーン2

<div class="container">
    <p>约么？</p> </div>

.container{
    color: #00ff00;
}

今、私たちが持っていない<p>指定されているラベルの色、それはcolor親コンテナがあるからclassにこの時点で他の言葉で、継承されたラベルがある、だけでなく、直接の要素を取得するので、この場合には、値をタグ値も。containerdivpcolor#00ff00currentColorcolorpcurrentColor#00ff00

シーン3

親要素が書かれていない場合はどうなりcolorますか？実際、それはまだCSSルールのカテゴリにあり、この記事の主人公とはあまり関係ありません。でも、死ぬほど長続きしないという原則で、私はそれについて話し始めました。

親要素にも色が指定されていない場合、ドキュメントのルートノードhtmlラベルに指定された色が表示されなくなるまで、その親要素は親の親から継承され、ブラウザのデフォルトの色が適用されますチャント〜

<!doctype html>
<html>
    <head> <title>我来组成头部</title> </head> <body> <p>约么？</p> </body> <footer>战神金钢，宇宙的保护神！</footer> </html>

/**
 * 无CSS
 */

さて、この時点での黒は、デフォルトでブラウザによって実際に与えられます。この時点では、pラベルはcurrentColor当然color値と同じで、黒と純粋な黒#000です。

使い方は？

どんなものかを理解した上で、どうやって使うのですか？追加のbuff効果はありますか、青色、CDの長さはどれくらいですか。。。

前述のようcolorに、現在の要素のCSS属性から取得した色の値を格納するCSS変数です。要素の他の属性の色を指定する必要がある場合は、ステージ上に置くことができます。

<div class="container">
    好好说话，有话好好说
</div>

.container{
    color: #3CAADB;
    border: 4px solid currentColor; }

ここで私たちは初めてcurrentColor驚異を体験しました。境界線の色を指定するときはcurrentColor、従来の色の値を記述せずに変数を直接使用します。

あなたはそれを使う方法を知っているようです。だけでなくborder、他の色がどこに使用することができ、例えばbackground、box-shadowそして上のようにします。

強制的に飛ばす

新しいスキルはとてもクールです。心を開いて勝手に使ってください！

グラデーションと混ぜて一致させる

currentColor色を必要とする通常のシーンに加えて、グラデーションでも使用できることは想像できないでしょう。

<div class="container">
</div>

.container{
  height:200px;
  color: #3CAADB; background-image: linear-gradient(to right, #fff, currentColor 100%); }

svgを埋めるために使用することもできます。以下に対応する例があります。

CSSアニメーションと組み合わせる

CSSと組み合わせると animation、このコードペンの例のように、よりクリエイティブな効果を得ることができます

ペンを参照してください currentColorをスコットKellum（で@scottkellum上） CodePen。

より簡潔なCSS

実際、新しいスキルは単純なふりをするだけではなく、currentColor 変数を適切に使用すると、CSSコードが単純になります。これが私たちが達成したいことです。スキルを披露することを目的としたスキルは無意味です。

次の例を見てください（この例はここから発想を得ています）

ボタンにはsvgアイコンを使用しました。あなたは責任FEは、それゆえ、このボタンのさまざまな状態のためのもの:focus、:hover、:activeスタイル上の取引を行っています。同時に、アイコンが同じ姿勢の変化をたどるには、<a>ラベルのスタイルもラベルで処理する必要があります<svg>。したがって、CSSコードは次のようになります。

/*a 标签*/
.button {
    color: #117B6F;
    font-size: 1.2em; } .button:hover, .button:focus { color: #01B19A; } .button:active { color: #02D7BB; } /*svg 标签*/ .button svg { height: 17px; width: 17px; fill: #117B6F; } .button:hover svg, .button:focus svg { fill: #01B19A; } .button:active svg { fill: #02D7BB; }

また、コードが少し冗長であることも発見しました。次に、我々は、使用しcurrentColor、それを少し簡素化します。だからそれはこのようになりました：

/*a 标签*/
.button {
    color: #117B6F;
    font-size: 1.2em; } .button:hover, .button:focus { color: #01B19A; } .button:active { color: #02D7BB; } /*svg 标签*/ .button svg { height: 17px; width: 17px; fill: currentColor; }

CSSの維持管理の向上

考えてみればcurrentColor、CSSを使用することで、CSSの保守性が向上したことがわかります。

上記のボタンの例を例にとると、最適化の前に、コードが冗長であるだけでなく、ある日、PMはこの色がいっぱいであると言い、別の色を与えます。したがって、一緒に<a>ラベルを変更する必要があります<svg>。

ただし、最適化後は異なります。<svg>使用される塗りつぶしは、ラベルの色currentColorを変更するだけ<a>でよく、それに応じて変更されるためです。全身を動かさずに髪をホールドすることを可能にしました。これは、すべてのコードの友人が一生追求してきた理想的なプログラミング領域ではありません。

ブラウザの互換性

ブラウザの互換性に関しては、FEの学生はそれほど気まぐれであることを敢えてしないかもしれません。あなたがこのようになる前に：

IEから悪い知らせを聞くと、次のようになるでしょう。

調査は、私が使用することはできませんそれについてはデータを。

テスト後、

Win7上のIE8はサポートされていません
このマシンにインストールされているFirefox 31がサポートにレポートを送信しました
クロム？
Native Safari 5.1.7もサポートを表明
ネイティブOpera 26もサポートを表明しました

この記事の説明によると、すべての最新のブラウザーとIE9 +、さらには各ブラウザーに対応するモバイルバージョンでも問題なく機能します。したがって、IEが主要な顧客オブジェクトではない場合でも、安心して使用できます。

CSS currentColor変数の使用