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

Dowiedz się, jak kontrolować rozmiar elementów, zachowywać prawidłowe odstępy i wdrażać elastyczną typografię za pomocą tych dobrze obsługiwanych funkcji CSS.

Una Kravets

W miarę jak projektowanie responsywne staje się coraz bardziej złożone, CSS nieprzerwanie ewoluuje, zwiększyliśmy kontrolę. min(), max() i funkcje clamp(), obsługiwanych obecnie we wszystkich nowoczesnych przeglądarkach, należą do najnowszych narzędzi tworzenie bardziej dynamicznych i elastycznych stron internetowych i aplikacji. Możesz użyć tych do kontrolowania rozmiaru i rozmiaru elementów oraz zachowania odstępów między oraz tworzyć elastyczną i płynną typografię.

W funkcjach matematycznych calc(), min(), max() i clamp() można używać wyrażeń matematycznych z dodawaniem (+, odejmowaniem (-)), mnożeniem (*) i dzieleniem (/) jako wartości składowych

Wartości i jednostki CSS – poziom 4

Obsługa przeglądarek

min()

max()

clamp()

Wykorzystanie

Możesz użyć min(), max() i clamp() po prawej stronie dowolnej usługi porównywania cen gdzie ma sens. W przypadku usług min() i max() podajesz: z listy argumentów, a przeglądarka określa, która z nich jest najmniejszą lub największą. Na przykład w przypadku ciągu width: min(1rem, 50%, 10vw), przeglądarka oblicza, która z tych względnych jednostek jest najmniejsza, i używa i ustawić tę wartość szerokości elementu.

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

Aby użyć funkcji clamp(), wpisz 3 wartości: minimalną, idealną obliczać na podstawie i wartość maksymalną.

Funkcji tych możesz używać wszędzie tam, gdzie znajdują się: <length>, <frequency>, Dozwolone wartości: <angle>, <time>, <percentage>, <number> i <integer>. Ty mogą korzystać z nich samodzielnie (tak jak w usłudze font-size: max(0.5vw, 50%, 2rem)), a przy tym calc() (jak w font-size: max(calc(0.5vw - 1em), 2rem)) lub skomponowane (na przykład font-size: max(min(0.5vw, 1em), 2rem)).

Poniżej przedstawiliśmy kilka przykładów użycia tych funkcji.

Idealna szerokość

Według The Elements of Typographic Styl przez Roberta Bringhursta: „wszystko od 45 do 75 znaków jest powszechnie uznawane wystarczająca długość wiersza dla strony jednokolumnowej ustawionej w płaszczyźnie tekstu szeryfowej w rozmiarze tekstu”.

Aby bloki tekstu miały od 45 do 75 znaków szerokości, użyj clamp() i ch (0-width przejście znaku) jednostka:

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

Dzięki temu przeglądarka może określić szerokość akapitu. Ustawia szerokość na domyślnie 50%. Jeśli wartość 50% jest mniejsza niż 45ch, szerokość jest ustawiona jako 45ch a jeśli 50% jest szersze niż 75ch, używa parametru 75ch.

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

W ten sam sposób możesz ustawić minimalny rozmiar czytelnego tekstu, używając atrybutu max() funkcji, na przykład width: max(45ch, 50%);. Przeglądarka wybiera w tym miejscu jest większa, co oznacza, że element musi mieć co najmniej 45ch.

Zarządzaj dopełnieniem

Za pomocą max() możesz też ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z sztuczki CSS, w której czytelnik Caluò de Lacerda Pataca podzielił się swoim pomysłem: Niech żywioł ma dodatkowe dopełnienie w przypadku większych ekranów, ale pozostaw minimalne dopełnienie przy mniejszym rozmiarów ekranu. W tym celu użyj funkcji calc() lub max() i odejmij minimalną wartość dopełnienie po obu stronach elementu: calc((100vw - var(--contentWidth)) / 2), lub max(2rem, 50vw - var(--contentWidth) / 2). W arkuszu stylów wygląda tak:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Typografia płynna

Aby włączyć typową typografię: Mike Riethmeuller spopularyzował technikę używająca funkcji clamp() do ustawiania minimalnego i maksymalnego rozmiaru czcionki i umożliwia skalowanie między tymi rozmiarami.

Przed clamp(), zaprojektowaniem skalowania czcionek wymagało ciągów złożonych stylów. Teraz, możesz pozwolić, by przeglądarka zrobiła to za Ciebie. Ustaw minimalną akceptowaną czcionkę rozmiar (na przykład 1.5rem w przypadku tytułu), maksymalny rozmiar (np. 3rem) oraz idealny rozmiar (np. 5vw). Teraz masz typografię, która skaluje się razem z do szerokości widocznego obszaru do momentu osiągnięcia granicy wartości minimalnej i maksymalnej, stosując metodę bardzo mało kodu:

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

Więcej zasobów

• Wartości i jednostki CSS w MDN
• Wartości CSS i specyfikacja jednostek poziomu 4
• Artykuł na temat sztuczek CSS na temat szerokości elementu wewnętrznego
• min(), max(), clamp() – omówienie według Ahmada Shadeeda

Zdjęcie okładki od @yer_a_wizard w Odchylenie.