Resumo

  • O primeiro rascunho público CSS Variables do W3C, de 10 de abril de 2012, tratou do custo de repetir cores e outros valores; sua escrita inicial usava var-color e referências var(color) sob as regras da cascata.
  • A Recomendação Candidata de 3 de dezembro de 2015 adotou --main-color e var(--main-color). O texto candidato de 16 de junho de 2022 detalhou valores de reserva e referências ausentes ou circulares. A cor geral desce pelo documento até um componente decidir outra coisa.

A editora pediu para suavizar o bordô. O problema não era escolher a amostra de cor, mas localizar todas as cópias da anterior. Um botão, vários links, um aviso e um título esquecido desde a última reforma mantinham o mesmo valor escrito em lugares diferentes. Trocar trinta ocorrências era possível; esquecer a trigésima primeira também. O site terminaria parecendo uma reunião em que parte da equipe não leu o recado. As variáveis CSS propuseram um mensageiro mais confiável: um nome para o valor, consultado onde ele for necessário.

O primeiro rascunho público CSS Variables do W3C, de 10 de abril de 2012, descrevia essa dor de manutenção. Folhas grandes repetem cores e outras medidas; um buscar e substituir pode atingir usos sem relação ou deixar arquivos de fora. O texto permitia definir propriedades com nomes escolhidos pelo autor e consultá-las dentro dos valores normais de CSS. Seu exemplo punha uma cor na raiz do documento. Os descendentes a recebiam segundo as regras habituais da cascata. O navegador entregava o recado ao endereço certo, em vez de fazer uma substituição cega de caracteres.

A escrita de 2012 pertence à época. O rascunho dizia var-color e lia var(color). No exemplo, a raiz trazia uma cor, um div definia outra e um alerta mudava novamente. O mesmo nome podia produzir aparências distintas conforme a posição do elemento. A direção da casa mandava a circular; uma equipe local afixava uma resposta na própria porta. Era exatamente essa combinação de herança e mudança local que tornava o nome útil.

Nomes também podem começar uma conversa sem fim. O rascunho mostrava uma variável referindo-se a outra, que devolvia a referência à primeira. A dependência circular criava valores inválidos. Pergunte à primeira qual cor usar, e ela manda perguntar à segunda; a segunda aponta de volta. Não há um balde de tinta escondido na última sala. O navegador aplica as regras do valor calculado, e a declaração que dependia da cadeia sente o resultado. A facilidade de manutenção traz um mapa de dependências para inspecionar.

Na Recomendação Candidata do W3C de 3 de dezembro de 2015, aparece a grafia conhecida: --main-color define a propriedade personalizada; var(--main-color) a consulta. O exemplo estabelece uma cor principal na raiz e a usa em outras regras, inclusive num fundo derivado. Quando a cor nomeada muda, os lugares que dela dependem acompanham. A redação pode revisar o bordô sem vasculhar gaveta por gaveta.

A cascata, porém, escolhe os destinatários. Se um componente define seu próprio --main-color, seus descendentes recebem esse valor local. O site continua bordô e o painel de assinatura fica verde-azulado. Quando um botão aparece com uma cor inesperada, a primeira definição encontrada numa busca não encerra a investigação. É preciso ver qual declaração venceu para aquele elemento depois da cascata e da herança. Um nome compartilhado não apaga os endereços locais.

O texto candidato do W3C de 16 de junho de 2022 explicou o que fazer quando o recado não chega. Em var(--header-color, blue), o segundo argumento fornece um valor de reserva. Um componente reutilizável pode levar sua própria cor padrão e aceitar outra oferecida pela aplicação maior. A especificação esclarece que a reserva pode conter vírgulas: tudo depois da primeira vírgula separadora pertence a ela. O visitante traz casaco, mas aceita usar o que a casa lhe empresta.

Referências ausentes e circulares podem se revelar na hora de calcular o valor. O navegador lê uma declaração com var() antes de saber qual conteúdo será substituído. Se a propriedade escolhida faltar ou for inválida e não houver reserva adequada, a declaração dependente perde o resultado pretendido. A pergunta diante de uma cor surpreendente é concreta: ela veio da raiz, de uma regra local, da reserva ou da perda de uma declaração? O estilo calculado do elemento conta o que a busca textual sozinha não conta.

As três publicações mostram uma história de mudanças na linguagem. O rascunho de 2012 usava var-color e var(color); o candidato de 2015 usava --main-color e var(--main-color); o retrato candidato de 2022 detalhava reservas e valores inválidos. Uma página antiga de exemplo não serve automaticamente de manual para uma folha nova. O princípio que atravessou as versões é mais estável: nomear um valor, fazê-lo seguir a cascata e permitir resposta diferente num ramo do documento.

A editora passou a decidir onde a cor comum deve parar. O bordô na raiz dá unidade ao site. Um alerta pode precisar de outro tom. Um módulo que viaja entre páginas leva uma reserva no bolso. O navegador faz a distribuição e a conta; a redação julga se o resultado ainda parece a mesma publicação. Aos botões resta pouca desculpa para dizer que o recado nunca chegou.