E ae pessoas! Quando criamos o CSS de uma página, praticidade é sempre algo bem vindo. E no quesito paleta de cores, há algo muito bem vindo: o valor "currentColor"
.
Para que serve? Simplesmente ele procura o elemento acima dele mais próximo na hierarquia que tenha uma propriedade “color” definida e puxa esse valor para aplicá-lo na propriedade atual com o "currentColor"
definido. O "currentColor"
é utilizável em qualquer propriedade que pode ter uma cor aplicada, como border
, stroke
, fill
, background-color
, gradiente de background-image
, box-shadow
, text-shadow
, entre outros. Veja um exemplo:
<div id="a"> <p>Sou um parágrafo curto</p> <hr/> <p>Sou um parágrafo curto</p> </div>
Temos uma estrutura simples HTML com um conteúdo dentro de uma <div>
com id “a” divido por uma divisória <hr/>
. No CSS, vamos definir uma cor para <div id="a">
:
#a{color: #F00;}
Agora o texto ficou vermelho, mas queremos que a divisória também fique vermelha. Então vamos definir um estilo para o <hr/>
:
#a{color: #F00;} hr{border: 1px solid currentColor;}
Aqui defini o valor "currentColor"
ao invés de uma cor, assim, ele vai pesquisar os elementos acima dele na hierarquia, e no caso seria o <div id="a">
que é o mais próximo a ter a propriedade "color"
definida. Assim, ele herdará o valor de "color"
, aplicando-o na borda do <hr/>
, ficando assim:
Mas se eu quiser mudar para azul? Mude o valor da cor em #a
e veja a mágica acontecer:
#a{color: #00F;} hr{border: 1px solid currentColor;}
Simples! Isso abre um monte de possibilidades, tudo vai depender de como você estrutura seu site.
O currentColor é esperto
Se você definir um novo "color"
para um elemento que já tinha "color"
definido antes em outra linha, e algum elemento esteja usando o "currentColor"
baseado neste elemento, ele irá adotar o último "color"
. Exemplo:
#a{color: #00F;} hr{border: 1px solid currentColor;} #a{color: #CCC;}
O <hr/>
irá adotar a cor #CCC
.
Mesmo se tiver mais de um "color"
na mesma linha, e nesta linha (ou em outra) exista uma propriedade usando “currentColor” baseado neste elemento, o valor adotado será o do último “color”. Exemplo:
#a{color: #00F; border-bottom: 1px solid currentColor; color: #CCC;}
A borda inferior definida no CSS acima adotará a cor #CCC
.
Testando o currentColor
Abaixo segue um exemplo melhor que preparei. Para brincar com ele, clique aqui para abri-lo em uma aba diferente no seu navegador.
Até mais!