Postado dia

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>

currentColor - Imagem 1

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;}

currentColor - Imagem 2

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:

currentColor - Imagem 3

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;}

currentColor - Imagem 4

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!

Tags: ,

Manda sua palavra ae! Deixe um comentário: