`@property (variabile CSS cu tip)` în CSS

Reguli @ (at-rules) Chrome 85, Firefox 128, Safari 16.4

Înregistrează o variabilă CSS cu tip, valoare inițială și moștenire, ca browserul să o poată anima și valida.

Sintaxă CSS

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

Ce face `@property (variabile CSS cu tip)`

O variabilă CSS obișnuită (--x) este pentru browser doar un șir de caractere: nu știe dacă e o culoare sau un unghi, deci nu o poate anima lin, ci o schimbă brusc. Cu @property îi spui tipul (syntax), dacă se moștenește (inherits) și valoarea de pornire (initial-value).

Odată înregistrată, variabila poate fi animată cu transition sau @keyframes, inclusiv în locuri care altfel nu se animă, de exemplu în interiorul unui gradient. O valoare de tip greșit (de exemplu --unghi: rosu) este ignorată și se folosește initial-value.

Descriptorii syntax și inherits sunt obligatorii; initial-value este obligatoriu pentru orice tip în afară de "*". Aceeași înregistrare se poate face și din JavaScript cu CSS.registerProperty().

Valori uzuale

Valoare	Descriere
`syntax`	Tipul valorii: „<color>”, „<length>”, „<percentage>”, „<number>”, „<angle>”, „<integer>” sau „*” (orice).
`inherits`	true dacă elementele copil moștenesc valoarea, false dacă pornesc de la initial-value.
`initial-value`	Valoarea folosită când variabila nu este setată sau are o valoare invalidă.

Exemple

Exemplul 1: Chenar cu gradient care se rotește

Unghiul gradientului este o variabilă înregistrată, deci @keyframes o poate anima de la 0deg la 360deg.

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

.card-promo {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    conic-gradient(from var(--unghi), #2563eb, #db2777, #2563eb) border-box;
  animation: roteste 4s linear infinite;
}

@keyframes roteste {
  to { --unghi: 360deg; }
}

Efect vizual în browser

Cardul „Reducere 20% la abonamentul anual” are un chenar colorat albastru-roz care se rotește continuu și lin în jurul lui. Fără @property, culorile ar sări brusc la final, fără mișcare intermediară.

Exemplul 2: Bară de progres animată prin procent

Variabila –progres are tipul procent, deci tranziția între 30% și 75% este fluidă.

@property --progres {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.bara {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg, #16a34a var(--progres), #e5e7eb var(--progres));
  transition: --progres 0.6s ease;
}
.bara.pas-2 { --progres: 30%; }
.bara.pas-4 { --progres: 75%; }