Utilizando CSS Variables (Custom Properties)


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

e acessados através da função

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:

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:

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:

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.

Pode-se, inclusive, usar o valor de uma propriedade dentro de outra propriedade, utilizando var().

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.

Resumo
Utilizando CSS Variables (Custom Properties)
Nome do Artigo
Utilizando CSS Variables (Custom Properties)
Descrição
Entenda neste post o conceito de CSS Variables, seus recursos avançados e saiba informações detalhadas sobre suporte.
Autor
Nome
KingHost
Logo
Rodrigo Hahn

Rodrigo Hahn

Creates software at KingHost. Has a theoretical degree in physics.
Rodrigo Hahn

Últimos posts por Rodrigo Hahn (exibir todos)

Comentários

comentário(s)