Resumo

  • O primeiro rascunho público do W3C, em junho de 2016, propôs registrar uma propriedade personalizada por JavaScript com tipo, valor inicial e comportamento de herança; o exemplo animava uma cor de parada em um degradê.
  • Em 2019 surgiu também @property no CSS. O texto de 2024 detalhou a verificação no momento do valor calculado e a responsabilidade de compartilhar um nome registrado por todo o documento.

A designer guarda vermelho e verde em --stop-color e pede uma transição de um segundo. O nome parece explicar tudo. Só que o navegador recebe uma sequência de fichas CSS e precisa desenhar cada quadro entre os extremos. A palavra color no nome é uma sugestão humana, não um tipo formal. Na entrevista de emprego, a candidata abre uma mala cheia de valores e deixa vazia a linha que diz qual trabalho sabe fazer. O degradê pula de uma amostra para a outra, como se a animação tivesse perdido o caminho.

O primeiro rascunho público da API, de 7 de junho de 2016, ofereceu um cadastro para preencher essa linha. A proposta estendia CSS Variables para declarar tipo de valor, valor inicial e herança. A entrada era CSS.registerProperty() em JavaScript. O exemplo registrou --stop-color como <color>, deu-lhe começo transparente, marcou inherits: false e mudou de vermelho para verde no hover. Sabendo que lida com cores, o navegador pode construir as cores intermediárias. A variável deixa de entregar dois cartões mudos.

O texto de 9 de novembro de 2017 continuou a desenvolver o registro e a animação tipada. Nas versões preservadas até ali, a conversa ainda acontecia pela API JavaScript. A conhecida regra @property pertence a um capítulo posterior. A ordem das datas mostra a mudança de pergunta: primeiro, quais informações o navegador precisa receber? Depois, como o autor pode declarar essas informações diretamente junto aos estilos?

No rascunho de 25 de outubro de 2019, apareceram as duas portas: CSS.registerProperty() em script e @property no CSS. A regra da folha declara syntax, inherits e initial-value. Ao encontrar --radius perto do desenho de um círculo, o autor consegue ler que aquele nome guarda um comprimento, começa em zero e não passa automaticamente aos filhos. A documentação deixa de morar apenas na sala dos scripts; ela se senta ao lado da regra que usa o valor.

O rascunho de 13 de outubro de 2020 manteve os dois métodos e os exemplos de animação. A recompensa é visível quadro a quadro. Uma cor percorre outras cores. Um comprimento percorre outros tamanhos. Um --radius registrado como <length> faz o círculo pintado crescer de dez a cinquenta pixels atravessando os tamanhos intermediários. O navegador pode calcular a próxima posição, em vez de receber um pacote fechado chamado «pequeno» e outro chamado «grande».

O texto de 26 de março de 2024 explica as condições do cadastro. @property precisa de syntax e inherits; quando o tipo é específico e não o curinga *, precisa também de initial-value válido e calculável de forma independente. As respostas dizem o que a propriedade aceita, de onde começa e se os descendentes a recebem por padrão. Se falta um campo obrigatório, a regra de registro inteira é ignorada. Não há como calcular uma animação de comprimento com uma ficha de comprimento preenchida pela metade.

A checagem do tipo ocorre quando o valor é calculado, e o rascunho apresenta o motivo. Um script pode registrar o nome depois que o navegador já leu declarações CSS. Se ele descartasse imediatamente valores que não combinam com um tipo ainda desconhecido, teria de guardar todas as declarações rejeitadas ou reler a folha completa quando o registro chegasse. O exame fica na etapa de valor calculado, antes da substituição via var(). Até uma entrevista precisa de horário certo.

O nome registrado, por sua vez, ocupa mais espaço do que um componente imagina. O documento usa um mapa compartilhado mesmo para regras escritas dentro de Shadow DOM. Entre regras @property válidas com o mesmo nome, vence a última na ordem das folhas; um registro JavaScript para esse nome tem prioridade sobre elas. Dois componentes podem chamar --radius de sua pequena propriedade particular, mas o navegador precisa de um significado comum. O grupo de trabalho descreve a tensão: componentes querem isolamento, e a página externa quer enviar valores cujo tipo ambos compreendam.

O histórico de publicações do W3C põe 2016, 2017, 2019, 2020 e 2024 em ordem. A variável saiu da entrevista com profissão, ponto de partida e regra de família. O degradê pode enfim atravessar o caminho do vermelho ao verde sem fazer o salto de uma cena para outra.