Funkcja clamp() to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.

Do tworzenia elastycznych, responsywnych stron www wykorzystujemy przeróżne funkcje i właściwości styli CSS. Jedną z nich jest funkcja clamp(), którą wykorzystujemy do określania wielkości elementu.

Zastosowanie

Funkcję clamp() możemy wykorzystać właściwie w każdej właściwości, która przyjmuje wartości liczbowe. Poza funkcją clamp(), mamy do dyspozycji funkcje min() i max(), jednak nie są tak uniwersalne.

Funkcje min() oraz max()

Oto przykłady ich zastosowania:

width: min(50%, 650px); // #1
width: max(50%, 650px); // #2

Powyższy kod #1 oznacza, że szerokość kontenera będzie maksymalnie 650px oraz minimalnie 50% jego szerokości. Natomiast kod #2 oznacza, iż kontener będzie miał minimalnie 650px oraz więcej niż 50% szerokości.

Funkcja clamp()

Dobrodziejstwa dwóch powyższych funkcji łączy clamp().

width: clamp(300px, 50vw, 750px);

Zatem, ta konstrukcja ograniczy nam szerokość kontenera na zasadzie – połowa okna przeglądarki, nie mniejsza niż 300px i nie większa niż 750px. Super, tego nam było trzeba!