CSS com variáveis

Esse é um assunto em que as opiniões se dividem. Há quem defenda que CSS não deve ter variáveis porque não é uma linguagem de programação. O fato é que, à medida que um site requer arquivos CSS mais extensos, torna-se mais evidente a necessidade de utilizar recursos para simplificar o código.

Less é uma das ténicas para tornar o CSS dinâmico com variáveis e funções. O uso dessa e outras técnicas requer etapas adicionais em algum momento da codificação. Por isso o ideal é que esses recursos façam parte da especificação da linguagem.

O W3C tem uma proposta para adicionar variáveis[1] ao CSS que está sendo implementada no engine[2] Webkit, utilizado pelos navegadores Google Chrome, Safari e outros[3].

Declaração da variável

:root { 
    var-cor-base: #06C;
}

Utilização

.elemento { 
    color: var(cor-base);
}

No entanto, ainda é necessário utilizar o prefixo -webkit-.

Declaração da variável

:root { 
    -webkit-var-cor-base: #06C; 
}

Utilização

.elemento { 
    -webkit-color: var(cor-base); 
}

À medida que os engines dos principais navegadores implementarem variáveis, o uso dos prefixos irá se tornar desnecessário. Isso não deve ocorrer tão rápido, mas as especificações do W3C já vão em direção ao uso das variáveis.

[1] W3: CSS Variables
[2] Engine: componente de software que combina o conteúdo (HTML, XML, arquivos de imagem, etc) com informações de formatação (CSS, XSL, etc) para exibir o conteúdo formatado na tela.
[3] Wikipedia: List of Browsers

Publicado por Tatiane Pires

tatianepires.com.br

Enviar comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s