Já é uma realidade. Podemos finalmente utilizar as Propriedades Personalizadas ou CSS Custom Properties!
Mas antes de mais, vamos começar com um bom <h2>, seguido de um <p> introdutório.
As CSS Custom Properties ou Propriedades Personalizadas
Ou como fazer magia numa folha de estilos CSS.
As Propriedades Personalizadas de CSS são um conceito “novo” na utilização de folhas de estilo. Em resumo, trata-se da utilização de variáveis acessíveis em todo o documento CSS e até via Javascript, de forma NATIVA.
Porquê o “novo” entre aspas? Provavelmente já conheces os pré-processadores CSS. Foram bastante populares, mas com o surgimento das Custom Properties e à medida que os browsers vão suportando esta funcionalidade, o seu desaparecimento é apenas uma questão de tempo. No final do artigo encontras uma tabela de compatibilidade entre navegadores, mas posso já adiantar que cerca de 70% dos utilizadores já têm browsers compatíveis com Propriedades Personalizadas.
CSS e as Propriedades Personalizadas
Para perceberes a diferença face a uma folha de estilos CSS tradicional, vejamos um exemplo de CSS sem recurso a Custom Properties e, de seguida, a “tradução” usando variáveis.
Imagina que queremos um body com uma cor de fundo específica, que depois será usada como cor do texto numa camada, e também vamos usar a cor do texto do body como fundo dessa camada.
A .capa1 terá um padding de 20px, o mesmo valor que será usado como margin-top na .capa2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Agora, vamos replicar o mesmo exemplo, mas desta vez utilizando Propriedades Personalizadas.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Através de :root declaramos as variáveis, que ficam disponíveis em todo o CSS. Usamos dois traços — para definir uma variável e o seu valor. Depois, para utilizar as variáveis, basta recorrer a var(–VARIÁVEL);.
Agora imagina o potencial disto numa folha de estilos com mais de 1000 linhas de código e a facilidade de manutenção: basta alterar um valor para que a mudança se propague por todo o CSS.
Um passo além
Ou dois. Porque as CSS Custom Properties permitem-nos fazer cálculos, operações condicionais e definir valores por defeito caso uma variável não esteja definida. Parece Javascript, não é? Mas tudo isto é feito diretamente no CSS.
Podemos somar, multiplicar, comparar valores e aplicar diferentes resultados consoante a condição.
.caja{
/*Se a variável1 não estiver definida, aplica 10px*/
margin-top:var(--variable1, 10px);
/*Também podemos usar variáveis para definir valores por defeito*/
padding-top:var(--variable1,var(--variable2));
/*Podemos somar, subtrair, multiplicar e dividir (*atenção ao espaço na soma e subtração)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Outros exemplos:
:root{
/*Podemos criar texto para inserir num :before mais tarde*/
--texto:"Clique para ver";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*Podemos acrescentar texto após a variável (por exemplo, um link para projeto)*/
content:var(--text)' o nosso projeto completo';
}
.caja2:before{
/*Agora usamos para um link para uma notícia*/
content:var(--text)' a nossa notícia';
}
Exemplo condicional:
:root{
/*Podemos aceder via Javascript*/
--variableCond: if(x > 5) this.width = 10;
}
Compatibilidade entre navegadores
Como podes ver, praticamente todos os browsers suportam… Exceto o Explorer! Que surpresa, NEM QUERIA ACREDITAR! Só para recordar aqueles maravilhosos anos em que era preciso fazer malabarismos para o Explorer 6.
Felizmente, ao contrário de antigamente, agora menos de 4% dos utilizadores ainda usam o Explorer. Nada de grave.
Atualmente, 70,9% dos utilizadores já têm browsers compatíveis com Custom Properties. Um valor bastante elevado.
