Entenda o conceito de CSS Variables e seus recursos avançados.
Quem já mexeu com alguma linguagem de programação conhece o conceito de variáveis: elas permitem definir valores que podem ser reutilizados e modificados em tempo de execução.
E quem já usou pré-processadores de CSS (LESS, SASS ou similares) já viu como pode ser divertido (e proveitoso!) trabalhar com variáveis — é possível definir um valor simbólico que pode ser recuperado e utilizado em qualquer regra de estilo.
Da mesma forma, as CSS custom properties representam valores simbólicos que podem ser definidos dentro do CSS e reutilizados em uma página web. Diferentemente do LESS/SASS, estes valores podem ser modificados em tempo de execução (com a página já sendo exibida), e qualquer mudança efetuada aparece na página imediatamente.
Elas são criadas com
--blah: "blah"
e acessados através da função
var()
O objetivo é facilitar a vida do desenvolvedor, diminuindo a repetição de código. Outro benefício é que elas podem ser manipuladas por JavaScript ou simplesmente importando outra folha de estilos. Isso possibilita oferecer temas personalizados.
Como eu uso CSS Variables?
A declaração das propriedades deve começar com dois hifens —. Assim como o resto dos seletores, a declaração de variáveis é case-sensitive (por exemplo, –cor é diferente de –COR). Abaixo segue um exemplo de como declarar e usar variáveis:
/* declarando uma variável */
:root {
--corzinha-bacana: #39F;
}
/* usando a variável para definir a cor de um elemento */
.meu-elemento-loko {
color: var(--corzinha-bacana);
}
Neste caso, :root é um seletor CSS que acessa o elemento raiz do documento. É semelhante a usar o seletor HTML, mas é mais específico (mais difícil de ser sobrescrito).
Recursos avançados do CSS Variables
É possível especificar um fallback para o caso da variável não existir. Por exemplo, ao especificar o tamanho de um elemento com o seguinte código:
.elemento {
width: var(--largura-maxima, 100px);
}
Logo, se a propriedade –largura-maxima não existir ou contiver um valor inválido, o elemento terá 100px de largura.
Uma recurso interessante (por bem ou por mal) é que as variáveis são totalmente dinâmicas e funcionam dentro do modelo “em cascata” do resto do CSS. Por exemplo:
/* definindo (padrao) */
:root { --color: red; }
/* definindo (apenas em uma classe) */
.opaa { --color: green; }
/* definindo (apenas um elemento especifico) */
#opaa { --color: blue; }
/* aplicando para todo mundo */
* { color: var(--color); }
<p>Eu sou vermelho (herdei do <code>:root</code>)</p> <p class="opaa">Eu sou verde</p> <p id="opaa"> Eu sou azul (<span>E eu sou azul tb (já que meu _parent_ é azul)</span>) </p>
Outra coisa interessante é que as variáveis podem ser acessadas através de JavaScript e modificadas livremente. Abaixo segue um exemplo de como manipular o valor de uma propriedade.
var elem = document.getElementById('meuElemento');
// para ler uma variável
var v1 = elem.style.getPropertyValue("--variavel-loka");
// e para modificar o valor de uma variável
elem.style.setProperty("--variavel-loka", v1);
Pode-se, inclusive, usar o valor de uma propriedade dentro de outra propriedade, utilizando var().
elem.style.setProperty("--color", "var(--outra-propriedade)");
E o Suporte?
Todos os navegadores atuais (excetuando-se o IE11 e o Opera Mini) suportam CSS Custom Properties. Existiam alguns problemas específicos no caso das versões iniciais do MS Edge, mas já foram todos sanados.
Se você tiver interesse em aprender mais sobre CSS Variables, pode consultar a Mozilla Developer Network (em inglês).
Ficou com alguma dúvida? Deixe seu comentário aqui embaixo! Fique ligado no Blog da KingHost para mais novidades.
