Categorias
HTML5 Tutoriais

Trabalhando a propriedade css currentColor

Nesse vamos falar sobre a palavra-chave currentColor do css 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.

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 estamos a trabalhar 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:

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.

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *