clamp()
Trzyma wartość w przedziale od minimum do maksimum, a pomiędzy pozwala jej płynnie rosnąć. Podstawa płynnej typografii.
Przykład
#.hero {
padding: clamp(16px, 4vw, 40px);
}
.hero h2 {
font-size: clamp(1.5rem, 1rem + 3vw, 2.75rem);
}<section class="hero" style="border-radius: 14px; background: linear-gradient(135deg, #1e1b4b, #0c4a6e);">
<h2 style="margin: 0 0 6px; line-height: 1.15;">Naucz się CSS w 30 dni</h2>
<p style="margin: 0; color: #cbd5e1;">Nagłówek i odstępy rosną razem z szerokością okna.</p>
</section>Nagłówek rośnie razem z ramką podglądu, ale nigdy nie będzie mniejszy niż 24 px (1.5rem) ani większy niż 44 px (2.75rem). Odstęp wokół treści działa tak samo, w granicach od 16 do 40 px.
Definicja i zastosowanie
#Funkcja clamp(MIN, PREFEROWANA, MAKS) zwraca wartość preferowaną, ale nigdy mniejszą niż minimum i nigdy większą niż maksimum. Zapis clamp(1rem, 4vw, 2rem) czyta się: „4% szerokości okna, ale nie mniej niż 1rem i nie więcej niż 2rem”. To skrót od max(MIN, min(PREFEROWANA, MAKS)), tylko krótszy i czytelniejszy.
Najczęstsze zastosowanie to płynna typografia: nagłówek rośnie razem z oknem, ale na telefonie nie robi się mikroskopijny, a na szerokim monitorze gigantyczny. Tak samo sprawdza się przy odstępach (padding: clamp(12px, 3vw, 32px)) i szerokościach (width: clamp(240px, 50%, 480px)). Jedna deklaracja zastępuje wtedy kilka progów w media queries.
Wartość środkowa powinna zależeć od czegoś zmiennego: od vw, cqi albo procentów. Stała, np. clamp(1rem, 20px, 2rem), nigdy się nie zmieni. Przy rozmiarze czcionki dodaj do vw składnik w rem, np. clamp(1rem, 0.8rem + 1.5vw, 2rem). Tekst zareaguje wtedy także na powiększenie strony i ustawienia czcionki w przeglądarce.
Jeśli minimum jest większe niż maksimum, wygrywa minimum. We wszystkich trzech argumentach możesz pisać działania bez słowa calc i mieszać jednostki.
Składnia
#clamp(<minimum>, <wartość preferowana>, <maksimum>)Parametry
#16px
Dolna granica. Kontener ma tu 140 px, więc 11cqi daje około 15 px, czyli za mało, i tekst dostaje minimum: 16 px. Przeciągnij prawy dolny róg ramki w prawo, a zobaczysz, kiedy napis zaczyna rosnąć.11cqi
Wartość, która obowiązuje, dopóki mieści się w granicach. Przy kontenerze szerokim na 200 px 11cqi daje 22 px, czyli coś pomiędzy minimum a maksimum. Tekst rośnie i maleje razem z ramką.26px
Górna granica. Kontener zajmuje całą ramkę, więc 11cqi przekracza 26 px i tekst zatrzymuje się na maksimum. Bez niego nagłówek w szerokim kontenerze rósłby bez końca.
Parametry w praktyce
#minimum
.demo { width: 140px; }
.demo h3 {
font-size: clamp(16px, 11cqi, 26px);
}wartość preferowana
.demo { width: 200px; }
.demo h3 {
font-size: clamp(16px, 11cqi, 26px);
}maksimum
.demo { width: 100%; }
.demo h3 {
font-size: clamp(16px, 11cqi, 26px);
}Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Kolejność argumentów jest stała: najpierw minimum, potem wartość preferowana, na końcu maksimum.
- Do
vww rozmiarze czcionki dodawaj składnik wrem, np.1rem + 2vw. Samvwnie reaguje na powiększenie strony, co utrudnia czytanie osobom słabiej widzącym. - W komponentach używaj
cqizamiastvw. Rozmiar będzie wtedy zależał od miejsca, które komponent dostał, a nie od całego okna.
Powiązane hasła
#- min()Wybiera najmniejszą z podanych wartości. Działa jak górny limit, np. szerokość 100% rodzica, ale nie więcej niż 600px.
- max()Wybiera największą z podanych wartości. Działa jak dolny limit, np. odstęp 5% szerokości, ale nigdy mniej niż 16px.
- calc()Wylicza wartość z działania matematycznego i pozwala łączyć różne jednostki, na przykład procenty z pikselami.
- font-sizeUstawia rozmiar czcionki.
- JednostkiPrzegląd jednostek długości w CSS: od stałych pikseli, przez em i rem zależne od czcionki, po jednostki okna, kontenera i siatki.
- @containerNakłada style zależnie od rozmiaru kontenera, a nie całego okna. Komponent dopasowuje się do miejsca, które dostał w układzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.