É hora de começar a usar propriedades personalizadas CSS

Usamos pré-processadores para armazenar cores, preferências de fonte, detalhes de layout – principalmente tudo o que usamos em CSS.

Mas as variáveis ​​do pré-processador têm algumas limitações:

• Você não pode alterá-los dinamicamente.
• Eles não estão cientes da estrutura do DOM.
• Eles não podem ser lidos ou alterados do JavaScript.

Como solução para esses e outros problemas, a comunidade inventou as propriedades personalizadas do CSS. Essencialmente, eles parecem e funcionam como variáveis ​​CSS, e a maneira como funcionam é refletida em seu nome.

Propriedades personalizadas estão abrindo novos horizontes para o desenvolvimento web.

Sintaxe para declarar e usar propriedades personalizadas

O problema comum quando você começa com um novo pré-processador ou framework é que você precisa aprender uma nova sintaxe.

Cada pré-processador requer uma maneira diferente de declarar variáveis. Normalmente, começa com um símbolo reservado — por exemplo, $ em Sass e @ em LESS.

As propriedades personalizadas do CSS seguiram o mesmo caminho e usam -​- para introduzir uma declaração. Mas o bom aqui é que você pode aprender essa sintaxe uma vez e reutilizá-la nos navegadores!

Você pode perguntar: “Por que não reutilizar uma sintaxe existente?”

Há uma razão. Em suma, é fornecer uma maneira de usar propriedades personalizadas em qualquer pré-processador. Dessa forma, podemos fornecer e usar propriedades personalizadas, e nosso pré-processador não as compilará, então as propriedades irão diretamente para o CSS de saída. E , você pode reutilizar variáveis ​​de pré-processador nas nativas, mas descreverei isso mais tarde.

(Em relação ao nome: como suas ideias e propósitos são muito semelhantes, às vezes as propriedades personalizadas são chamadas de variáveis ​​CSS, embora o nome correto seja propriedades personalizadas CSS e, lendo mais, você entenderá por que esse nome as descreve melhor.)

Portanto, para declarar uma variável em vez de uma propriedade CSS usual, como color ou padding , apenas forneça uma propriedade com nome personalizado que comece com -​- :

 .box{ --box-color: #4d4e53; --box-padding: 0 10px; }

O valor de uma propriedade pode ser qualquer valor CSS válido: uma cor, uma string, um valor de layout, até mesmo uma expressão.

Aqui estão alguns exemplos de propriedades personalizadas válidas:

 :root{ --main-color: #4d4e53; --main-bg: rgb(255, 255, 255); --logo-border-color: rebeccapurple; --header-height: 68px; --content-padding: 10px 20px; --base-line-height: 1.428571429; --transition-duration: .35s; --external-link: "external link"; --margin-top: calc(2vh + 20px); /* Valid CSS custom properties can be reused later in, say, JavaScript. */ --foo: if(x > 5) this.width = 10; }

Caso você não tenha certeza do que :root corresponde, em HTML é o mesmo que html , mas com uma especificidade maior.

Tal como acontece com outras propriedades CSS, as personalizadas são cascata da mesma maneira e são dinâmicas. Isso significa que eles podem ser alterados a qualquer momento e a alteração é processada de acordo com o navegador.

Para usar uma variável, você precisa usar a função CSS var() e fornecer o nome da propriedade dentro:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; padding: var(--box-padding); } .box div{ color: var(--box-color); }

Declaração e Casos de Uso

A função var() é uma maneira prática de fornecer um valor padrão. Você pode fazer isso se não tiver certeza se uma propriedade customizada foi definida e deseja fornecer um valor a ser usado como fallback. Isso pode ser feito facilmente passando o segundo parâmetro para a função:

 .box{ --box-color:#4d4e53; --box-padding: 0 10px; /* 10px is used because --box-margin is not defined. */ margin: var(--box-margin, 10px); }

Como você pode esperar, você pode reutilizar outras variáveis ​​para declarar novas:

 .box{ /* The --main-padding variable is used if --box-padding is not defined. */ padding: var(--box-padding, var(--main-padding)); --box-text: 'This is my box'; /* Equal to --box-highlight-text:'This is my box with highlight'; */ --box-highlight-text: var(--box-text)' with highlight'; }

Operações: +, -, *, /

Como nos acostumamos com pré-processadores e outras linguagens, queremos poder usar operadores básicos ao trabalhar com variáveis. Para isso, o CSS fornece uma função calc() , que faz o navegador recalcular uma expressão após qualquer alteração no valor de uma propriedade customizada:

 :root{ --indent-size: 10px; --indent-xl: calc(2*var(--indent-size)); --indent-l: calc(var(--indent-size) + 2px); --indent-s: calc(var(--indent-size) - 2px); --indent-xs: calc(var(--indent-size)/2); }

Um problema o aguarda se você tentar usar um valor sem unidade. Novamente, calc() é seu amigo, porque sem ele, não funcionará:

 :root{ --spacer: 10; } .box{ padding: var(--spacer)px 0; /* DOESN'T work */ padding: calc(var(--spacer)*1px) 0; /* WORKS */ }

Escopo e herança

Antes de falar sobre os escopos de propriedade customizada CSS, vamos relembrar os escopos do JavaScript e do pré-processador, para entender melhor as diferenças.

Sabemos que com, por exemplo, variáveis ​​JavaScript ( var ), um escopo é limitado às funções.

Temos uma situação semelhante com let e const , mas são variáveis ​​locais de escopo de bloco.

Uma closure em JavaScript é uma função que tem acesso às variáveis ​​da função externa (inclusiva) — a cadeia de escopo. O encerramento tem três cadeias de escopo e tem acesso ao seguinte:

• seu próprio escopo (ou seja, variáveis ​​definidas entre suas chaves),
• as variáveis ​​da função externa,
• as variáveis ​​globais.

A história com pré-processadores é semelhante. Vamos usar o Sass como exemplo porque é provavelmente o pré-processador mais popular atualmente.

Com Sass, temos dois tipos de variáveis: local e global.

Uma variável global pode ser declarada fora de qualquer seletor ou construção (por exemplo, como um mixin). Caso contrário, a variável seria local.

Quaisquer blocos de código aninhados podem acessar as variáveis ​​delimitadoras (como em JavaScript).

Isso significa que, em Sass, os escopos da variável dependem totalmente da estrutura do código.

No entanto, as propriedades personalizadas do CSS são herdadas por padrão e, como outras propriedades do CSS, elas são em cascata.

Você também não pode ter uma variável global que declare uma propriedade customizada fora de um seletor — isso não é CSS válido. O escopo global para propriedades personalizadas CSS é, na verdade, o escopo :root , após o qual a propriedade está disponível globalmente.

Vamos usar nosso conhecimento de sintaxe e adaptar o exemplo Sass para HTML e CSS. Criaremos uma demonstração usando propriedades personalizadas de CSS nativas. Primeiro, o HTML:

 global <div class="enclosing"> enclosing <div class="closure"> closure </div> </div>

E aqui está o CSS:

 :root { --globalVar: 10px; } .enclosing { --enclosingVar: 20px; } .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 60px for now */ } 

As alterações nas propriedades personalizadas são aplicadas imediatamente a todas as instâncias

Até agora, não vimos como isso é diferente das variáveis ​​Sass. No entanto, vamos reatribuir a variável após seu uso:

No caso do Sass, isso não tem efeito:

 .closure { $closureVar: 30px; // local variable font-size: $closureVar +$enclosingVar+ $globalVar; // 60px, $closureVar: 30px is used $closureVar: 50px; // local variable } 

Mas em CSS, o valor calculado é alterado, porque o valor font-size é recalculado a partir do valor alterado –closureVar :

 .enclosing .closure { --closureVar: 30px; font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar)); /* 80px for now, --closureVar: 50px is used */ --closureVar: 50px; } 

Essa é a primeira grande diferença: se você reatribuir o valor de uma propriedade personalizada, o navegador recalculará todas as variáveis ​​e expressões calc() onde ela for aplicada.

Os pré-processadores não estão cientes da estrutura do DOM

Suponha que queiramos usar o font-size padrão para o bloco, exceto onde a classe highlighted estiver presente.

Aqui está o HTML:

 <div class="default"> default </div> <div class="default highlighted"> default highlighted </div>

Vamos fazer isso usando as propriedades personalizadas do CSS:

 .highlighted { --highlighted-size: 30px; } .default { --default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ font-size: var(--highlighted-size, var(--default-size)); }

Como o segundo elemento HTML com a classe default carrega a classe highlighted , as propriedades da classe highlighted serão aplicadas a esse elemento.

Neste caso, significa que –highlighted-size: 30px; será aplicado, o que, por sua vez, fará com que a propriedade font-size atribuída use o –highlighted-size .

Tudo é simples e funciona:

Agora, vamos tentar conseguir a mesma coisa usando Sass:

 .highlighted { $highlighted-size: 30px; } .default { $default-size: 10px; /* Use default-size, except when highlighted-size is provided. */ @if variable-exists(highlighted-size) { font-size: $highlighted-size; } @else { font-size: $default-size; } }

O resultado mostra que o tamanho padrão é aplicado a ambos:

Isso acontece porque todos os cálculos e processamentos do Sass acontecem em tempo de compilação e, claro, ele não sabe nada sobre a estrutura do DOM, confiando totalmente na estrutura do código.

Como você pode ver, as propriedades customizadas têm as vantagens do escopo de variáveis ​​e adicionam a cascata usual de propriedades CSS, estando ciente da estrutura do DOM e seguindo as mesmas regras das outras propriedades CSS.

A segunda conclusão é que as propriedades personalizadas do CSS estão cientes da estrutura do DOM e são dinâmicas .

Palavras-chave em todo o CSS e a propriedade all

As propriedades personalizadas de CSS estão sujeitas às mesmas regras que as propriedades personalizadas de CSS usuais. Isso significa que você pode atribuir qualquer uma das palavras-chave CSS comuns a eles:

• inherit
  Esta palavra-chave CSS aplica o valor do pai do elemento.
• initial
  Isso aplica o valor inicial conforme definido na especificação CSS (um valor vazio ou nada em alguns casos de propriedades personalizadas CSS).
• unset
  Isso aplica o valor herdado se uma propriedade for normalmente herdada (como no caso de propriedades personalizadas) ou o valor inicial se a propriedade normalmente não for herdada.
• revert
  Isso redefine a propriedade para o valor padrão estabelecido pela folha de estilo do agente do usuário (um valor vazio no caso de propriedades personalizadas CSS).

Aqui está um exemplo:

 .common-values{ --border: inherit; --bgcolor: initial; --padding: unset; --animation: revert; }

Vamos considerar outro caso. Suponha que você queira construir um componente e queira ter certeza de que nenhum outro estilo ou propriedade personalizada seja aplicado a ele inadvertidamente (uma solução CSS modular normalmente seria usada para estilos nesse caso).

Mas agora existe outra forma: usar a propriedade all CSS. Esta abreviação redefine todas as propriedades CSS.

Juntamente com as palavras-chave CSS, podemos fazer o seguinte:

 .my-wonderful-clean-component{ all: initial; }

Isso redefine todos os estilos do nosso componente.

Infelizmente, a palavra-chave all não redefine as propriedades personalizadas. Há uma discussão em andamento sobre a adição do prefixo -​- , que redefiniria todas as propriedades personalizadas do CSS.

Então, no futuro, uma redefinição completa pode ser feita assim:

 .my-wonderful-clean-component{ --: initial; /* reset all CSS custom properties */ all: initial; /* reset all other CSS styles */ }

Casos de uso de propriedades personalizadas de CSS

Há muitos usos de propriedades personalizadas. Vou mostrar o mais interessante deles.

Emular regras CSS inexistentes

O nome dessas variáveis ​​CSS é “propriedades personalizadas”, então por que não usá-las para emular propriedades inexistentes?

Existem muitos deles: translateX/Y/Z , background-repeat-x/y (ainda não compatível com vários navegadores), box-shadow-color .

Vamos tentar fazer o último funcionar. Em nosso exemplo, vamos alterar a cor da sombra da caixa ao passar o mouse. Nós apenas queremos seguir a regra DRY (não se repita), então ao invés de repetir o valor inteiro de box-shadow na seção :hover , vamos apenas mudar sua cor. Propriedades personalizadas para o resgate:

 .test { --box-shadow-color: yellow; box-shadow: 0 0 30px var(--box-shadow-color); } .test:hover { --box-shadow-color: orange; /* Instead of: box-shadow: 0 0 30px orange; */ } 

Temas de cores

Um dos casos de uso mais comuns de propriedades personalizadas é para temas de cores em aplicativos. Propriedades personalizadas foram criadas para resolver exatamente esse tipo de problema. Então, vamos fornecer um tema de cores simples para um componente (as mesmas etapas podem ser seguidas para um aplicativo).

Aqui está o código para o nosso componente de botão:

 .btn { background-image: linear-gradient(to bottom, #3498db, #2980b9); text-shadow: 1px 1px 3px #777; box-shadow: 0px 1px 3px #777; border-radius: 28px; color: #ffffff; padding: 10px 20px 10px 20px; }

Vamos supor que queremos inverter o tema de cores.

O primeiro passo seria estender todas as variáveis ​​de cor para as propriedades personalizadas do CSS e reescrever nosso componente. Assim, o resultado seria o mesmo:

 .btn { --shadow-color: #777; --gradient-from-color: #3498db; --gradient-to-color: #2980b9; --color: #ffffff; background-image: linear-gradient( to bottom, var(--gradient-from-color), var(--gradient-to-color) ); text-shadow: 1px 1px 3px var(--shadow-color); box-shadow: 0px 1px 3px var(--shadow-color); border-radius: 28px; color: var(--color); padding: 10px 20px 10px 20px; }

Isso tem tudo que precisamos. Com ele, podemos substituir as variáveis ​​de cor pelos valores invertidos e aplicá-los quando necessário. Poderíamos, por exemplo, adicionar a classe HTML inverted global (para, digamos, o elemento body ) e alterar as cores quando ela for aplicada:

 body.inverted .btn{ --shadow-color: #888888; --gradient-from-color: #CB6724; --gradient-to-color: #D67F46; --color: #000000; }

Abaixo está uma demonstração na qual você pode clicar em um botão para adicionar e remover uma classe global:

Esse comportamento não pode ser obtido em um pré-processador CSS sem a sobrecarga de duplicar o código. Com um pré-processador, você sempre precisa substituir os valores e regras reais, o que sempre resulta em CSS adicional.

Com as propriedades customizadas do CSS, a solução é o mais limpa possível, evitando-se copiar e colar, pois apenas os valores das variáveis ​​são redefinidos.

Usando propriedades personalizadas com JavaScript

Anteriormente, para enviar dados de CSS para JavaScript, muitas vezes tínhamos que recorrer a truques, escrevendo valores CSS por meio de JSON simples na saída CSS e depois lendo-os do JavaScript.

Agora, podemos interagir facilmente com variáveis ​​CSS do JavaScript, lendo e gravando nelas usando os conhecidos .getPropertyValue() e .setProperty() , que são usados ​​para as propriedades CSS usuais:

 /** * Gives a CSS custom property value applied at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color'); */ function readCssVar(element, varName){ const elementStyles = getComputedStyle(element); return elementStyles.getPropertyValue(`--${varName}`).trim(); } /** * Writes a CSS custom property value at the element * element {Element} * varName {String} without '--' * * For example: * readCssVar(document.querySelector('.box'), 'color', 'white'); */ function writeCssVar(element, varName, value){ return element.style.setProperty(`--${varName}`, value); }

Vamos supor que temos uma lista de valores de consulta de mídia:

 .breakpoints-data { --phone: 480px; --tablet: 800px; }

Como só queremos reutilizá-los em JavaScript — por exemplo, em Window.matchMedia() — podemos obtê-los facilmente de CSS:

 const breakpointsData = document.querySelector('.breakpoints-data'); // GET const phoneBreakpoint = getComputedStyle(breakpointsData) .getPropertyValue('--phone');

Para mostrar como atribuir propriedades personalizadas do JavaScript, criei uma demonstração interativa de cubo CSS 3D que responde às ações do usuário.

Não é muito difícil. Precisamos apenas adicionar um plano de fundo simples e, em seguida, colocar cinco faces de cubo com os valores relevantes para a propriedade transform : translateZ() , translateY() , rotateX() e rotateY() .

Para fornecer a perspectiva correta, adicionei o seguinte ao wrapper da página:

 #world{ --translateZ:0; --rotateX:65; --rotateY:0; transform-style:preserve-3d; transform: translateZ(calc(var(--translateZ) * 1px)) rotateX(calc(var(--rotateX) * 1deg)) rotateY(calc(var(--rotateY) * 1deg)); }

A única coisa que falta é a interatividade. A demonstração deve alterar os ângulos de visualização X e Y ( –rotateX e –rotateY ) quando o mouse se move e deve aumentar e diminuir o zoom quando o mouse rola ( –translateZ ).

Aqui está o JavaScript que faz o truque:

 // Events onMouseMove(e) { this.worldXAngle = (.5 - (e.clientY / window.innerHeight)) * 180; this.worldYAngle = -(.5 - (e.clientX / window.innerWidth)) * 180; this.updateView(); }; onMouseWheel(e) { /*…*/ this.worldZ += delta * 5; this.updateView(); }; // JavaScript -> CSS updateView() { this.worldEl.style.setProperty('--translateZ', this.worldZ); this.worldEl.style.setProperty('--rotateX', this.worldXAngle); this.worldEl.style.setProperty('--rotateY', this.worldYAngle); };

Agora, quando o usuário move o mouse, a demonstração altera a visualização. Você pode verificar isso movendo o mouse e usando a roda do mouse para aumentar e diminuir o zoom:

Essencialmente, acabamos de alterar os valores das propriedades personalizadas do CSS. Todo o resto (a rotação e o zoom in e out) é feito por CSS.

Dica: Uma das maneiras mais fáceis de depurar um valor de propriedade personalizada CSS é apenas mostrar seu conteúdo no conteúdo gerado por CSS (que funciona em casos simples, como com strings), para que o navegador mostre automaticamente o valor aplicado atual:

 body:after { content: '--screen-category : 'var(--screen-category); }

Você pode verificá-lo na demonstração de CSS simples (sem HTML ou JavaScript). (Redimensione a janela para ver o navegador refletir automaticamente o valor da propriedade customizada CSS alterada.)

Suporte ao navegador

As propriedades personalizadas CSS são suportadas em todos os principais navegadores:

Isso significa que você pode começar a usá-los nativamente.

Se você precisar oferecer suporte a navegadores mais antigos, poderá aprender a sintaxe e os exemplos de uso e considerar possíveis maneiras de alternar ou usar CSS e variáveis ​​de pré-processador em paralelo.

Claro, precisamos ser capazes de detectar suporte em CSS e JavaScript para fornecer fallbacks ou aprimoramentos.

Isso é bem fácil. Para CSS, você pode usar uma condição @supports com uma consulta de recurso fictícia:

 @supports ( (--a: 0)) { /* supported */ } @supports ( not (--a: 0)) { /* not supported */ }

Em JavaScript, você pode usar a mesma propriedade customizada fictícia com o método estático CSS.supports() :

 const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ }

Como vimos, as propriedades personalizadas do CSS ainda não estão disponíveis em todos os navegadores. Sabendo disso, você pode aprimorar progressivamente seu aplicativo verificando se eles são suportados.

Por exemplo, você pode gerar dois arquivos CSS principais: um com propriedades personalizadas de CSS e um segundo sem elas, no qual as propriedades são embutidas (discutiremos maneiras de fazer isso em breve).

Carregue o segundo por padrão. Em seguida, basta fazer uma verificação no JavaScript e alternar para a versão aprimorada se as propriedades personalizadas forem suportadas:

 <!-- HTML --> <link href="without-css-custom-properties.css" rel="stylesheet" type="text/css" media="all" />

 // JavaScript if(isSupported){ removeCss('without-css-custom-properties.css'); loadCss('css-custom-properties.css'); // + conditionally apply some application enhancements // using the custom properties }

Este é apenas um exemplo. Como você verá abaixo, existem opções melhores.

Como começar a usá-los

De acordo com uma pesquisa recente, o Sass continua sendo o pré-processador de escolha para a comunidade de desenvolvimento.

Então, vamos considerar maneiras de começar a usar as propriedades personalizadas do CSS ou prepará-las usando o Sass.

Temos algumas opções.

1. Verifique manualmente o código para suporte

Uma vantagem desse método de verificar manualmente no código se as propriedades personalizadas são suportadas é que ele funciona e podemos fazê-lo agora (não esqueça que mudamos para Sass):

 $color: red; :root { --color: red; } .box { @supports ( (--a: 0)) { color: var(--color); } @supports ( not (--a: 0)) { color: $color; } }

Este método tem muitos contras, entre os quais o código fica complicado, e copiar e colar torna-se bastante difícil de manter.

2. Use um plug-in que processe automaticamente o CSS resultante

O ecossistema PostCSS fornece dezenas de plugins hoje. Alguns deles processam propriedades personalizadas (valores embutidos) na saída CSS resultante e as fazem funcionar, supondo que você forneça apenas variáveis ​​globais (ou seja, você só declara ou altera propriedades personalizadas de CSS dentro do(s) seletor(es) :root ), então seus valores pode ser facilmente embutido.

Um exemplo é postcss-custom-properties.

Este plugin oferece vários prós: Faz a sintaxe funcionar; é compatível com toda a infraestrutura do PostCSS; e não requer muita configuração.

Há contras, no entanto. O plug-in exige que você use propriedades personalizadas CSS, para que você não tenha um caminho para preparar seu projeto para uma mudança de variáveis ​​Sass. Além disso, você não terá muito controle sobre a transformação, porque ela é feita após o Sass ser compilado para CSS. Finalmente, o plugin não fornece muitas informações de depuração.

3. Mixagem de css-vars

Comecei a usar propriedades personalizadas CSS na maioria dos meus projetos e tentei muitas estratégias:

• Mude de Sass para PostCSS com cssnext.
• Mude de variáveis ​​Sass para propriedades customizadas de CSS puro.
• Use variáveis ​​CSS no Sass para detectar se elas são suportadas.

Como resultado dessa experiência, comecei a procurar uma solução que atendesse aos meus critérios:

• Deve ser fácil começar a usar com Sass.
• Deve ser simples de usar e a sintaxe deve estar o mais próximo possível das propriedades personalizadas CSS nativas.
• Alternar a saída CSS dos valores embutidos para as variáveis ​​CSS deve ser fácil.
• Um membro da equipe que esteja familiarizado com as propriedades personalizadas do CSS poderá usar a solução.
• Deve haver uma maneira de ter informações de depuração sobre casos extremos no uso de variáveis.

Como resultado, criei o css-vars, um mixin Sass que você pode encontrar no Github. Ao usá-lo, você pode começar a usar a sintaxe de propriedades personalizadas CSS.

Usando css-vars Mixin

Para declarar variáveis, use o mixin da seguinte forma:

 $white-color: #fff; $base-font-size: 10px; @include css-vars(( --main-color: #000, --main-bg: $white-color, --main-font-size: 1.5*$base-font-size, --padding-top: calc(2vh + 20px) ));

Para usar essas variáveis, use a função var() :

 body { color: var(--main-color); background: var(--main-bg, #f00); font-size: var(--main-font-size); padding: var(--padding-top) 0 10px; }

Isso lhe dá uma maneira de controlar toda a saída CSS de um lugar (do Sass) e começar a se familiarizar com a sintaxe. Além disso, você pode reutilizar variáveis ​​e lógica Sass com o mixin.

Quando todos os navegadores aos quais você deseja oferecer suporte funcionam com variáveis ​​CSS, tudo o que você precisa fazer é adicionar isto:

 $css-vars-use-native: true;

Em vez de alinhar as propriedades variáveis ​​no CSS resultante, o mixin começará a registrar propriedades personalizadas e as instâncias var() irão para o CSS resultante sem nenhuma transformação. Isso significa que você mudará totalmente para as propriedades personalizadas do CSS e terá todas as vantagens que discutimos.

Se você quiser ativar as informações úteis de depuração, adicione o seguinte:

 $css-vars-debug-log: true;

Isso lhe dará:

• um log quando uma variável não foi atribuída, mas foi usada;
• um log quando uma variável é reatribuída;
• informações quando uma variável não é definida, mas um valor padrão é passado e é usado em seu lugar.

Conclusão

Agora você sabe mais sobre as propriedades personalizadas do CSS, incluindo sua sintaxe, suas vantagens, bons exemplos de uso e como interagir com elas a partir do JavaScript.

Você aprendeu como detectar se elas são suportadas, como elas são diferentes das variáveis ​​do pré-processador CSS e como começar a usar as variáveis ​​CSS nativas até que elas sejam suportadas nos navegadores.

Este é o momento certo para começar a usar as propriedades personalizadas do CSS e se preparar para o suporte nativo nos navegadores.