Trabalhando com a propriedade CSS currentColor

Nesse post vamos falar sobre CSS currentColor, ele já está aí a um bom tempo e ela pode ser bem útil para melhorar o nosso código CSS e nesse tutorial vamos ver como.

Muitas vezes queremos fazer uma referência a cor atual do nosso elemento, algo como a palavra-chave this, comum nas linguagens de programação. No CSS não temos o mesmo seletor, mas temos algo que pode dar-nos um comportamento similar, a palavra-chave CSS currentColor.

O que é CSS currentColor?

É uma palavra-chave que pode ser adicionada na propriedade CSS color. Basicamente ela irá refletir a cor definida na propriedade “color” no elemento em que ela se encontra:

p { color: peru; padding: 1em; border: 5px solid currentColor; }
Code language: CSS (css)

E o resultado será o seguinte:

botão utilizando a propriedade CSS currentColor

Isso mesmo a cor peru é uma cor válida CSS, mas o importante aqui é que não precisamos repetir o valor da nossa cor para a propriedade na borda simplesmente chamamos a palavra-chave e ele passa a útil quando temos elementos que passam por mudança de estado, por exemplo, botões e links:

button { color: salmon; background: white; border: 3px solid currentColor; padding: 1em; transition: 300ms all; } button:hover { color: navy; }
Code language: CSS (css)

No exemplo acima um botão, seguindo as mesmas propriedades do parágrafo anterior, entretanto nesse caso trabalhamos com um botão e quando o nosso botão está no estado hover adicionamos a cor navy, assim o resultado será o seguinte:

Botão no estado normal
Botão no estado “hover”

Além disso, podemos resgatar o valor do color de uma elemento pai como no exemplo abaixo:

<div class="salmon-box"> <p>Test CSS</p> <p>Test CSS</p> <p>Test CSS</p> </div> <style> .salmon-box { color: salmon; } p { padding: 1em; border: 3px solid currentColor; } </style>
Code language: HTML, XML (xml)

Assim o resultado será o seguinte:

Exemplos utilizando a propriedade CSS currentColor

Detalhe para o exemplo anterior o botão não conseguiu resgatar o currentColor somente quando a cor é definida no próprio elemento.

Suporte

currentColor ganhou suporte em 2009 pelo navegador Opera e desde então os navegadores passaram a dar suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.

suporte dos browsers para propriedade CSS currentColor

Para mais tutoriais acesse a página da categoria tutoriais.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.