CSS clamp() Beregner

CSS clamp() og flydende responsivt design

I moderne webudvikling er det afgørende at skabe layouts, der tilpasser sig skærmstørrelsen på alt fra små mobiltelefoner til store computerskærme. Traditionelt har man løst dette med medieforespørgsler (media queries), som ændrer værdier i faste trin. Med CSS-funktionen clamp() kan man i stedet skabe flydende overgange, hvor skriftstørrelser, padding, marginer, gaps, bredder eller højder skalerer jævnt og trinløst i takt med skærmens bredde.

En clamp()-funktion tager tre parametre: en minimumsværdi, en foretrukken værdi (som typisk beregnes dynamisk baseret på viewport-enheder) og en maksimumsværdi. Værdien vil flyde frit i det midterste interval, men vil aldrig falde under minimumsgrænsen eller overstige maksimumsgrænsen. Dette sikrer, at designet forbliver harmonisk og læsbart på tværs af alle tænkelige enheder.

Sådan beregnes den flydende værdi

For at bestemme den præcise matematiske formel til den midterste del af clamp()-funktionen, anvendes lineær interpolation mellem to punkter. Hvert punkt defineres af en skærmbredde og den ønskede størrelse ved netop denne bredde.

Beregneren tager udgangspunkt i følgende inputværdier:

• Størrelse ved den lille skærmbredde (Minimum).
• Skærmbredde for den lille skærm.
• Størrelse ved den store skærmbredde (Maksimum).
• Skærmbredde for den store skærm.
• Root-skriftstørrelse (typisk 16 pixels), som bruges til at konvertere pixelværdier til rem.

Værktøjet omsætter pixelværdierne til rem for at sikre, at layoutet tager højde for brugerens egne indstillinger. Formlen finder hældningen på linjen mellem de to punkter og udtrykker den midterste værdi som en kombination af en fast rem-værdi og en variabel viewport-bredde (vw). Et færdigt resultat kan eksempelvis se således ud: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Regler for input og fejlhåndtering

For at beregneren kan generere en gyldig CSS-kode, skal de indtastede data overholde en række matematiske regler:

1. Gyldige tal: Alle felter skal udfyldes med gyldige tal. Hvis der mangler værdier, eller hvis der indtastes ugyldige tegn, viser værktøjet statusmeddelelsen: "Indtast et gyldigt tal i hvert felt.".
2. Skærmbredder: Den lille skærmbredde skal være et mindre positivt tal end den store skærmbredde. Hvis dette krav ikke er opfyldt, vil den beregnede clamp()-værdi blive vist som —, og fejlen "Den lille skærmbredde skal være et mindre positivt tal end den store." vil blive vist.
3. Ens størrelser: Hvis minimumsstørrelsen og maksimumsstørrelsen sættes til det samme tal, er der ikke behov for skalering. Værktøjet vil registrere dette og vise statusmeddelelsen: "Begge størrelser er ens, så dette er en fast værdi, ikke flydende.".
4. Omvendt skalering: Hvis størrelsen ved den lille skærm er sat højere end størrelsen ved den store skærm, vil størrelsen skrumpe, når skærmen vokser. I dette tilfælde vises statusmeddelelsen: "Omvendt skalering — størrelsen bliver mindre, når skærmen bliver større.".

Når værdierne er korrekte og klar til brug, viser værktøjet statusmeddelelsen: "Juster størrelserne og skærmbredderne for at forme værdien.".

Tilgængelighed og brug af rem-enheder

Når man designer til internettet, er tilgængelighed (accessibility) et kritisk punkt. Hvis man definerer skriftstørrelser udelukkende i viewport-enheder som vw, mister brugeren muligheden for at forstørre teksten manuelt. Når en svagtseende bruger zoomer ind i sin browser eller øger browserens standard-skriftstørrelse, skal teksten vokse tilsvarende.

Denne beregner løser problemet ved konsekvent at konvertere pixelværdier til rem baseret på den angivne root-skriftstørrelse. Grænserne i den genererede clamp()-funktion angives i rem, og den dynamiske midterste del bevarer altid en rem-komponent ved siden af vw-komponenten. Dette sikrer, at teksten stadig forstørres korrekt, når der zoomes til 200%, hvilket opfylder gængse tilgængelighedskrav.

Forhåndsvisning og interaktion

Værktøjet indeholder en interaktiv forhåndsvisning, så du kan teste, hvordan den beregnede værdi opfører sig i praksis. Du kan skifte mellem to forskellige visningstilstande:

• Tekst: Viser eksempeltelsten "Flydende tekst, helt perfekt tilpasset.".
• Boks: Viser et visuelt element, hvor den beregnede værdi anvendes på en anden egenskab som f.eks. padding eller bredde.

Under forhåndsvisningen kan du ændre bredden på testområdet. En numerisk indikator viser den aktuelle "Bredde på forhåndsvisning". Mens du ændrer bredden, vil statusmeddelelserne dynamisk skifte for at vise, hvilken del af clamp()-funktionen der er aktiv i øjeblikket:

• Når skærmbredden er under den definerede minimumsgrænse, vises status: "låst ved minimum".
• Når skærmbredden er over den definerede maksimumsgrænse, vises status: "låst ved maksimum".
• Når skærmbredden befinder sig mellem de to grænser, vises status: "skalerer flydende".

Databehandling og privatliv

Når du bruger denne beregner, behandles alle indtastede tal og indstillinger lokalt. Beregningen sker udelukkende i din browser. Intet af det, du indtaster her, uploades til BroBroGo. Du kan derfor arbejde med dine layout-specifikationer i fuld fortrolighed.

Ofte stillede spørgsmål (FAQ)

Hvordan opbygger beregneren clamp()-værdien?

Du angiver to punkter: en størrelse ved en lille skærmbredde og en størrelse ved en stor skærmbredde. Beregneren tegner en ret linje mellem dem, så størrelsen vokser jævnt, efterhånden som skærmen bliver bredere, og pakker den derefter ind i clamp(), så den aldrig falder under din mindste størrelse eller overstiger din største størrelse. Mellem de to bredder skalerer størrelsen flydende; udenfor fastholdes den ved den nærmeste grænse.

Hvorfor er resultatet i rem og vw i stedet for pixels?

Grænserne er i rem, og den foranderlige midterste del bevarer en rem-komponent, så teksten stadig vokser, når en læser zoomer ind eller øger browserens standard-skriftstørrelse — en ren pixel- eller viewport-værdi kan forhindre dette i at fungere. Du indtaster størrelser i pixels, fordi det er sådan, de fleste tænker på dem, og værktøjet konverterer til rem baseret på din root-skriftstørrelse.

Kan jeg bruge dette til afstande og ikke kun skriftstørrelse?

Ja. Den samme værdi fungerer til padding, margin, gap, bredde eller højde — alle steder, hvor der bruges en længde. Skift forhåndsvisningen til Boks for at se afstanden vokse i stedet for teksten. Hvis din mindste og største størrelse er ens, falder resultatet tilbage til en almindelig fast længde, da der ikke er noget at skalere.

Understøtter alle browsere clamp()?

Ja — alle moderne browsere har understøttet clamp() siden 2020, så du kan bruge værdien direkte uden fallback. Ved et meget stort maksimum eller en hurtig ændringshastighed er det dog en god idé lige at tjekke ved 200% zoom, at teksten stadig forstørres for brugere, der har brug for det.