Trabalhando com a propriedade CSS currentColor

Nesse post falaremos 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 veremos como.

Muitas vezes queremos efetuar 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:

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:

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:

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 deram suporte a palavra-chave e hoje a propriedade tem suporte em 98.8% dos navegadores.

Gostou do tutorial CSS Currentcolor confira mais tutoriais relacionados:

• Otimização de performance com Priority Hints
• Utilizando Dark Mode em sua aplicação web
• Introdução a imagens responsivas com srcset