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

Dowiedz się, jak kontrolować rozmiar elementów, zachować odpowiedni odstęp i wdrożyć płynną typografię, korzystając z tych dobrze obsługiwanych funkcji CSS.

Una Kravets

Wraz z rozwojem elastycznego układu, język CSS jest stale udoskonalany, aby zapewnić autorom większą kontrolę. Funkcje min(), max() i clamp(), obsługiwane obecnie we wszystkich nowoczesnych przeglądarkach, należą do najnowszych narzędzi, które sprawiają, że tworzenie stron internetowych i aplikacji jest bardziej dynamiczne i responsywne. Za pomocą tych funkcji możesz kontrolować rozmiary elementów i ich 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.

Wartości i jednostki w CSS (poziom 4)

Obsługa przeglądarek

min()

max()

clamp()

Wykorzystanie

Możesz używać funkcji min(), max() i clamp() po prawej stronie dowolnego wyrażenia CSS, w którym ma to sens. W przypadku min() i max() podajesz listę argumentów z wartościami, 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 do szerokości elementu.

Funkcja max() działa podobnie w przypadku wartości maksymalnej.

Aby użyć właściwości clamp(), wpisz 3 wartości: minimalną, idealną i maksymalną.

Możesz używać tych funkcji w dowolnym miejscu, w którym dozwolone są funkcje <length>, <frequency>, <angle>, <time>, <percentage>, <number> lub <integer>. Możesz ich używać samodzielnie (jak w przypadku font-size: max(0.5vw, 50%, 2rem)), z użyciem calc() (jak w przypadku font-size: max(calc(0.5vw - 1em), 2rem)) lub w kompozycji (jak w przypadku font-size: max(min(0.5vw, 1em), 2rem)).

Poniżej znajdziesz kilka przykładów użycia tych funkcji.

Idealna szerokość

Według książki The Elements of Typographic Style Roberta Bringhursta „cokolwiek od 45 do 75 znaków jest powszechnie uznawane za zadowalającą długość wiersza w przypadku strony z jedną kolumną w czcionce szeryfowej o określonym rozmiarze tekstu”.

Aby mieć pewność, że bloki tekstu będą miały od 45 do 75 znaków szerokości, użyj clamp() i ch (character advance) o szerokości 0 znaków:

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% jest mniejsze niż 45ch, jako szerokość jest używana wartość 45ch, a jeśli 50% jest szersze niż 75ch, jest używana wartość 75ch.

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

W podobny sposób możesz ustawić minimalny rozmiar czytelnego tekstu za pomocą funkcji max(), tak jak w funkcji width: max(45ch, 50%);. Tutaj przeglądarka wybiera wartość, która jest większa, co oznacza, że element musi mieć szerokość 45ch lub większą.

Zarządzanie wypełnieniem

Możesz też użyć max(), aby ustawić minimalny rozmiar wypełnienia. Ten przykład pochodzi z CSS Tricks, gdzie czytelnik Caluã de Lacerda Pataca podzielił się tym pomysłem: dodaj elementowi dodatkowe wypełnienie na większych ekranach, ale zachowaj minimalne wypełnienie na mniejszych ekranach. Aby to zrobić, użyj właściwości calc() lub max() i odejmij minimalne wypeł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);
}

Typografia płynna

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

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

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

Więcej zasobów

• Wartości i jednostki CSS na stronie MDN
• Specyfikacja wartości i jednostek w usłudze porównywania cen na poziomie 4
• Artykuł CSS Tricks o szerokości wewnętrznego elementu
• min(), max(), clamp() Omówienie autorstwa Ahmada Shadeda

Zdjęcie okładki z @yer_a_wizard na Unsplash.