TechBlog - wszystkie artykuły

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:

CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
width: 70%
max-width: 800px;
min-width: 200px;

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()

CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
width: min(50%, 500px);

Funkcji min() używamy, aby ustawić najmniejszą z wartości.


W powyższym przykładzie, aby wybrać mniejszą z dwóch wartości, przeglądarka przelicza 50% aktualnej szerokości okna i porównuje ją z wartością 500px. Dopóki 50% okna jest większe niż 500px, stosowany jest ogranicznik o wartości 500px i szerokość elementu nie zwiększy się ponad tę wartość. Natomiast, jeśli po przeliczeniu wartość 50% szerokości okna jest mniejsza niż 500px, wtedy element otrzymuje szerokość o wartości 50% aktualnej szerokości okna przeglądarki.

max()

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

CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
width: max(50%, 500px);


W tym przypadku przeglądarka jako szerokość elementu wybierze większą z wartości (50%, 500px). Wartość 50% szerokości okna przeglądarki jest stosowana tak długo, jak po przeliczeniu jest ona większa niż druga z wartości (500px). Jeśli natomiast jej wartość zejdzie poniżej 500px, to zostanie zignorowana, a w jej miejsce użyte zostanie 500px.

Zarówno dla funkcji max() jak i min() możemy zastosować kilka wartości w funkcji i ich kolejność występowania nie ma znaczenia.

Zainteresował Cię ten artykuł?

Oferujemy profesjonalne wsparcie programistów w technologii WEB - napisz do nas!

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()

HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
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.

HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
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.

HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
HTML
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.

Cookies Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dzięki nim możemy indywidualnie dostosować stronę do twoich potrzeb. Każdy może zaakceptować pliki cookies albo ma możliwość wyłączenia ich w przeglądarce, dzięki czemu nie będą zbierane żadne informacje. Polityka prywatności