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 parecidas com a implementação de variáveis ​​do próprio CSS. No entanto, quando usados ​​corretamente, eles podem ser muito mais do que apenas variáveis.

As propriedades personalizadas CSS permitem que você:

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

Embora o suporte para propriedades personalizadas CSS seja um um caminho pedregoso no momento , e alguns navegadores os suportam sob sinalizadores que precisam ser ativados ou definidos como verdadeiros de antemão, seu suporte deve aumentar drasticamente no futuro, por isso é importante entender como usá-los e aproveitá-los. ¹

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

A variável CSS original e menos poderosa

Antes de começarmos a discutir as propriedades personalizadas do CSS, deve-se observar que há muito tempo o CSS teve uma espécie de variável, que é currentColor palavra-chave. Isso raramente é usado, mas amplamente apoiado variável, refere-se ao valor da cor atual de um elemento. Ele pode ser usado em qualquer declaração que aceite um color valor, e em cascata perfeitamente.

as empresas decidem quanto investir, comparando a taxa de retorno de seus projetos com

Vamos dar uma olhada em um exemplo:

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

Além de cascatear, 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 que não estava na especificação como uma variável em si, é que ele só aceita o valor da propriedade de cor, 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 o escopo definido para um determinado seletor, se necessário.

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

A especificação atual para propriedades customizadas 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 inteiros, se necessário (por exemplo, quando você precisar usar o mesmo divisor ou multiplicador).

um problema de segurança de e-mail que pode ser evitado é

A sintaxe para propriedades personalizadas 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 palestra incrível, Variáveis ​​CSS: var (–subtitle) :

Eles funcionam exatamente da mesma maneira que qualquer outra propriedade CSS [...]. Muitas pessoas me perguntam por que não usamos um cifrão [cifrão] ou algo parecido e o motivo pelo qual não usamos um cifrão [cifrão] é que queremos que as pessoas sejam capazes de usar SASS ou variáveis ​​de pré-processador e Variáveis ​​CSS. Ambos são coisas diferentes, alcançam 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 não pode fazer com variáveis ​​CSS, então queremos que as pessoas possam usar ambos na mesma folha de estilo, então você pode imaginar a sintaxe traço-traço como uma propriedade de prefixo com um prefixo vazio.

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

É importante 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 é 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 é compilado para CSS da seguinte maneira:

.corners { border-radius: 30px; }

Você pode ver que ambas as propriedades dentro de :root e o media a consulta se perde após a compilação, porque as variáveis ​​SASS não podem existir dentro de um arquivo CSS (ou, para ser mais preciso, podem ser forçadas a existir em um arquivo CSS, mas são ignoradas porque algumas de suas sintaxes são CSS inválidas), então a variável é o valor 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 realizada):

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

Obviamente, nada muda, uma vez que não compilamos / transpilamos nada, e o valor da propriedade personalizada pode ser atualizado dinamicamente. Portanto, por exemplo, se alterarmos o valor de --value usando algo como JavaScript, o valor será atualizado em cada instância onde for chamado usando a função var ().

c ++ da maneira mais difícil

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

Lea Verou dá um exemplo usando clip-path propriedade. Começamos definindo o valor da propriedade que queremos prefixar como initial mas use uma propriedade personalizada e prossiga para definir 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ê gostaria de saber um pouco mais sobre isso, confira o artigo completo de Lea sobre autoprefixing com variáveis ​​CSS .

100 principais escritórios familiares individuais

Propriedades personalizadas de CSS à prova de balas

Como foi mencionado, o suporte do navegador para propriedades personalizadas CSS ainda não é padronizado. Então, como isso pode ser superado?

É aqui que PostCSS, e seu plugin, postcss-css-variables , entra em jogo.

Caso você esteja se perguntando o que é PostCSS, verifique meu artigo PostCSS: nova data de jogo do SASS e volte a isso quando terminar. Você terá então uma ideia básica do que pode fazer com esta ferramenta incrível e não se sentirá desorientado ao ler o resto do artigo.

Com o postcss-css-variables plugin e seu preserve opção definida como verdadeira, podemos manter todos os var() declarações de função na saída e têm o valor calculado como uma declaração de fallback. Ele também mantém o --var calculado | declarações. Lembre-se de que, usando este plug-in 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 sem pré / pós-processador de usar variáveis ​​CSS, pode sempre verificar o suporte atual manualmente com o CSS @support governar 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 mudá-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 o --text-color e --background-color propriedades personalizadas 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 das propriedades personalizadas CSS, alguns casos de uso interessantes surgiram. 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 as 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 calc() totalmente dinâmico | funções 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.

dicas e truques para apresentações em PowerPoint

Respire uma nova vida em seus arquivos CSS

As propriedades personalizadas de CSS são uma forma 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 obter o máximo dele.

1. Nota: como Lea Verou apontou em 22 de abril, as propriedades personalizadas agora são suportadas por padrão em quase todos os principais navegadores, sem a necessidade de alternar um sinalizador. Seu uso para produção é seguro, a menos que seja necessário suporte para versões de navegadores mais antigas.