Valores de Fallback e var()

A função var() aceita um segundo argumento opcional como valor alternativo, usado quando a propriedade personalizada não está definida.

O valor alternativo é usado quando:

• A propriedade não está definida no escopo
• A propriedade tem o valor initial
• A propriedade foi declarada com um valor inválido para o contexto

Aninhe chamadas de var() para encadear vários níveis de valores alternativos:

Os valores alternativos podem ser qualquer valor válido para a propriedade — incluindo outras variáveis, valores calculados ou literais:

Definir uma propriedade personalizada como initial faz com que seja como se ela nunca tivesse sido definida. Em conjunto com um valor alternativo, isso permite que os componentes deixem de usar uma propriedade personalizada herdada.

Usar initial como valor de uma propriedade personalizada é uma técnica para garantir que o valor alternativo seja acionado. Isso pode criar sinalizadores opcionais de recursos no CSS.

A regra @property (Houdini) registra uma propriedade personalizada tipada com um valor inicial garantido. Isso é mais robusto do que depender de valores alternativos.

Garanta que as transições funcionem mesmo quando uma propriedade personalizada não estiver definida, fornecendo um valor alternativo seguro a partir do qual seja possível fazer a transição:

Se uma propriedade personalizada estiver ausente e nenhum valor alternativo for fornecido, a propriedade será calculada como seu valor inicial (geralmente a palavra-chave initial). Para cores, isso pode produzir resultados inesperados transparentes ou pretos. Sempre adicione valores alternativos às propriedades críticas.

Os valores de propriedades personalizadas podem fazer referência a outras propriedades personalizadas, criando uma cadeia de valores:

Os valores alternativos não têm relação com a especificidade — eles só se aplicam quando a propriedade personalizada referenciada não está definida ou é inválida. A especificidade determina qual regra define a propriedade personalizada, não qual valor alternativo prevalece.

O que color: var(--theme-text, #111) faz quando --theme-text não está definido?

var(--name, fallback) fornece um valor alternativo quando a propriedade personalizada não está definida. Os valores alternativos podem ser aninhados em vários níveis. Use @property para propriedades personalizadas tipadas com valores iniciais garantidos. Sempre forneça valores alternativos para propriedades visuais essenciais.