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

Dowiedz się, jak kontrolować rozmiar elementów, zachować odpowiedni odstęp i wdrażać 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ć rozmiar i rozmiar elementów, 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 CSS – poziom 4

Obsługa przeglądarek

min()

max()

clamp()

Wykorzystanie

Możesz używać wartości 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ć funkcji clamp(), wpisz 3 wartości: minimalną, idealną do obliczenia wartości i wartość 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 przedstawiliśmy 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 wystarczają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) jako jednostki:

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

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

W ten sam sposób możesz ustawić minimalny rozmiar czytelnego tekstu, używając funkcji max(), jak w przypadku 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

Za pomocą max() możesz też ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z CSS Tricks, w którym czytelnik Caluò de Lacerda Pataca podzielił się tym pomysłem: umieść w elemencie dodatkowe dopełnienie na większych ekranach, ale zachowaj minimalne dopełnienie przy mniejszych ekranach. Aby to zrobić, użyj właściwości calc() lub max() i odejmij minimalne dopełnienie od obu stron 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ć korzystanie z elastycznej typografii, Mike Riethmeuller spopularyzował technikę, która wykorzystuje funkcję clamp() do ustawienia minimalnego i maksymalnego rozmiaru czcionki oraz umożliwienie skalowania między tymi rozmiarami.

Przed clamp(), zaprojektowaniem skalowania czcionek wymagało ciągów złożonych 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 viewportu strony, aż do osiągnięcia ograniczających wartości minimalnych i maksymalnych, 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.