A regra @property é um recurso poderoso do CSS que permite aos desenvolvedores definir propriedades personalizadas com maior controle sobre seu comportamento, incluindo como elas animam e seus valores iniciais. Esta regra fornece uma maneira de aprimorar a funcionalidade das propriedades personalizadas do CSS e oferece mais flexibilidade em sua aplicação. A sintaxe básica da regra @property é a seguinte:

@property --property-name {
  syntax: '<type>';
  inherits: true | false;
  initial-value: <value>;
}

O --property-name é o nome da propriedade personalizada que você está definindo. Como todas as propriedades personalizadas, ela deve começar com dois traços. syntax define o tipo da propriedade, que pode ser coisas como <color>, <length>, <number>, <percentage> ou tipos mais complexos. inherits especifica se a propriedade deve herdar seu valor do elemento pai. initial-value define o valor padrão da propriedade. Aqui está um exemplo prático de como usar a regra @property:

<link rel="stylesheet" href="styles.css">
<button class="button">Click Me</button>

@property --main-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

.button {
  background-color: var(--main-color);
}

Neste exemplo, estamos definindo uma propriedade personalizada --main-color como um valor color, configurando-a para não herdar e dando a ela um valor inicial de #3498db. Um dos principais benefícios da regra @property é que ela permite a animação de propriedades personalizadas, o que não era possível antes:

<link rel="stylesheet" href="styles.css">
<div class="gradient-box"></div>

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.gradient-box {
  width: 100px;
  height: 100px;
  background: linear-gradient(var(--gradient-angle), red, blue);
  transition: --gradient-angle 0.5s;
}

.gradient-box:hover {
  --gradient-angle: 90deg;
}

O código acima cria um gradiente que anima suavemente quando o elemento é hoverado, algo que não era possível com propriedades customizadas padrão. Agora, vamos discutir como a regra @property funciona com fallbacks. Fallbacks são cruciais em CSS para garantir que os estilos se degradam de forma suave em navegadores que não suportam certos recursos. Com o @property, os fallbacks funcionam em dois níveis: para a própria regra e para o uso da propriedade customizada. Para navegadores que não suportam a regra @property, você pode fornecer uma alternativa declarando a propriedade customizada da maneira tradicional:

<link rel="stylesheet" href="styles.css">

:root {
  --main-color: #3498db;
}

@property --main-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #3498db;
}

body {
  background-color: var(--main-color);
}

Neste caso, navegadores que suportam @property usarão a versão mais estritamente definida, enquanto outros recorrerão à declaração padrão de propriedade customizada. Ao usar a propriedade customizada, você pode fornecer um valor de fallback usando a função var(), assim como faria com propriedades customizadas padrão:

<link rel="stylesheet" href="styles.css">
<button class="button">Click Me</button>

.button {
  background-color: var(--main-color, #3498db);
}

Isso garante que mesmo se a propriedade --main-color não estiver definida ou for inválida, o botão ainda terá uma cor de fundo. A regra @property também permite cenários de fallback mais complexos. Por exemplo, você pode usá-lo para fornecer alternativas seguras para tipos:

<link rel="stylesheet" href="styles.css">
<div class="box">Colored box</div>

@property --padding {
  syntax: '<length>';
  inherits: false;
  initial-value: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: darkred;
  color: white;
  padding: var(--padding);
}

Neste caso, se alguém tentar definir --padding para um valor inválido, como uma cor, o navegador usará o valor inicial de 10px, mantendo a segurança de tipo. A regra CSS @property é considerada amplamente disponível em todos os principais motores de navegadores modernos (como Chrome, Edge, Opera, Firefox e Safari) desde o início de 2024. Se você quiser suportar navegadores mais antigos, precisa fornecer CSS de fallback conforme explicado acima. Em conclusão, a regra @property representa um avanço significativo na forma como trabalhamos com propriedades customizadas em CSS. Ele fornece mais controle e possibilita novas funcionalidades como animação de propriedades personalizadas. No entanto, é importante usá-lo com moderação e sempre fornecer alternativas apropriadas para garantir uma boa experiência em todos os navegadores. Como em qualquer tecnologia web de ponta, o segredo é melhorar a experiência para os navegadores que a suportam enquanto garante a funcionalidade básica para aqueles que não a suportam.