Jeden krój czy cały zapas? Co ratuje tekst, gdy czcionki brak
Domyślnie kontener flex ustawia wszystkie elementy w jednej linii i próbuje je zmieścić, zmniejszając ich szerokość. Gdy elementy mają sztywne wymiary albo długą, nieprzerywalną treść, dochodzi do ściskania, rozlewania się poza kontener albo poziomego paska przewijania. Właściwość flex-wrap decyduje, czy elementy mogą przejść do kolejnego rzędu. Ustawienie flex-wrap: wrap pozwala im się zawinąć zamiast walczyć o miejsce w jednej linii.
Praktyczna zasada jest prosta: do wyglądu używaj klas, do adresowania pojedynczych miejsc — identyfikatora. Identyfikator ma większą wagę w kaskadzie niż klasa, więc nadużywanie go prowadzi do sytuacji, w której musisz dopisywać coraz mocniejsze reguły, żeby cokolwiek nadpisać. Klasa daje przewidywalną kolejność i łatwo ją łączyć. Wyjątkiem bywają skrypty, które pobierają element po identyfikatorze, bo taki zapis jest najszybszy i najczytelniejszy.
Pamiętaj o znakach diakrytycznych i innych glifach. Nie każdy krój zapasowy zawiera polskie ogonki w każdej odmianie, dlatego warto sprawdzić, czy wybrany stos radzi sobie z ą, ę, ł, ż oraz ze znakami typograficznymi. Jeśli twój główny krój ma ozdobne warianty, a zapasowy ich nie ma, tekst może wyglądać niespójnie po przełączeniu. Wtedy lepiej zawęzić zestaw stylów albo przygotować osobny plik z brakującymi glifami.
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.
Do sterowania odstępami używaj gap, a nie marginów, bo gap działa między elementami i między liniami. Uwaga na min-width. Jeśli element ma min-width większy niż dostępna szerokość, nie skurczy się i wyjdzie poza kontener. To typowy błąd przy kartach z obrazkiem lub długim słowem, którego przeglądarka nie łamie. Rozwiązaniem jest min-width: 0 na elemencie potomnym oraz overflow-wrap: anywhere na tekście.
Najczęstszy błąd to zamykanie listy na jednej nazwie lub na wartościach, które nie istnieją w systemie. Druga pułapka to używanie nazw z cudzysłowami tylko wtedy, gdy zawierają spacje — to poprawne, ale nazwy bez spacji też warto ujmować w cudzysłów, jeśli mogą kolidować ze słowami kluczowymi CSS. Trzecia wpadka: wpisanie font-family: Arial, sans-serif i uznanie, że to już stos zapasowy. To nie jest stos, to jedna konkretna czcionka plus ogólna rodzina, która na każdym systemie wygląda inaczej.
Wybór między listą numerowaną, punktowaną i definicji nie jest kwestią estetyki, a logiki przekazu. Każda z nich odpowiada na inne pytanie czytelnika. Lista numerowana mówi: „w jakiej kolejności". Punktowana: „co się na to składa". Definicji: „co to właściwie znaczy". Jeśli pomylisz te role, odbiorca zgubi się w treści, nawet gdy zdania będą poprawne.
Drugi częsty problem to wysokość. Po zawinięciu elementy w jednej linii rozciągają się do najwyższego z nich, jeśli align-items ma wartość stretch. To bywa pożądane, ale przy kartach o różnej treści może wyglądać nierówno. Wtedy ustaw align-items: flex-start albo align-content, aby kontrolować rozkład całych linii. align-content działa tylko wtedy, gdy istnieje więcej niż jedna linia i kontener ma wolną przestrzeń w kierunku poprzecznym.
Nie trzymaj się jednak sztywno jednej formy w całym dokumencie. Krótka instrukcja może mieć numerację w częściach proceduralnych i punktowanie w uwagach. Ważne, by każda lista była wprowadzona zdaniem zapowiadającym i miała spójną interpunkcję. Sprawdź też, czy po zmianie formatu treść nadal się broni. Jeśli po zamianie numeracji na punktowanie sens się rozsypuje, kolejność była nośnikiem znaczenia — i dobrze, że została zapisana liczbowo.
Po otwarciu panelu zobaczysz strukturę dokumentu po lewej stronie i style po prawej. Kliknięcie dowolnego elementu w drzewie HTML powoduje podświetlenie go na stronie oraz wyświetlenie reguł CSS, które go dotyczą. Reguły są pogrupowane według arkuszy — od najważniejszych do nadpisanych. Możesz tymczasowo wyłączyć pojedynczą właściwość, odznaczając ją, albo dodać nową, klikając w puste pole w sekcji stylów. Wpisujesz nazwę właściwości, zatwierdzasz i od razu widzisz efekt.
Dobry stos czcionek to nie lista życzeń, lecz plan awaryjny. Traktuj go jak zabezpieczenie: im bardziej przewidywalne są kolejne kroje, tym mniejsze ryzyko, że nagła niedostępność jednego pliku zepsuje całą stronę.
Testuj stos, wyłączając kolejne kroje w narzędziach deweloperskich. Sprawdź, czy po podmianie na zapasowy tekst nadal mieści się w kontenerze, czy nagłówki nie łamią się na trzy linie i czy przyciski nie tracą czytelności. Zwróć uwagę na wysokość x, grubość i szerokość znaków — krój zapasowy o węższym kroju potrafi rozsypać siatkę, a szerszy wywoła poziomy pasek przewijania. Ustaw też jawnie line-height i font-size, zamiast liczyć, że wszystko wyrówna się samo.