CSS min(), max() i clamp()

Dowiedz się, jak kontrolować rozmiary elementów, zachowywać odpowiednie odstępy i wdrażać płynną typografię za pomocą tych dobrze obsługiwanych funkcji CSS.

Una Kravets

W miarę jak elastyczne projektowanie stron staje się coraz bardziej złożone, CSS stale się rozwija, aby zapewnić autorom większą kontrolę. Funkcje min(), max() i clamp(), które są teraz obsługiwane we wszystkich nowoczesnych przeglądarkach, należą do najnowszych narzędzi, dzięki którym tworzenie witryn i aplikacji jest bardziej dynamiczne i elastyczne. Za pomocą tych funkcji możesz kontrolować rozmiar elementów i jego zmianę, zachowywać odstępy między elementami oraz tworzyć elastyczną i płynną typografię.

Funkcje matematyczne calc(), min(), max() i clamp() umożliwiają używanie wyrażeń matematycznych z dodawaniem (+), odejmowaniem (-), mnożeniem (*) i dzieleniem (/) jako wartości komponentów.

CSS Values And Units Level 4

Obsługa przeglądarek

min()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

max()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 11.1.

Source

clamp()

Browser Support

  • Chrome: 79.
  • Edge: 79.
  • Firefox: 75.
  • Safari: 13.1.

Source

Wykorzystanie

Możesz używać min(), max() i clamp() po prawej stronie dowolnego wyrażenia CSS, jeśli ma to sens. W przypadku funkcji min() i max() podajesz listę wartości argumentów, a przeglądarka określa, która z nich jest najmniejsza lub największa. Na przykład w przypadku width: min(1rem, 50%, 10vw) przeglądarka oblicza, która z tych jednostek względnych jest najmniejsza, i używa tej wartości jako szerokości elementu.

Funkcja min() wybiera minimalną wartość z listy opcji w tym przykładzie w Codepen.

Funkcja max() robi to samo w przypadku wartości maksymalnej.

Funkcja max() wybiera wartość z listy opcji w tym demie Codepen.

Aby użyć clamp(), wpisz 3 wartości: minimalną, idealną do obliczeń i maksymalną.

Funkcja clamp() utrzymuje wartość między określonym minimum a maksimum w tym demie Codepen.

Możesz używać tych funkcji wszędzie tam, gdzie dozwolone są te elementy: <length>, <frequency>, <angle>, <time>, <percentage>, <number> lub <integer>. Możesz ich używać samodzielnie (jak w font-size: max(0.5vw, 50%, 2rem)), z calc() (jak w font-size: max(calc(0.5vw - 1em), 2rem)) lub w formie złożonej (jak w font-size: max(min(0.5vw, 1em), 2rem)).

Oto kilka przykładów użycia tych funkcji.

Idealna szerokość

Według książki The Elements of Typographic Style Roberta Bringhursta „powszechnie uważa się, że wiersz o długości od 45 do 75 znaków jest odpowiedni dla strony jednokolumnowej z tekstem o standardowym rozmiarze i szeryfowym kroju pisma”.

Aby mieć pewność, że szerokość bloków tekstu będzie wynosić od 45 do 75 znaków, użyj jednostki clamp() i ch (szerokość znaku równa 0):

p {
  width: clamp(45ch, 50%, 75ch);
}

Dzięki temu przeglądarka może określić szerokość akapitu. Domyślnie szerokość jest ustawiona na 50%. Jeśli 50% to mniej niż 45ch, jako szerokość zostanie użyta wartość 45ch, a jeśli 50% to więcej niż 75ch, zostanie użyta wartość 75ch.

Użyj funkcji clamp(), aby ustawić minimalną i maksymalną szerokość. Zobacz wersję demonstracyjną w Codepen

Możesz też podzielić ten proces, używając tylko min() lub max(). Jeśli chcesz, aby element zawsze miał szerokość 50% i nie przekraczał szerokości 75ch na większych ekranach, użyj width: min(75ch, 50%);, aby ustawić maksymalny rozmiar.

Użyj funkcji min(), aby ustawić maksymalną szerokość.

W ten sam sposób możesz ustawić minimalny rozmiar czytelnego tekstu, używając funkcji max(), jak w width: max(45ch, 50%);. W tym przypadku przeglądarka wybiera większą wartość, co oznacza, że element musi mieć szerokość co najmniej 45ch.

Użyj funkcji max(), aby ustawić minimalną szerokość.

Zarządzanie dopełnieniem

Możesz też użyć max(), aby ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z witryny CSS Tricks, gdzie czytelnik Caluã de Lacerda Pataca podzielił się tym pomysłem: niech element ma dodatkowe dopełnienie na większych ekranach, ale zachowuje minimalne dopełnienie na mniejszych ekranach. Aby to zrobić, użyj calc() lub max() i odejmij minimalne dopełnienie po obu stronach elementu: calc((100vw - var(--contentWidth)) / 2) lub max(2rem, 50vw - var(--contentWidth) / 2). W arkuszu stylów powinno to wyglądać tak:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Ustaw minimalne dopełnienie komponentu za pomocą funkcji max(). Zobacz wersję demonstracyjną w Codepen

Płynna typografia

Aby umożliwić płynną typografię, Mike Riethmeuller spopularyzował technikę, która wykorzystuje funkcję clamp() do ustawiania minimalnego i maksymalnego rozmiaru czcionki oraz umożliwia skalowanie między tymi rozmiarami.

Użyj funkcji clamp(), aby utworzyć płynną typografię. Zobacz wersję demonstracyjną w Codepen

Przed wprowadzeniem clamp(), projektowanie skalowania czcionek wymagało złożonych ciągów stylów. Teraz możesz pozwolić przeglądarce wykonać pracę za Ciebie. Ustaw minimalny akceptowalny rozmiar czcionki (np. 1.5rem dla tytułu), maksymalny rozmiar (np. 3rem) i idealny rozmiar (np. 5vw). Teraz masz typografię, która skaluje się wraz z szerokością widocznego obszaru strony, aż osiągnie wartości minimalne i maksymalne, przy użyciu bardzo małej ilości kodu:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Więcej zasobów