私はcurrentColor
あまり頻繁に使用しませんが、使用するときは非常に便利です。
だから私は、CSS 変数の登場に少し興奮していました。
信号機を取りましょう。
注:日本の信号機は赤→オレンジ→青と変化しますので、ご安心ください。私は信じがたいことを知っています。青い光が緑に見えるのは知っています。しかし、そうではありません、それは青いです。
div {
float: left;
width: 200px;
}
div div {
float: none;
}
.top {
color: rgb(255,0,0);
}
.middle {
color: rgb(255,227,0);
}
.bottom {
color: rgb(63,255,63);
}
.jp .bottom {
color: rgb(0,255,191);
}
.light {
text-align: center;
}
.light::before {
content: '';
display: block;
margin: 6px auto 0;
width: 25px;
height: 25px;
border-radius: 15px;
background-color: currentColor;
}
<div class="uk">
<h2>UK Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Green</div>
</div>
<div class="jp">
<h2>JP Traffic Lights</h2>
<div class="top light">Red</div>
<div class="middle light">Amber</div>
<div class="bottom light">Blue</div>
</div>
さて、賢いことは
background-color: currentColor;
現在の値が何であれ、それを読み取り、それcolor
を使用するだけです。
対照的に...
background-color: var(--current-color);
別のスタイル宣言の現在の値を参照することはできませんね。
したがって、4 つの変数を設定する必要があります (color:
上記のスタイルで 4 回宣言する必要があるのと同じように)。
.top {
--color-top: rgb(255,0,0);
}
.middle {
--color-middle: rgb(255,227,0);
}
.bottom {
--color-bottom: rgb(63,255,63);
}
.jp .bottom {
--color-bottom-jp: rgb(0,255,191);
}
そして...後でこれらの異なる変数をそれぞれ参照する必要があります。これは、background-color
変数ごとに異なる宣言を意味します。
.top::before {
color: var(--color-top);
background-color: var(--color-top);
}
.middle::before {
color: var(--color-middle);
background-color: var(--color-middle);
}
.bottom::before {
color: var(--color-bottom);
background-color: var(--color-bottom);
}
.jp .bottom::before {
color: var(--color-bottom-jp);
background-color: var(--color-bottom-jp);
}
本当?!
それは正しくありません。私は何かを逃しましたか?
で再現currentColor
する方法はありませんvar(--current-color)
か?
CSS 変数が別のスタイル宣言の現在の値を表す方法はありませんか?