Min(), max(). clamp() – nowe funkcje w css

Używanie relatywnych jednostek długości do budowania responsywnych layoutów może być problematyczne. Elementy, których rozmiar uzależniony jest od rozmiaru innego elementu lub obszaru okna przeglądarki mogą rosnąć lub zmniejszać się bardziej niż byśmy tego oczekiwali. Na przykład jeśli zdefiniujemy rozmiar czcionki za pomocą samej jednostki vw (viewport width, która obliczana jest wg aktualnego rozmiaru okna przeglądarki) tekst może łatwo stać się nieczytelny jeśli będzie wyświetlany na mniejszych ekranach.

Elastyczne layouty

Dotychczas aby ograniczyć niekontrolowane zmiany wymiarów elementów w przypadku właściwości takich jak wysokość lub szerokość stosowaliśmy właściwości ograniczające: min-width, min-height, max-width i max-height. Jednak dla innych właściwości jak np. rozmiar czcionki nie istnieją takie odpowiedniki więc musieliśmy posłużyć się ustawianiem reguł media queries dla różnych rozdzielczości lub zastosować techniki obliczeniowe przy pomocy funkcji calc().

Funkcje porównawcze CSS

Nowe funkcje w CSS – clamp(), min() i max() ustawiają górne i/lub dolne limity wartości dla rozmiarów elementów. Nazywamy je porównawczymi ponieważ obliczają i porównują wartości argumentów przekazywanych do funkcji i stosują obliczoną wartość jako właściwość elementu.

Zastosowanie

Funkcje te możemy stosować wszędzie tam gdzie wartość jest określona za pomocą liczby, czyli we właściwościach: width, height, margin, padding, border, a także offset, size, box-shadow oraz spacing (w fontach). Przyjmują one jako argumenty wartości liczbowe lub wyrażenia matematyczne. Warto zaznaczyć, że stosując wyrażenia matematyczne możemy to robić bez użycia funkcji calc().

Przykład użycia

Dotychczas jeśli chcieliśmy ustawić szerokość elementu, tak aby nie przekroczył pewnej szerokości na dużych i małych ekranach używaliśmy:

lub korzystaliśmy z media queries, które precyzyjniej określały na jakiej rozdzielczości nasz obiekt ma mieć jaką wartość.

Te deklaracje możemy zastąpić nowymi funkcjami w css:

min()

width: min(50%, 500px);

max()

Funkcja max() działa odwrotnie, używamy jej do ustawienia większej z wartości.

width: max(50%, 500px);

Kompleksowe dostosowanie

Co w przypadku jeśli chcemy zastosować wartość domyślną dla elementu ale ograniczoną zarówno w najmniejszej jak i największej dopuszczalnej wartości. Możemy zastosować kombinację funkcji min() i max().

width: max(200px, min(50%, 1000px));

Zapis ten jest dość skomplikowany, dlatego z powodzeniem zastępuje go zdefiniowana nowa funkcja css o nazwie clamp().

clamp()

Funkcja ta pozwala ustawić wartość, która nie zmniejszy się poza minimalną ani nie zwiększy poza maksymalną. To rozwiązanie zastępuje tradycyjne sposoby skalowania wartości, które często wymagało wielu linii kodu wraz z definicją styli dla media queries.

width: clamp(300px, 50%, 20rem)

Zapis ten działa tylko z trzema wartościami:  minimalnej, maksymalnej i bazowej czyli takiej jaka jest najbardziej preferowana.W powyższym przykładzie obiekt ma przeważnie 50% szerokości rodzica, ale nie może mieć mniej niż 300px, ani więcej niż 20rem.

Przykład zastosowania

Funkcję clamp() możemy zastosować np. aby zapobiec niekontrolowanym zmianom rozmiarów czcionek.

font-size: clamp(2rem, 5vw, 5rem)

W powyższym przykładzie domyślnie czcionka ustawia się nam na 5vw nie przekraczając minimalnej wartości 2rem i maksymalnej 5rem.

Podsumowanie

Przedstawione w artykule funkcje są wspierane przez wszystkie główne przeglądarki. Stosowanie ich nie zastąpi nam pisania reguł media queries lub wykorzystania funkcji calc() ale w wielu przypadkach może znacznie ułatwić nam pracę.

Co więcej funkcje te mogą w znaczący sposób zmienić podejście projektantów układów stron internetowych, którzy od tej pory mogą określać pożądaną (rekomendowaną) wielkość elementu oraz minimalną i maksymalną (zmieniającą się w zależności od wielkości okna przeglądarki) zastępując tym samym podejście wielostopniowego dopasowania układów po przekroczeniu progów dla urządzeń mobilnych.