4 jednostki CSS, które decydują o skalowaniu czcionki

Rozmiar czcionki w CSS można ustawić na kilka sposobów i każdy z nich zachowuje się inaczej przy zmianie ustawień przeglądarki lub rozmiaru okna. Najczęściej używane jednostki to px, em, rem, a obok nich procenty. Zrozumienie, co skaluje się z czym, pozwala uniknąć layoutu, który rozsypuje się u użytkownika powiększającego tekst.

Kolejna typowa pomyłka to traktowanie fr jak procentów. Procenty odnoszą się do szerokości kontenera i nie uwzględniają odstępów w ten sam sposób, co może dawać inne wyniki przy tej samej liczbie kolumn. Jednostka fr jest elastyczna: jeśli jedna kolumna ma mniej treści, nie znaczy to, że będzie węższa — chyba że użyjesz minmax albo auto. Wartość auto w kolumnie sprawia, że szerokość zależy od zawartości, a fr rozdziela dopiero resztę. Świadome mieszanie tych dwóch podejść daje przewidywalne efekty.

Nie ma jednej słusznej odpowiedzi — wybierz metodę zależnie od układu formularza. Przy prostych formularzach wystarczy label otaczający pole. Przy rozbudowanych siatkach wygodniej użyć for i id. Niezależnie od wyboru, konsekwencja w całym serwisie ułatwia utrzymanie kodu i poprawia dostępność. Najgorsze rozwiązanie to label postawiony obok pola bez żadnego powiązania — wtedy użytkownik klika i nic się nie dzieje.

Kluczowa rzecz: flex-basis działa tylko na bezpośrednich dzieciach kontenera flex. Jeśli ustawisz procent na wnuku, który nie jest elementem flex, nic się nie stanie. Drugi warunek: rodzic musi mieć określoną szerokość lub wysokość, bo procent z niczego nie policzy się poprawnie. Gdy rodzic jest elementem inline, ma width: auto albo jego rozmiar zależy tylko od zawartości, procent może zostać zignorowany lub policzony w nieprzewidywalny sposób. Najprostsze zabezpieczenie to nadanie rodzicowi konkretnej szerokości, max-width albo display: flex z określonym rozmiarem.

Lista numerowana służy wtedy, gdy kolejność jest istotna. Przepisy kulinarne, instrukcje montażu, procedury bezpieczeństwa, kroki w procesie reklamacyjnym — wszystko, gdzie pomylenie kolejności psuje efekt. Numeruj tylko wtedy, gdy naprawdę trzeba się do czegoś odwołać („punkt 3 mówi o…"). Jeśli numeracja jest przypadkowa, lepiej użyć listy punktowanej. Typowy błąd: numerowanie elementów, które są równorzędne, np. cech produktu — czytelnik szuka wtedy logiki, której nie ma.

Lista to nie ozdoba tekstu, lecz narzędzie porządkowania informacji. Sięgamy po nią wtedy, gdy czytelnik musi coś policzyć, zapamiętać albo porównać. Jeśli treść da się opowiedzieć płynnym zdaniem, lista zwykle tylko ją rozbija. Pierwszy odruch przed wyborem rodzaju listy powinien być taki: sprawdź, czy elementy mają tę samą wagę i czy ich kolejność coś znaczy.

flex-basis działa podobnie do width, ale ma wyższy priorytet, dopóki nie ustawisz width z wartością inną niż auto. Domyślnie wynosi auto, co oznacza: weź rozmiar z width albo z zawartości. Najczęstszy błąd to ustawienie flex-basis: 0 bez jednostki i zdziwienie, że element zachowuje się inaczej niż przy width: 0. Zero bez jednostki jest poprawne dla flex-basis, ale już nie dla width — tam trzeba podać 0px. Kolejna pułapka: flex-basis ignoruje box-sizing w kontekście obliczania wolnego miejsca, więc padding i border dodają się do sumy i potrafią zepsuć proporcje.

Rem odwołuje się do rozmiaru czcionki elementu głównego, czyli html. Domyślnie to 16px, ale można to zmienić jedną regułą. Ustawienie html font-size: 62.5%; daje 10px, co upraszcza liczenie — 1.6rem to wtedy 16px. Rem nie mnoży się przez zagnieżdżenia, więc ten sam komponent wygląda identycznie niezależnie od miejsca w drzewie DOM. To czyni go najlepszym wyborem do typografii i odstępów w nowoczesnych projektach.

Procenty działają podobnie do em, bo również liczą się od rodzica. font-size: 100% to zwykle 16px, a 150% da 24px. W praktyce warto używać ich do ustawienia bazowego rozmiaru na html, a resztę budować w rem. Mieszanie jednostek bez planu prowadzi do sytuacji, w której część interfejsu skaluje się z ustawieniami przeglądarki, a część nie — i całość przestaje być przewidywalna.

Atrybut for wymaga zgodnego id Drugi sposób to label obok pola z atrybutem for, którego wartość musi być identyczna z id kontrolki. Przykład: E-mail . To rozwiązanie sprawdza się, gdy chcesz rozdzielić etykietę i pole w układzie strony. Najczęstszy błąd to literówka w id albo zmiana id w jednym miejscu bez poprawienia for. Wtedy kliknięcie w tekst nie przenosi fokusu, a czytnik ekranu nie odczyta nazwy pola. Warto sprawdzić, czy id nie powtarza się w dokumencie — duplikat zaburza powiązanie.

Zanim zaczniesz regulować flex-grow, sprawdź, czy kontener ma ustaloną szerokość i czy nie jest to flex-direction: column. W kolumnie wolne miejsce liczy się w pionie, a flex-basis odnosi się do wysokości — łatwo się pomylić. Kolejna praktyczna wskazówka: ustawiaj flex-basis w jednostkach względnych, na przykład procentach, tylko wtedy, gdy naprawdę chcesz zależności od rodzica. W przeciwnym razie używaj wartości auto i pozwól zawartości decydować. I pamiętaj: gdy elementy mają różne min-width, flex-shrink zatrzyma się na tym progu i dalsze kurczenie nie zadziała.