Imagem mostra um controle de xbox segurado por uma pessoa

Usando o currentColor do CSS

Variáveis no CSS? Em um futuro não muito distante (ou talvez sim) poderemos usar nossas variáveis muito doidas diretamente no CSS, mas enquanto o sol não raia pra nós, conseguimos simular esse recurso através de pré-processadores. Pra mim, o uso de variáveis são umas das principais e, acho que uma das poucas, features que uso dos pré-processadores, mas isso foge um pouco do assunto do post (boa idéia para um próximo).

Variáveis são legais

Se você está acostumado a utilizar um Sass ou LESS da vida, sabe o quão legal e útil pode ser utilizar variáveis quando falamos de estilo. Uma coisa útil é que variáveis nos ajudam a evitar repetições e nos auxiliam e muito principalmente em projetos grandes onde a possibilidade, de por exemplo, ter uma repetição de uma cor específica é bem grande.

Um bom caso de aplicação de variáveis é na questão de temas ou variações de um componente ou até de um projeto inteiro. Criar e gerenciar esquemas de cores com variáveis fica bem mais fácil: podemos criar por exemplo, uma variável chamada main-color e declarar a cor red pra ela. Assim, se em uma manutenção futura, precisarmos mudar essa cor, alteramos apenas na declaração da variável e não em todos os casos onde ela é utilizada. Claro que tudo depende de como estruturamos a coisa toda, pois uma pequena alteração de cor pode te dar alguns problemas.

O tal do currentColor

O danado do currentColor funciona semelhante a uma variável salvo duas exceções: só podemos utilizá-lo onde um valor de cor é esperado e, diferente de uma variável comum, não podemos setar o seu valor, e sim, isso é herdado do valor atual da propriedade color que está sendo usado no elemento e claro, seguindo a cascata. Ficou confuso? Eu também! Vamos lá!

Vamos supor que tenhamos o seguinte:

body { color: green; }

div {
  color: currentColor;
  box-shadow: 1px 1px 1px 1px currentColor;
  outline: dotted 1px currentColor;
}

No exemplo acima, simplesmente definimos uma cor verde para o body e a utilizamos nos elementos div através dos caras currentColor. Mas Fabeni, tu tá me enrolando! Eu não precisava do currentColor aí! Exatamente, não precisava. Se voltarmos para o exemplo, chegaríamos no mesmo resultado apenas assim:

body { color: green; }

div {
  box-shadow: 1px 1px 1px 1px;
  outline: dotted 1px;
}

Algumas propriedades herdam o valor da propriedade color do elemento ou caso essa não tenha sido setada, seguem a cascata, até achar da onde vão herdar esse valor. Algumas dessas propriedades são:

  • o elemento texto em si;
  • a borda do elemento;
  • o outline;
  • box-shadow;
  • bullets de uma lista.

No exemplo abaixo, é possível ver que alterando a cor do body, todos os elementos que herdam essa cor, sofrem modificação de estilo.

See the Pen Color inherited by Raphael Fabeni (@raphaelfabeni) on CodePen.

Mas então, você deve estar perguntando: qual a real utilidade disso, certo? Agora que as coisas começam a ficar legais e, dependendo da sua criatividade e organição dá pra fazer algumas coisas bem bacanas.

É possível usar por exemplo em animações, svg, gradientes.. e por aí vai. Fuçando pela interwebs da vida, achei esse exemplo que, através de uma animação, altera a cor do elemento body, mudando assim o currentColor usado em outro elemento.

Brincando um pouco, montei esse exemplo rápido, onde o currentColor é aplicado no :after do elemento.

See the Pen Simple buttons using currentColor by Raphael Fabeni (@raphaelfabeni) on CodePen.

A idéia para formar o triângulo é criar uma borda geral transparente e setar apenas o lado que você quer com o currentColor, formando assim o triângulo. Uma outra abordagem e, que chegaria no mesmo resultado seria fazer o processo inverso: setar uma borda geral com cor (no caso nem precisaria do currentColor pois ele herdaria a cor da propriedade color) e depois disso, tirar a borda dos lados que você não queira. Algo mais ou menos assim:

.element:after {
    border: 0.4em solid;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

Outros usos

É possível usar nosso camarada em SVGs. Fiz um exemplo rápido (abaixo) onde o SVG herda a cor da propriedade color do elemento pai (a classe .alert).

See the Pen CSS currentColor in SVG by Raphael Fabeni (@raphaelfabeni) on CodePen.

Só isso? Basicamente sim e não. Aqui que entra a nossa criativade e organização em tirar proveito do que o currentColor nos oferece.

Mas eaí.. dá pra usar?

O suporte é bem melhor do que eu imaginava.. IE9, Chrome, Firefox, Safari e por aí vai. Existe um pequeno bug bem pontual, para Safari e iOS Safari 8 quando aplicado em :after e :before. Dá pra ver mais informações no site do Can I Use.

Gostou? Escrevi alguma groselha? Quer melhorar? Abra uma issue mencionando o post e vamos conversar.

See all posts...