CSS clamp() kalkulator

Razumijevanje CSS clamp() funkcije u responzivnom dizajnu

CSS clamp() funkcija omogućuje definiranje fluidnih veličina koje se glatko prilagođavaju širini zaslona. Umjesto definiranja fiksnih koraka pomoću medijskih upita (media queries), ova funkcija omogućuje da se elementi poput fontova, razmaka (padding, margin, gap), širine ili visine linearno skaliraju između zadane minimalne i maksimalne točke.

Funkcija prima tri parametra: minimalnu vrijednost, preferiranu (fluidnu) vrijednost i maksimalnu vrijednost. Preferirana vrijednost najčešće koristi kombinaciju viewport jedinica (vw) i relativnih jedinica (rem) kako bi se osiguralo glatko prilagođavanje širini preglednika. Kada je širina zaslona izvan definiranih granica, vrijednost se automatski zaustavlja na minimalnoj ili maksimalnoj granici.

Kako se izračunava fluidna vrijednost

Izračun fluidne vrijednosti temelji se na linearnoj interpolaciji između dviju točaka na grafu, gdje x-os predstavlja širinu zaslona (viewport), a y-os predstavlja željenu veličinu elementa.

Kalkulator koristi sljedeće ulazne podatke za izračun:

• Veličina za mali zaslon (Minimum)
• Širina zaslona za mali zaslon (Minimum)
• Veličina za veliki zaslon (Maksimum)
• Širina zaslona za veliki zaslon (Maksimum)
• Osnovna (root) veličina fonta u pikselima, koja služi za pretvorbu piksela u rem

Matematički izračun pronalazi nagib linije (stopu promjene u odnosu na širinu zaslona) i presjek s y-osi. Rezultat se pretvara u rem i vw jedinice kako bi se osiguralo ispravno ponašanje u pregledniku. Na primjer, za unos minimalne veličine od 16px na širini od 320px i maksimalne veličine od 24px na širini od 1280px, uz osnovnu veličinu fonta od 16px, kalkulator generira vrijednost poput clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

Pravila izračuna i granični slučajevi

Prilikom unosa podataka u kalkulator primjenjuju se stroga pravila kako bi se osigurao matematički ispravan CSS kod:

• Valjanost unosa: Alat zahtijeva ispravne brojeve u svim poljima. Ako polja sadrže neispravne znakove, prikazat će se poruka "Unesite valjan broj u svako polje.".
• Odnos širina zaslona: Širina malog zaslona mora biti manji pozitivni broj od širine velikog zaslona. Ako ovaj uvjet nije zadovoljen, izlazna vrijednost za clamp() bit će prikazana kao —, a sustav će ispisati pogrešku "Širina malog zaslona mora biti manji pozitivni broj od širine velikog zaslona.".
• Jednake veličine: Ako su minimalna i maksimalna veličina identične, nema potrebe za fluidnim skaliranjem. U tom slučaju, rezultat se skraćuje na fiksnu duljinu, a statusna poruka prikazuje "Obje su veličine jednake, pa je ovo fiksna vrijednost, a ne fluidna.".
• Obrnuto skaliranje: Ako je minimalna veličina veća od maksimalne veličine, kalkulator će izračunati obrnuto skaliranje. Statusna poruka tada prikazuje "Obrnuto skaliranje — veličina se smanjuje kako zaslon raste.".
• Zadržavanje granica: Tijekom promjene širine pregleda, statusni indikator dinamički prikazuje trenutno stanje skaliranja: "zadržano na minimumu", "zadržano na maksimumu" ili "fluidno skaliranje".

Pristupačnost i važnost rem jedinica

Korištenje ispravnih jedinica unutar clamp() funkcije ključno je za pristupačnost (accessibility) web stranica. Ako bi se fluidni dio izračunavao isključivo u viewport jedinicama (npr. vw), tekst se ne bi povećavao kada korisnik koristi opciju zumiranja u svom pregledniku. To krši osnovne smjernice o pristupačnosti weba.

Kalkulator rješava ovaj problem tako što sve ulazne vrijednosti u pikselima pretvara u rem jedinice na temelju unesene osnovne (root) veličine fonta. Srednji, promjenjivi član u generiranoj clamp() funkciji uvijek zadržava rem komponentu uz vw komponentu. To osigurava da se tekst i dalje ispravno povećava kada čitatelj zumira stranicu na 200% ili promijeni zadanu veličinu fonta u postavkama svog preglednika.

Privatnost i lokalna obrada podataka

Sigurnost i privatnost unesenih podataka u potpunosti su osigurani načinom na koji ovaj alat radi. Izračun se u potpunosti izvodi u Vašem pregledniku. Ništa što ovdje unesete ne šalje se na BroBroGo. Svi matematički proračuni, pretvorbe jedinica i generiranje CSS koda odvijaju se lokalno na Vašem uređaju.

Često postavljana pitanja (FAQ)

Kako kalkulator gradi vrijednost clamp()?

Zadajete mu dvije točke: veličinu na maloj širini zaslona i veličinu na velikoj širini. Alat povlači ravnu liniju između njih kako bi se veličina glatko povećavala s proširenjem zaslona, a zatim je omotava u funkciju clamp() tako da nikada ne pada ispod veličine za mali zaslon niti raste iznad veličine za veliki zaslon. Između te dvije širine veličina se fluidno prilagođava; izvan njih se drži na najbližoj granici.

Zašto je rezultat u rem i vw jedinicama umjesto u pikselima?

Granice su u rem jedinicama, a promjenjivi srednji dio zadržava rem komponentu, tako da tekst i dalje raste kada čitatelj zumira ili poveća zadanu veličinu fonta u pregledniku — vrijednost izražena samo u pikselima ili viewport jedinicama može to onemogućiti. Veličine unosite u pikselima jer većina ljudi tako razmišlja o njima, a alat ih pretvara u rem koristeći Vašu osnovnu (root) veličinu fonta.

Mogu li ovo koristiti za razmake, a ne samo za veličinu fonta?

Da. Istu vrijednost možete koristiti za padding, margin, gap, širinu ili visinu — bilo gdje gdje ide duljina. Prebacite pregled na "Okvir" kako biste gledali kako se razmak povećava umjestu teksta. Ako su Vaša mala i velika veličina iste, rezultat se pretvara u običnu fiksnu duljinu jer nema potrebe za skaliranjem.

Podržavaju li svi preglednici clamp()?

Da — svi moderni preglednici podržavaju clamp() od 2020. godine, tako da vrijednost možete koristiti bez alternativnih rješenja (fallback). Pri vrlo velikom maksimumu ili brzoj stopi promjene, preporučuje se brza provjera pri zumiranju od 200% kako biste bili sigurni da se tekst i dalje povećava za korisnike kojima je to potrebno.