Dowiedz się, jak kontrolować rozmiar elementów, utrzymywać odpowiednie odstępy i wdrażać płynną typografię, korzystając z tych dobrze obsługiwanych funkcji CSS.
Projektowanie stron responsywnych staje się coraz bardziej złożone, dlatego CSS stale się rozwija, aby dać 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 responsywne. Za pomocą tych funkcji możesz kontrolować rozmiar i rozmiar elementów, utrzymywać odstępy między elementami oraz tworzyć elastyczną i płynną typografię.
Funkcje matematyczne
Wartości i jednostki CSS – poziom 4calc(),min(),max()iclamp()umożliwiają stosowanie jako wartości składowych wyrażeń matematycznych z dodawaniem (+), odejmowaniem (-), mnożeniem (*) i dzieleniem (/)
Obsługiwane przeglądarki
min()
max()
clamp()
Wykorzystanie
Możesz używać min(), max() i clamp() po prawej stronie dowolnego wyrażenia CSS w odpowiednich miejscach. W przypadku min() i max() podajesz listę 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 max() robi to samo z wartością maksymalną.
Aby użyć funkcji clamp(), wpisz 3 wartości: wartość minimalną, wartość idealną do obliczenia i wartość maksymalną.
Z tych funkcji można korzystać wszędzie tam, gdzie dozwolone są atrybuty <length>, <frequency>, <angle>, <time>, <percentage>, <number> i <integer>. Możesz ich używać oddzielnie (np. w font-size: max(0.5vw, 50%, 2rem)), za pomocą funkcji calc() (np. font-size: max(calc(0.5vw - 1em), 2rem)) lub tworzonej (jak w przykładzie font-size: max(min(0.5vw, 1em), 2rem)).
Poniżej znajduje się kilka przykładów użycia tych funkcji.
Idealna szerokość
Według The Elements of Typographic Style Robert Bringhursta za tekst o długości od 45 do 75 znaków powszechnie uznaje się za zadowalającą długość wiersza strony jednokolumnowej umieszczonej w tekście z szeryfem.
Aby mieć pewność, że bloki tekstu mają długość od 45 do 75 znaków, użyj jednostki clamp() i ch (przewijanie znaków o szerokości 0):
p {
width: clamp(45ch, 50%, 75ch);
}
Dzięki temu przeglądarka może określić szerokość akapitu. Domyślnie ustawia on szerokość na 50%. Jeśli 50% ma wartość mniejszą niż 45ch, używany jest atrybut 45ch, a jeśli 50% jest szerszy od 75ch, używany jest element 75ch.
Możesz też podzielić tę grupę, używając tylko min() lub max(). Jeśli chcesz, aby element zawsze miał szerokość 50%, a szerokości maksymalnie 75ch na większych ekranach, użyj width: min(75ch, 50%);, aby ustawić maksymalny rozmiar.
W ten sam sposób możesz ustawić minimalny rozmiar czytelnego tekstu za pomocą funkcji max() (np. width: max(45ch, 50%);). W tym przypadku przeglądarka wybiera tę, która jest większa, co oznacza, że element musi mieć rozmiar 45ch lub szerszy.
Zarządzaj dopełnieniem
Możesz też użyć elementu max(), aby ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z sztuczek CSS, gdzie czytelnik Caluão de Lacerda Pataca podzielił się tą koncepcją: wprowadzić dodatkowe dopełnienie przy większych rozmiarach ekranów i zachować minimalne dopełnienie przy mniejszych ekranach. Aby to zrobić, użyj funkcji 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);
}
Płynna typografia
Aby umożliwić Płyną typografię, Mike Riethmeuller spopularyzował metodę, która korzysta z funkcji clamp() do ustawiania minimalnego i maksymalnego rozmiaru czcionki oraz zezwalania na skalowanie między tymi rozmiarami.
Przed clamp(), projektowanie skalowania czcionki wymagało złożonych ciągów stylów. Teraz przeglądarka może wykonać pracę za Ciebie. Ustaw minimalny akceptowalny rozmiar czcionki (na przykład 1.5rem w przypadku tytułu), maksymalny rozmiar (np. 3rem) i idealny rozmiar (np. 5vw). Dzięki temu typografia skaluje się odpowiednio do szerokości widocznego obszaru strony aż do osiągnięcia limitu wartości minimalnej i maksymalnej przy użyciu bardzo małego kodu:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Więcej materiałów
- Wartości i jednostki CSS w MDN
- Wartości i jednostki CSS – specyfikacja na poziomie 4
- Artykuł o poradach CSS dotyczących szerokości elementu wewnętrznego
- min(), max(), clamp() Omówienie firmy Ahmad Shadeed
Zdjęcie okładki od użytkownika @yer_a_wizard w aplikacji Unsplash.