Interpolering af numeriske CSS-variabler

Vi kan lave variabler i CSS ret nemt:

:root {
  --scale: 1;
}

Og vi kan erklære dem på ethvert element:

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

Endnu bedre for et eksempel som dette er at anvende variablen på en brugerinteraktion, f.eks :hover:

:root {
  --scale: 1;
}

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

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

Men hvis vi ville bruge den variabel i en animation... nada.

:root {
  --scale: 1;
}

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

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

Det er fordi variablen genkendes som en streng, og hvad vi har brug for er et tal, der kan interpoleres mellem to numeriske værdier. Det er der, vi kan kalde på @property for ikke kun at registrere variablen som en tilpasset egenskab, men definere dens syntaks som et tal:

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

Nu får vi animationen!

Det får du lyst til tjek browserunderstøttelse siden @property er kun landet i Chrome (starter i udgave 85) når dette skrives. Og hvis du håber at snuse til det @supports, vi er i øjeblikket uheldige, fordi den ikke accepterer at-regler som værdier... endnu. Det vil ændre sig én gang at-rule()bliver en rigtig ting.