Numerikus CSS-változók interpolálása

A CSS-ben nagyon egyszerűen tudunk változókat létrehozni:

:root {
  --scale: 1;
}

És bármelyik elemen deklarálhatjuk őket:

.thing {
  transform: scale(--scale);
}

Egy ilyen példa esetében még jobb, ha a változót alkalmazza például egy felhasználói interakcióra :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

De ha ezt a változót szeretnénk használni egy animációban… nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

Ennek az az oka, hogy a változót a rendszer karakterláncként ismeri fel, és szükségünk van egy számra, amely interpolálható két numerikus érték közé. Oda hívhatjuk @property hogy ne csak regisztrálja a változót egyéni tulajdonságként, hanem a szintaxisát számként határozza meg:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

Most megkapjuk az animációt!

Akarni fogod ellenőrizze a böngésző támogatását óta @property csak a Chrome-ban landolt (kezdve 85 verzió) jelen állás szerint. És ha azt reméli, hogy kiszimatolja vele @supports, jelenleg nincs szerencsénk, mert nem fogadja el az at-szabályokat értékként… még. Ez egyszer megváltozik at-rule()valósággá válik.