Tal, toggles og lineær mapping

Et tal som skifte

En custom property med værdien 0 eller 1 kan styre flere numeriske egenskaber. Det er tal, ikke en særlig boolsk CSS-type:

.rotate {
  --intent: 0;
  rotate: calc(var(--intent) * 45deg);
  transition: rotate .3s;

  &:hover { --intent: 1; }
}

Øvelse: Udfyld rotationen med calc(). Forudsig resultatet ved 0, 1 og 0.5, og prøv det. Hvis effekten bruges på en rigtig knap, skal den også fungere med tastatur, fx via :focus-visible; hover alene er kun et demonstrationsgreb.

Drawer: Ét tal styrer to egenskaber

I drawer-demoen tilføjer eller fjerner JavaScript klassen .open, når du trykker på knappen. CSS omsætter tilstanden til --open: 0 eller 1 og bruger tallet to steder:

.drawer {
  --open: 0;
  opacity: var(--open);
  translate: calc((1 - var(--open)) * 100%);
  transition: opacity .4s, translate .4s;

  &.open { --open: 1; }
}

1 - var(--open) vender værdien om: Når panelet bliver synligt, forsvinder forskydningen. Transitionerne animerer opacity og translate; selve custom property’en skifter direkte mellem to tal, så den behøver ikke @property.

Prøv: Forudsig resultatet ved --open: 0.5, og afprøv det. Hvorfor bruger vi 1 - var(--open) til placeringen, men ikke til opacity?

Demoen viser beregningen og er ikke et færdigt drawer-mønster: opacity: 0 fjerner ikke indhold fra tastaturbetjening eller tilgængelighedstræet. En drawer med interaktive elementer skal også håndtere lukket tilstand, fokus og reduceret bevægelse.

Fra et interval til et andet

For et input --p mellem 0 og 1 er formlen:

.element {
  --min: .2em;
  --max: .8em;
  --value: calc(var(--min) + var(--p) * (var(--max) - var(--min)));
}

Det er samme princip som i flydende typografi med progress(). Her leverer JavaScript det normaliserede input, mens CSS vælger den visuelle skala. Formlen begrænser ikke selv inputtet; brug clamp(0, var(--p), 1), hvis input kan ligge uden for intervallet.

Øvelse: Lineær mapping i trin

Steps-udgaven af øvelsen fra slides viser, hvordan --x og --y bliver omsat til forskellige værdier:

1. JavaScript måler pointerens position og leverer to tal mellem 0 og 1.
2. CSS giver tallene en længde med calc(var(--x) * 100vw) og den tilsvarende y-værdi, så en dekorativ markør følger bevægelsen.
3. Samme input styrer en variabel font: calc(30 + 90 * var(--x)) giver breddeaksen 30–120, og calc(100 + 900 * var(--y)) giver vægtaksen 100–1000.

Fonten skal understøtte de valgte akser og intervaller. Undersøg først én akse ad gangen. JavaScript leverer data; CSS bestemmer, hvad de skal betyde visuelt.

Brug eventuelt CSS Ranges til at kontrollere beregningen. Pointereffekten er en demonstration, ikke en nødvendig betjeningsform. Behold læsbart indhold og en normal cursor i en produktionsløsning, hvis effekten ikke er nødvendig.