CSS Clamp()-calculator

Met CSS clamp(MIN, PREFERRED, MAX) kan één enkele declaratie een hele stapel media queries vervangen: de waarde blijft op MIN onder de kleinste viewport, op MAX boven de grootste, en schaalt er vloeiend tussenin. Het lastige deel is de PREFERRED-term — een viewport-afhankelijke uitdrukking zoals 0,833rem + 0,833vw — die niemand met de hand wil afleiden. Deze calculator berekent hem echt op basis van vier getallen: een minimale grootte, een maximale grootte en de viewport-breedte waarbij elk van toepassing is.

Elk tussenliggend getal wordt getoond, niet alleen de uiteindelijke regel: de helling (hoeveel grootte-eenheden de waarde per pixel viewport toeneemt), diezelfde helling uitgedrukt als een vw-coëfficiënt, en het y-as-snijpunt — de constante die aan de vw-term wordt toegevoegd zodat de lijn precies door de twee door jou opgegeven punten loopt. Iedereen die ooit een clamp()-waarde uit een tutorial heeft overgenomen zonder hem te begrijpen, kan hier de echte rekenkundige stappen zien en controleren.

Een viewport-breedteschuifregelaar stuurt een live preview aan, zodat de vloeiende schaling zichtbaar wordt en niet alleen maar wordt berekend: sleep hem tussen het minimum- en maximum-breekpunt en zie hoe de voorbeeldtekst precies zo van grootte verandert als in een echt browservenster dat wordt vergroot of verkleind. De uitvoerregel en de uitsplitsing passen zich bij elke toetsaanslag aan — dit vormt een natuurlijk paar met de px-naar-rem-converter wanneer de basislettergrootte zelf ook moet worden omgerekend.

Schakel over naar de typografische-schaalmodus voor een volledig vloeiend typografiesysteem in één stap: voer een basisgrootte en een modulaire verhouding in (1,125 tot 1,5) en je krijgt zes groottes — small, base, h4, h3, h2 en h1 — elk berekend als zijn eigen clamp()-regel met een gematigder mobiele schaal en de volledige desktopverhouding, klaar om te kopiëren als een blok CSS custom properties.