webdevs.blog PL

CSS Flexbox oraz Grid były rewolucją w budowaniu responsywnych layoutów, dzięki ich właściwościom tworzenie nowoczesnych stron stało się przyjemne i szybkie, a ich wykorzystanie uznajemy jako światowy standard, który wyrzucił z głów developerów właściwość float na zawsze. Kolejna, mała rewolucja, ułatwiająca pracę z elastycznymi układami nadejdzie w momencie pełnego wsparcia container queries, ale nie tylko rewolucjami developer żyje. Dziś chciałbym przybliżyć Wam trzy funkcje CSS, których pojawienie się przeszło, moim zdaniem, bez echa i których wykorzystanie spotykam dość rzadko. Są to funkcje min(), max() oraz clamp(), które z powodzeniem możemy wykorzystywać podczas pracy nad responsywnymi layoutami.

Wspomniane funkcje są w pełni wspierane we wszystkich najpopularniejszych przeglądarkach, więc nic nie stoi na przeszkodzie by korzystać z ich dobrodziejstw. Możemy kontrolować za ich pomocą rozmiar elementów jak i odstępy między nimi, a także użyć ich do stworzenia responsywnejj typografii. Znajdą zastosowanie we wszystkich właściwościach CSS, których wartość określamy za pomocą liczby lub wyrażenia matematycznego, a dodatkowo nie wymagają używania funkcji calc().

Przykłady wykorzystania

To tyle teorii, czas na mięso, czyli przykłady użycia. Na pierwszy ogień wykorzystajmy te funkcje do określenia rozmiaru danego elementu, dzięki temu w wielu przypadkach unikniemy stosowania media queries lub kilku linijek CSS. Przyjmijmy, że chcemy określić minimalną, procentową szerokość bloku, jednocześnie określając jego maksymalną szerokość. Bez wykorzystania funkcji min() musimy napisać dwie linijki CSS:

.element {
  width: 50%;
  max-width: 30rem;
}Code language: CSS (css)

lub skorzystać z wcześniej wspomnianego media quieries. Wykorzystując funkcję min() uzyskamy taki sam efekt za pomocą jednej linijki kodu:

.element {
  width: min(50%, 30rem);
}Code language: CSS (css)

W tym przypadku przeglądarka porównuje wartość 50% szerokości okna do wartości 30rem. Jeśli 50% szerokości okna jest mniejsze niż 30rem to element przyjmuje szerokość 50%, jeśli zaś jest większe to wtedy element otrzymuje maksymalną szerokość o wartości 30rem.

Funkcja max() działa odwrotnie, przyjmijmy, że chcemy aby element miał 50% szerokości, ale nie mniej niż 30rem. W takim przypadku style dla tego elementu powinny wyglądać w następujący sposób:

.element {
  width: max(50%, 30rem);
}Code language: CSS (css)

Co gdy chcemy określić zarówno minimalną jak i maksymalną szerokość elementu w zależności od szerokości okna przeglądarki? Wtedy z pomocą przychodzi ostatnia z funkcji – clamp(). Bez jej wykorzystania (oraz bez wykorzystania media queries) style dla tego elementu wyglądałyby następująco:

.element {
  width: 50%;
  min-width: 30rem;
  max-width: 50rem;
}Code language: CSS (css)

Dzięki funkcji clamp() możemy ograniczyć te style do jednej linijki:

.element {
  width: clamp(30rem, 50%, 50rem);
}Code language: CSS (css)

Jak widać na powyższym przykładzie – jako pierwszy argument podajemy wartość minimalną, jako drugi optymalną i preferowaną wartość, a jako trzeci wartość maksymalną.

Gdzie jeszcze możemy wykorzystać te funkcje?

Jak wiadomo, ograniczenia istnieją tylko w naszych głowach, ale by je pokonać i uruchomić kreatywność zaprezentuje Wam dodatkowe dwa przykłady użycia tych funkcji.

Pierwszy z nich to, wspomniana wcześniej, „Fluid typography” czyli ustawienie rozmiaru tekstu w zależności od szerokości okna. Użycie funkcji clamp() pozwala w prosty sposób określić minimalny, oczekiwany oraz maksymalny rozmiar np. nagłówków:

h2 {
  font-size: clamp(2.5rem, 6vw, 4.2rem);
}Code language: CSS (css)

W powyższym przykładzie domyślny rozmiar nagłówka drugiego stopnia to 6vw, jednak nie będzie on mniejszy niż 2.5rem i nie większy niż 4.2rem.

Drugi przykład pokazuje prosty sposób na stworzenie wrappera (kontenera) na np. treść. Wykorzystamy do tego celu funkcje max():

:root {
  --wrapperWidth: 100rem;
  --paddingWidth: 1.5rem;
}

.wrapper {
  padding-left: max(var(--paddingWidth), 50vw - var(--wrapperWidth) / 2);
  padding-right: max(var(--paddingWidth), 50vw - var(--wrapperWidth) / 2);
}Code language: CSS (css)

W powyższym przykładzie zawartość sekcji z klasą wrapper będzie miała maksymalną szerokość na poziomie 100rem, na mniejszych rozdzielczościach zaś przyjmie wartość na poziomie 100% ekranu odejmując paddingi boczne na poziomie 1.5rem. Zmienne CSS widoczne na początku przykładu określają maksymalną szerokość wrappera oraz minimalny padding boczny. Dla dużych rozdzielczości padding boczny elementu będzie automatycznie wzrastał w taki sposób, by zawartość elementu z klasą wrapper nie przekroczyła szerokości 100rem.

Czas na wykorzystanie w praktyce

Jeśli nie robiliście tego dotychczas, to nadszedł czas by zacząć korzystać z wspomnianych funkcji w swoich projektach. Nie jest to na pewno „game changer”, który spowoduje całkowitą zmianę podejścia do budowania responsywnych layoutów – tak jak miało to miejsce w przypadku pojawienia się właściwości flex czy grid. Korzystanie z tych funkcji nie pozwoli również na całkowite zrezygnowanie z media queries, jednak w wielu przypadkach zredukuje ilość kodu, przyśpieszy i ułatwi wdrażanie nowych projektów.