@Property | CSS

• @Property | CSS

🧠 O que é o @property

Normalmente, quando você usa variáveis CSS (as famosas custom properties), você faz algo assim:

:root {
  --minha-cor: red;
}

Mas o navegador não sabe o tipo dessa variável — é só um texto. Então, não dá pra animar, interpolar ou validar valores.

👉 @property muda isso: ele registra a variável oficialmente, com tipo, valor inicial e herança.

---

⚙️ Sintaxe

@property --nome-da-propriedade {
  syntax: '<tipo>';
  inherits: true | false;
  initial-value: <valor>;
}

Campo	O que faz
syntax:	Define o tipo de valor esperado (ex: <color>, <length>, <number>, etc.)
inherits:	Diz se o valor é herdado para elementos filhos
initial-value:	Valor padrão se nenhum for definido

---

💡 Exemplo simples

@property --minha-cor {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

.caixa {
  background-color: var(--minha-cor);
  transition: --minha-cor 1s; /* 👈 Isso só funciona porque usamos @property */
}

.caixa:hover {
  --minha-cor: blue;
}

➡️ Resultado: Quando você passa o mouse, a cor muda com transição suave entre red → blue.

Sem @property, o navegador não saberia como animar a variável.

---

🔢 Exemplo com número

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

.box {
  padding: var(--espaco);
  transition: --espaco 0.3s ease;
}

.box:hover {
  --espaco: 40px;
}

➡️ Aqui, o padding cresce suavemente de 10px para 40px ao passar o mouse.

---

🧠 Tipos aceitos em syntax

Tipo	Exemplo	Descrição
<color>	red, #fff, rgb(0,0,0)	Cor
<length>	10px, 2rem	Tamanho
<number>	1, 3.14	Números
<angle>	45deg	Ângulos
<percentage>	50%	Percentuais
<transform-list>	rotate(30deg)	Transformações

---

🎨 Exemplo prático com animação

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

  .loader {
    width: 100px;
    height: 100px;
    border: 6px solid transparent;
    border-top-color: blue;
    border-radius: 50%;
    animation: girar 2s linear infinite;
  }

  @keyframes girar {
    to {
      --angulo: 360deg;
      transform: rotate(var(--angulo));
    }
  }
</style>

<div class="loader"></div>

🌀 Aqui, a variável --angulo é registrada e animada suavemente graças ao @property.

---

⚙️ Compatibilidade

• ✅ Chrome / Edge / Opera: suportam bem
• ⚠️ Safari: suporte parcial (depende da versão)
• ⚠️ Firefox: ainda experimental (precisa ativar flag)

---

✅ Resumo

Conceito	Explicação
@property	Registra uma variável CSS “com tipo”
Permite	Animação, transição e validação de variáveis
Campos	syntax, inherits, initial-value
Vantagem	Faz as variáveis CSS se comportarem como propriedades nativas
Suporte	Navegadores modernos (principalmente Chromium)