Math-funktioner i praksis

Hvorfor math-funktioner?

Math-funktioner i CSS giver dig mere præcis, fleksibel og vedligeholdelig styling, fordi du kan beskrive relationer, grænser og dynamiske størrelser direkte i koden.

calc(): mellemregneren

calc() er stærk, når du kombinerer units eller variable i samme regel. Den fungerer ofte som den lille mellemregner, der holder flere værdier i sync.

.wrapper {
  width: calc(100% - 2rem);
}

Brug den til klare mellemregninger, ikke til at skjule kompleksitet.

Et godt eksempel er radii. Hvis en indre flade ligger inde i en komponent med padding, kan den indre radius trækkes fra den ydre radius, så kurverne passer sammen i stedet for at se “skæve” ud.

.card {
  --card-radius: 2.75rem;
  --card-pad: 1rem;
  padding: var(--card-pad);
  border-radius: var(--card-radius);

  .inner {
    border-radius: calc(var(--card-radius) - var(--card-pad));
  }
}

Samme teknik er også nyttig, når JS sætter et råt tal i en custom property, og CSS bagefter skal give tallet en unit.

:root {
  --size: 20;
}

.box {
  inline-size: calc(var(--size) * 1px);
}

Det samme mønster kan bruges med 1rem, 1deg, 1% eller andre units, alt efter hvad tallet skal bruges til.

Øvelse: lineær mapping med calc()

Her bruges calc() til at oversætte et interval til et andet. JS skriver to normaliserede værdier mellem 0 og 1 til --x og --y, og CSS mapper dem så videre til de intervaller, interaktionen har brug for.

1. Først bruges de til position: calc(var(--x) * 100vw) og calc(var(--y) * 100vh) gør et unitløst tal til en længde, så pseudo-elementet kan følge cursorens placering.
2. Derefter bruges samme tal til typografi: wdth skal spænde fra 30 til 120, så forskellen er 90, og derfor bliver formlen calc(90 * var(--x) + 30). På samme måde bliver wght til calc(900 * var(--y) + 100), fordi intervallet er 100 til 1000.
3. Brug CSS Ranges til at regne de rigtige mapping-formler ud; “fra dette interval til dette interval”.

Pointen er, at JS ikke behøver kende den visuelle detalje. Det kan nøjes med at sende et tal, mens CSS bestemmer, om tallet skal blive til en position, en radius, en font-akse eller noget helt fjerde.

min(): beskyt mod overflow

min() er perfekt til klassikeren “fyld bredden, men aldrig mere end X”.

.container {
  width: min(65ch, 100% - 2rem);
}

Det er ofte mere læsbart end flere breakpoint-varianter.

max(): hold fast i en bundgrænse

max() er praktisk, når noget gerne må følge layoutet dynamisk, men aldrig må blive mindre end en bundgrænse, der holder UI’et brugbart.

:root {
  --content-width: 75rem;
}

main {
  grid-template-columns: 1fr minmax(0, var(--content-width)) 1fr;
}

.scroller {
  padding-inline: max(1rem, 50% - var(--content-width) / 2);
}

I dette mønster regner 50% - var(--content-width) / 2 ud, hvor langt der er fra viewportens kant ind til den centrerede content-kolonne. På brede skærme kan paddingen derfor flugte med content-området. På smalle skærme sørger max(1rem, ...) for, at paddingen aldrig bliver mindre end 1rem.

Det er især nyttigt til horisontale scrollers, full-bleed sektioner eller andre elementer, der skal følge en centreret content-bredde uden at miste luft på små skærme. Samme idé beskrives godt i web.dev om padding management.

Se eksemplet på det i praksis, hvor en horisontal scroller skal følge en centreret content-bredde, uden at miste luft på smalle skærme.

clamp(): minimum, flydende midte og maksimum

clamp() er nyttig, når du vil have minimum, fluid midte og maksimum i én deklaration.

Hurtig tommelfingerregel

1. Brug calc() når to eller flere værdier skal hænge sammen, fx padding og radius eller et råt tal fra JS og en CSS-unit.
2. Start med den simpleste funktion (min/max) før clamp.
3. Hold udtryk korte nok til, at intent kan læses direkte.
4. Kombinér med custom properties, når samme grænse eller faktor bruges flere steder.