W CSS funkcja clamp(), pozwala tworzyć bardziej responsywne elementy czy marginesy bez użycia zapytań @media czy @container. Dodatkowo funkcja ta daje coś czego najbardziej brakowało mi w CSS, a mianowicie zmiana wielkości fontu w zależności od szerokości okna przeglądarki.

Funkcja clamp()

Funkcja clamp() przyjmuje trzy parametry:

1. minimum – wartość minimalna, po której wynik nie może spaść
2. preferowana – wartość, która będzie stosowana, jeżeli mieści się między minimum a maksimum
3. maksimum – wartość maksymalna, która nie może być przekroczona.

Elastyczne elementy i marginesy

Rozpatrzmy teraz poniższy przykład.

Przykładowe użycie funkcji clamp()

.container {
   padding: clamp(10px, 5vw, 50px);
}

Kiedy jakie wartości zostaną zastosowane? Załóżmy, że szerokość okna przeglądarki do 200px. Wartość preferowana to 5vw, co będzie mniej niż 10px, więc zostanie zastosowana wartość minimalna, czyli 10px. Jeżeli okno przeglądarki zostanie zwiększone na przykład do 1200px, wówczas 5vw, zostanie przekroczone, więc zostanie zastosowane padding o szerokości 50px. W każdym innym przypadku padding będzie wynosił 5vw.

Bardzo ciekawym przykładem będzie wykorzystanie funkcji clamp() w grid.

Wykorzystanie clamp() w grid.

grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 20vw, 300px), 1fr));

Jak to będzie działać? Funkcja minmax() sprawi, że szerokości kolumn będą dynamiczna. Natomiast funkcja clamp(), będzie pilnować szerokość kolumn w zależności do szerokości okna przeglądarki. Na małych ekranach 20vw będzie mniejsze niż 150px więc, kolumna będzie mieć szerokość 150px, na większych ekranach, szerokość kolumny nie przekroczy 300px. To wszystko w połączeniu z repeat(auto-fit, …) sprawi że kolumny dostosują się do dostępnej przestrzeni dodając lub usuwając kolumny. Poniżej demo elastycznej siatki.

Zobacz demo

Innym przykładem wykorzystania clamp(), będzie elastyczna zmiana szerokości elementu. Oczywiście mamy do dyspozycji width: fit-content, który sprawi, że szerokość elementu dopasuje się do zawartości. Jednak taki efekt nie zawsze będzie pożądany. W poniższym przykładzie szerokość elementu będzie uzależniona od szerokość okna przeglądarki.

Zmiana szerokości elementu za pomocą clamp().

width: clamp(200px, 60%, 800px);

Elastyczny font

UWAGA! poniższy przykład nie jest zgodny z wytycznymi WCAG.

Zmiana wielkości nagłówka artykułu w zależności od szerokości okna przeglądarki, było czymś czego brakowało mi w CSS. Teraz wystarczy zrobić jak na przykładzie niżej. Może trochę dziwnie wygląda stosowanie w rozmiarze fontu 3vw, ale jako przykład nadaje się idealnie.

Zmiana wielkości fontu za pomocą clamp()

font-size: clamp(1rem, 3vw, 4rem);

W praktyce

Najczęściej w projektach trzeba zmienić marginesy czy paddingi w zależności od szerokości okna przeglądarki. Na urządzeniach mobilnych są one mniejsze niż na komputerze. Myślę, że w tych sytuacjach clamp(), będzie sprawdzał się idealnie.

Funkcje clamp(), obsługują wszystkie topowe przeglądarki oraz urządzenia mobile.

Podobał się artykuł?