CSS está evoluindo com o tempo e recursos mais recentes estão sendo adicionados a ele para facilitar a implementação das funcionalidades mais comumente usadas. Hoje veremos esse recurso que torna o CSS ainda mais poderoso.

O @property (em regra) permite que os desenvolvedores definam propriedades personalizadas. Neste post, veremos o que é @property, por que é útil e como usá-lo com alguns exemplos práticos.

O que é a regra @property?

As propriedades personalizadas CSS (variáveis) já existem há algum tempo e permitem armazenar e reutilizar valores como cores, tamanhos de fonte ou quaisquer outros valores de estilo. No entanto, até recentemente, faltavam-lhes recursos avançados, como definição de tipos e valores padrão. Isso é especialmente útil se quisermos implementar animações complexas (mais sobre isso nos próximos posts).

A regra @property representa um registro de propriedade personalizada diretamente na folha de estilo sem a necessidade de executar nenhum js.

Sintaxe básica

@property --my-custom-property {
  syntax: "";
  inherits: false;
  initial-value: red;
}

• sintaxe: Define o tipo de dados esperado da propriedade. Nesse caso, é uma cor (), mas pode ser qualquer tipo de dados CSS válido, como , ou .
• herda: determina se o valor da propriedade deve ser herdado por elementos filhos. Pode ser definido como verdadeiro ou falso.
• valor inicial: define um valor padrão para a propriedade quando nenhum é fornecido.

Quando usar @property

• Quando você precisa animar ou fazer a transição de uma propriedade personalizada para garantir um comportamento suave.
• Para impor tipos de dados (como cores, comprimentos ou números) para evitar erros de valores inválidos.
• Para definir valores padrão para propriedades personalizadas para manter estilos consistentes quando os valores estão faltando.
• Controle a herança de propriedades personalizadas entre elementos pai e filho.

Leia mais

• Documentos MDN @property

Postagem original