currentColor – prosty sposób na zmniejszenie ilości generowanego kodu CSS

Jedną z głównych cech WordPressa jest jego prostota. Tworząc wtyczki często chcemy zadbać o to by ich użytkownik nie musiał dotykać kodu. Niestety niemożliwym jest stworzenie kodu CSS odpowiadającego za wygląd kodu wynikowego wtyczki, który będzie pasował do wszystkich dostępnych motywów. Stąd autorzy wtyczek tworzą często dodatkowe opcje, pozwalające określić podstawowe kolory.

Prawdziwe schody zaczynają się, gdy mamy wtyczkę, która pozwala tworzyć wiele instancji jakiegoś bloku o różnych kolorach. Warto w takim przypadku pomyśleć chwilę nad tym na ile możemy zoptymalizować ilość generowanego kodu CSS.

Jednym z rozwiązań jest (mam wrażenie, że mało znana) wartość currentColor, która ma tak dobre wsparcie wśród przeglądarek, że w zasadzie poza projektami, które muszą wspierać bardzo stare wersje IE może być z powodzeniem stosowana.

Zacznijmy od tego jak działa wartość currentColor – otóż jest to swoista namiastka zmiennych w CSS – zawiera ona w sobie kolor tekstu, który wynika z dziedziczenia kolorów tekstu dla danego elementu. Jednak cały jej urok polega na tym, że możemy ją stosować jako kolor tła czy obramowania.

Dzięki takiemu działaniu możemy zaaplikować kolor tekstu do jednego elementu (który najczęściej nie zawiera żadnego tekstu), a dzięki currentColor na tej podstawie określić kolory tła czy obramowań dla innych elementów i co najważniejsze – pseudoelementów.

Zatem mając bazowy kod postaci:

.element {
   background: #000;
   color: #fff;
}
.element:before {
   background: currentColor;
   content: "";
}
.element:before {
   background: currentColor;
   content: "";
}

Zamiast nadpisywać go poprzez dodanie w kodzie strony:

.element {
   background: #f00;
}
.element:before {
   background: #f00;
}
.element:before {
   background: #f00;
}

Wystarczy nam następujący kod:

.element {
   background: #f00;
   color: #f00;
}

Wartość właściwości color dla elementu nadpisze kolory tła pseudoelementów dzięki currentColor.

P.S. Stosowanie currentColor w takim kontekście pozwala nam też modyfikować kolory pseudoelementów poprzez atrybut style – choć dla jego zastosowania najpierw warto sobie znaleźć solidny powód 😉