Torne seu CSS dinâmico com propriedades personalizadas de CSS

Se você já escreve CSS há algum tempo, deve ter sentido em algum momento a necessidade de variáveis. As propriedades personalizadas do CSS são como a própria implementação de variáveis ​​do CSS. No entanto, quando usados ​​corretamente, eles podem ser muito mais do que apenas variáveis.

As propriedades personalizadas de CSS permitem que você:

• Atribua valores arbitrários a uma propriedade com um nome de sua escolha
• Use a função var() para usar esses valores em outras propriedades

Embora o suporte para propriedades personalizadas CSS seja um pouco difícil no momento, e alguns navegadores os suportem sob sinalizadores que precisam ser ativados ou definidos como verdadeiros antecipadamente, espera-se que seu suporte aumente drasticamente no futuro, por isso é importante entender como usá-los e aproveitá-los. ¹

Neste artigo, você aprenderá como usar CSS Custom Properties para tornar suas folhas de estilo um pouco mais dinâmicas, talvez tornando obsoleta aquela etapa extra Sass/LESS em seu pipeline de ativos.

A variável CSS original e menos poderosa

Antes de começarmos a discutir as propriedades personalizadas do CSS, deve-se notar que há muito tempo o CSS tem um tipo de variável, e essa é a palavra-chave currentColor . Esta variável raramente usada, mas amplamente suportada, refere-se ao valor de cor atual de um elemento. Ele pode ser usado em qualquer declaração que aceite um valor de color e cai em cascata perfeitamente.

Vejamos um exemplo:

 .element { color: blue; border: 2px solid currentColor; /* Sets a solid, 2px wide, blue border to the element */ }

Além de cascata, isso também pode produzir o seguinte:

 .element span { background: currentColor; /* Sets a blue background color for every span child of .element, unless a color property is declared in this same block */ } .element span.red { color: red; /* Sets a red background color for every span child of .element that has the class .red, since currentColor is applied to the background of every span child of .element no matter if they have the .red class or not */ }

O principal problema com currentColor , além do fato de não estar na especificação como variável per se, é que ele aceita apenas o valor da propriedade color, o que pode dificultar o trabalho em alguns casos.

Variáveis ​​CSS completas

Uma das principais vantagens de usar pré/pós-processadores CSS é que eles permitem que os valores sejam armazenados em uma palavra-chave e tenham escopo para um determinado seletor, se necessário.

Depois de muito pedido pelos desenvolvedores, foi escrito um rascunho para uma interpretação de variáveis ​​nativas para CSS. Elas são formalmente chamadas de propriedades personalizadas de CSS, mas às vezes também são chamadas de variáveis ​​de CSS.

A especificação atual para propriedades customizadas de CSS nativas cobre todos os mesmos comportamentos das variáveis ​​de pré/pós-processador. Isso permite que você armazene códigos de cores, tamanhos com todas as unidades conhecidas ou apenas números inteiros, se necessário (por exemplo, quando você precisa usar o mesmo divisor ou multiplicador).

A sintaxe para propriedades personalizadas de CSS é um pouco estranha em comparação com outras linguagens, mas faz muito sentido se você comparar sua sintaxe com outros recursos no mesmo ecossistema CSS:

 :root { --color-black: #2e2e2e; } .element { background: var(--color-black); }

Agora, você pode estar pensando: “Que tipo de sintaxe é essa!?”

Bem, Lea Verou explica o motivo dessa sintaxe “traço-traço” com absoluta simplicidade, como ela diz em sua incrível palestra, Variáveis ​​CSS: var(–subtitle):

Eles funcionam exatamente da mesma forma que qualquer outra propriedade CSS [...]. Muitas pessoas me perguntam por que não usamos um cifrão ou algo assim e a razão pela qual não usamos um cifrão é porque queremos que as pessoas possam usar SASS ou variáveis ​​de pré-processador e Variáveis ​​CSS. Ambos são coisas diferentes, eles atingem objetivos diferentes, há coisas que você pode fazer com variáveis ​​CSS que você absolutamente não pode fazer com SASS, e há coisas que você pode fazer com variáveis ​​SASS que você não pode fazer com variáveis ​​CSS, então nós queremos pessoas possam usar os dois na mesma folha de estilo, para que você possa imaginar a sintaxe traço-traço como uma propriedade de prefixo com um prefixo vazio.

Podemos recuperar o valor da propriedade customizada usando a função var() , que podemos usar em qualquer lugar, exceto para seletores, nomes de propriedades ou declarações de consulta de mídia.

Vale a pena notar que, enquanto as variáveis ​​de pré/pós-processador são usadas apenas em tempo de compilação, as variáveis ​​CSS podem ser usadas e atualizadas dinamicamente. O que isto significa? Isso significa que eles são preservados na folha de estilo CSS real. Portanto, a noção de que são variáveis ​​permanecerá mesmo depois que as folhas de estilo forem compiladas.

Para deixar mais claro, deixe-me ilustrar a situação usando alguns exemplos. O seguinte bloco de código faz parte de uma folha de estilo SASS:

 :root { $value: 30px; } @media screen and (min-width: 768px) { $value: 60px; } .corners { border-radius: $value; }

Este snippet de declarações e regras SASS compila para CSS da seguinte forma:

 .corners { border-radius: 30px; }

Você pode ver que tanto as propriedades dentro de :root quanto a media query se perdem após a compilação, porque as variáveis ​​SASS não podem existir dentro de um arquivo CSS (ou, para ser mais preciso, elas podem ser forçadas a existir em um arquivo CSS, mas são ignoradas já que parte de sua sintaxe é CSS inválido), então o valor da variável não pode ser atualizado posteriormente.

Agora vamos considerar o mesmo caso, mas aplicado usando apenas Variáveis ​​CSS sem pré/pós-processador CSS aplicado (ou seja, sem nenhuma transpilação ou compilação sendo executada):

 :root { --value: 30px; } @media screen and (min-width: 768px) { --value: 60px; } .corners { border-radius: var(--value); }

Obviamente, nada muda, pois não compilamos/transpilamos nada, e o valor da propriedade customizada pode ser atualizado dinamicamente. Assim, por exemplo, se alterarmos o valor de --value usando algo como JavaScript, o valor será atualizado em todas as instâncias em que for chamado usando a função var().

Os recursos das propriedades personalizadas tornam esse recurso tão poderoso que você pode até fazer coisas como prefixo automático.

Lea Verou dá um exemplo usando a propriedade clip-path . Começamos definindo o valor da propriedade que queremos prefixar como initial , mas usamos uma propriedade personalizada e, em seguida, definimos o valor de cada propriedade prefixada para o valor da propriedade personalizada:

 * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

Depois disso, tudo o que resta é alterar o valor da propriedade personalizada dentro de um seletor:

 header { --clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.5em), 0% 100%); }

Se você quiser saber um pouco mais sobre isso, confira o artigo completo de Lea sobre prefixação automática com variáveis ​​CSS.

Propriedades personalizadas de CSS à prova de balas

Como foi mencionado, o suporte do navegador para CSS Custom Properties ainda não é padrão. Então, como isso pode ser superado?

É aqui que o PostCSS e seu plugin, postcss-css-variables, entram em ação.

Caso você esteja se perguntando o que é PostCSS, confira meu artigo PostCSS: SASS's New Play Date, e volte a isso depois de terminar. Você terá então uma ideia básica do que pode fazer com essa ferramenta incrível e não se sentirá desorientado ao ler o restante do artigo.

Com o postcss-css-variables e sua opção preserve definida como true, podemos manter todas as declarações da função var() na saída e ter o valor calculado como uma declaração de fallback. Ele também mantém as declarações --var computadas. Tenha em mente que, usando este plugin PostCSS, as propriedades personalizadas podem ser atualizadas dinamicamente após o processo de transpilação, mas os valores de fallback permanecerão os mesmos, a menos que sejam especificamente direcionados e explicitamente alterados individualmente.

Se você está procurando uma maneira livre de pré/pós-processador de usar variáveis ​​CSS, você sempre pode verificar o suporte atual manualmente com a regra CSS @support e aplicar um fallback adequado quando o suporte for irregular ou inexistente. Por exemplo:

 :root { --color-blue: #1e90ff; /* hex value for dodgerblue color */ } .element { background: var(--color-blue); } @supports (not(--value: 0)) { /* CSS variables not supported */ .element { background: dodgerblue; } }

Alterando o valor de uma propriedade personalizada usando JavaScript

Eu mencionei ao longo de todo este artigo que as variáveis ​​podem ser atualizadas usando JavaScript, então vamos entrar nisso.

Digamos que você tenha um tema claro e queira alterá-lo para um tema escuro, supondo que você tenha algum CSS como o seguinte:

 :root { --text-color: black; --background-color: white; } body { color: var(--text-color); background: var(--background-color); }

Você pode atualizar as propriedades personalizadas --text-color e --background-color fazendo o seguinte:

 var bodyStyles = document.body.style; bodyStyles.setProperty('--text-color', 'white'); bodyStyles.setProperty('--background-color', 'black');

Casos de uso interessantes

Ao longo dos anos de desenvolvimento e discussão sobre as especificações de CSS Custom Properties, surgiram alguns casos de uso interessantes. Aqui estão alguns exemplos:

Temas: Usar um conjunto de temas para um site é bastante fácil ao implementar variáveis ​​CSS. Quer uma variação clara ou escura do seu estilo atual? Basta alterar o valor de algumas propriedades personalizadas usando JavaScript e pronto.

Ajustes de espaçamento: Precisa ajustar o espaçamento de um site, digamos, uma calha entre colunas? Altere o valor de uma única variável CSS e veja essa alteração refletida em todo o site.

Funções calc() totalmente dinâmicas: Agora você pode ter funções calc() totalmente dinâmicas usando propriedades personalizadas dentro dessas funções, eliminando a necessidade de fazer cálculos complicados ou efêmeros dentro do JavaScript e, em seguida, atualizar esses valores manualmente em cada instância.

Dê uma nova vida aos seus arquivos CSS

As propriedades personalizadas de CSS são uma maneira poderosa e inovadora de dar mais vida às suas folhas de estilo, introduzindo valores completamente dinâmicos pela primeira vez em CSS.

A especificação está atualmente sob o status de Recomendação de Candidato, o que significa que a padronização está chegando, um bom motivo para mergulhar fundo nesse recurso e tirar o máximo proveito dele.