CSS-funksjonene som gjør mest arbeid, gruppert etter jobb: beregne størrelser, lese egendefinerte egenskaper, blande og velge farger, male gradienter, bruke filtre, tegne former, transformere bokser og velge verdier med logikk. Hver rad kombinerer funksjonen med et eksempel på én linje.
En CSS-funksjon tar argumenter og returnerer en verdi nettleseren bruker. De tunge løfterne er calc() for aritmetikk, var() for design-tokens, clamp() for flytende størrelser og color-mix() for avledede farger. Neste dem fritt: clamp(1rem, var(--fluid), 3rem) er én enkelt responsiv verdi.
Referansetabell · 62 oppføringer
CSS-funksjonerExplained
62 of 62 rows
Størrelser og matematikk
Resultatet av et aritmetisk uttrykk, med blandede enheter.
width: calc(100% - 2rem);
Den minste av de oppgitte verdiene.
width: min(100%, 60ch);
Den største av de oppgitte verdiene.
width: max(320px, 40vw);
En verdi avgrenset mellom et minimum, en foretrukket verdi og et maksimum.
font-size: clamp(1rem, 2vw, 1.5rem);
Leser en miljøvariabel levert av brukeragenten.
padding: env(safe-area-inset-top);
En størrelse begrenset til innholdets iboende bredde.
width: fit-content(200px);
Runder én verdi til nærmeste multiplum av en annen.
width: round(up, 133px, 50px);
Den positive resten av en divisjon, alltid ikke-negativ.
margin: mod(100px, 30px);
Resten av en divisjon, beholder dividendens fortegn.
margin: rem(-100px, 30px);
Absoluttverdien.
translateX(abs(-10px));
-1, 0 eller 1, i samsvar med verdiens fortegn.
padding: sign(-5px) * 10px;
Grid
Et størrelsesområde for grid-spor, mellom et minimum og et maksimum.