Interpolering av numeriske CSS-variabler

Vi kan lage variabler i CSS ganske enkelt:

:root {
  --scale: 1;
}

Og vi kan erklære dem på et hvilket som helst element:

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

Enda bedre for et eksempel som dette er å bruke variabelen på en brukerinteraksjon, for eksempel :hover:

:root {
  --scale: 1;
}

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

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

Men hvis vi ønsket å bruke den variabelen i en animasjon... 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 variabelen gjenkjennes som en streng, og det vi trenger er et tall som kan interpoleres mellom to numeriske verdier. Det er der vi kan ringe @property å ikke bare registrere variabelen som en egendefinert egenskap, men definere dens syntaks som et tall:

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

Nå får vi animasjonen!

Du kommer til å ville sjekk nettleserstøtten siden @property har bare landet i Chrome (starter i versjon 85) når dette skrives. Og hvis du håper å snuse det ut med @supports, vi er for øyeblikket uheldige fordi den ikke godtar at-regler som verdier … ennå. Det vil endre seg en gang at-rule()blir en ekte ting.