Jak widać na powyższym fragmencie filmu, w życiu też można dzielić te same kolory. Jeden z obiektów ma czarne tło i czerwone V, drugi czarną ramkę i zapożyczone czerwone tło. Dziś omawiana wartość zachowuje się podobnie.
Piękni i kolorowi.
Wartość currentColor pozwala na zapożyczenie wartości z właściwości color i przekazanie jej na inne właściwości, w których wartościach możemy zawrzeć kolor (np. border, background, box-shadow). Oczywiście możemy również użyć jej dla właściwości color, ale nie ma to większego sensu, bo tej wystarczy nie ustawiać, a wartość będzie odziedziczona z elementu nadrzędnego. Pokażmy o co chodzi.
<p>Tu jest jakiś tekst</p>
+
p {
color: #f00;
border: 1px solid currentColor;
}
W powyższym przykładzie zarówno tekst jak i ramka paragrafu będą czerwone.
Trochę inny przykład:
<p>
Tu jest jakiś
<em>ważny</em> tekst
</p>
+
p {
color: #f00;
}
p em{
border: 1px solid currentColor;
}
W tym przypadku kolor elementu EM będzie odziedziczony ze względu na działanie samego CSS. Natomiast kolor ramki będzie zapożyczony nie bezpośrednio z właściwości color elementu P, ale pośrednio. Czyli EM zapożyczy color po P, a ramka zapożyczy kolor z odziedziczonej wartości color. Jeśli ustawimy inny kolor dla elementu EM, to oczywiście currentColor przyjmie również tą wartość, więc i ramka zmieni kolor.
Nie ma znaczenia kolejność umieszczania właściwości w klasie, czyli:
p {
color: #f00;
}
p em {
border: 1px solid currentColor;
color: #00f;
}
nie zadziała. Ramka i tak będzie niebieska.
Jaki to ma sens?
W tej chwili może przyszło Ci na myśl, że wobec istniejących preprocesorów CSS możemy wartość koloru ustawić w zmiennej, podstawiać w konkretnych miejscach, a po przetworzeniu uzyskamy wynikowy CSS z kolorami ustawionymi gdzie trzeba. Możemy też używać zmiennych bezpośrednio w CSS i je podstawiać. Jednak użycie currentColor ma i swoje zalety. Wystarczy bowiem stworzyć animację koloru i dodać ją do danego elementu, a wszystkie właściwości elementów zapożyczających wartość currentColor będą również animowane, bez potrzeby tworzenia odrębnych animacji. Nawet animacja w ramach jednego elementu jest prostsza, bo w klatkach animacji umieszczamy tylko wartości dla color, a inne właściwości korzystające z currentColor będą również animowane - nie musimy animować kilku właściwości.
p {
animation: 1s kolor ease infinite;
}
p em {
border: 1px solid currentColor;
}
@keyframes kolor {
0% {
color: #f00;
}
50% {
color: #00f;
}
100% {
color: #f00;
}
}
Żeby nie przekoloryzować, kończę ten wpis. Wpadnij do kolejnego!