Jeden krój czy cały zapas? Co ratuje tekst, gdy czcionki brak
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.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Kolejny częsty problem to kolor znaczników. Kolor tekstu dziedziczy się na li, ale sam znacznik (punkt) w niektórych przeglądarkach przyjmuje kolor elementu listy, a nie tekstu w nim zawartego. Jeśli chcesz mieć czerwone punkty i czarny tekst, ustaw kolor na li, a następnie nadpisz go na wewnętrznym elemencie tekstowym lub użyj ::marker. Pseudo-element ::marker daje bezpośrednią kontrolę nad kolorem, rozmiarem i rodzajem znacznika, ale działa tylko na li i nie dziedziczy się w dół. To najczystsze rozwiązanie, gdy zależy ci na precyzji.<br>
<br>
<br>
<br>
Ustawienie position: absolute na elemencie sprawia, że zaczyna on żyć w oderwaniu od normalnego przepływu dokumentu. Pozostali sąsiedzi go nie widzą, nie robią mu miejsca, a on sam nie wpycha się między nich. Żeby jednak wiedzieć, gdzie dokładnie się znajdzie, przeglądarka musi znaleźć punkt odniesienia. Tym punktem jest najbliższy przodek, który ma ustawione position inne niż static — czyli relative, absolute, fixed albo sticky. Gdy takiego przodka brak, element pozycjonuje się względem początkowego bloku zawierającego, najczęściej okna przeglądarki. To dlatego absolut bez rodzica z relative potrafi wylądować w losowym miejscu strony.<br>
<br>
<br>
<br>
Nie mieszaj też nagłówków bez planu. Każdy section i article powinien mieć nagłówek, ale nie musisz zaczynać od h1. Wystarczy hierarchia od h2 w dół, zależnie od kontekstu. Pamiętaj, że walidator HTML nie wychwyci błędów semantycznych — one nie psują kodu, ale utrudniają korzystanie ze strony. Dlatego zamiast mnożyć znaczniki, lepiej najpierw rozpisz strukturę treści, a potem dopasuj do niej elementy.<br>
<br>
<br>
<br>
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.<br>
<br>
<br>
<br>
Najczęstszy i najbezpieczniejszy wzorzec to para: rodzic z position: relative, dziecko z position: absolute. Rodzic nie zmienia swojego położenia, bo relative bez przesunięć nie rusza go z miejsca, ale staje się punktem odniesienia. Dziecko ustawiasz wtedy przez top, right, bottom i left, liczone od krawędzi rodzica. Wartości procentowe odnoszą się do wymiarów rodzica, więc top: 50% oznacza połowę jego wysokości, a nie wysokości okna.<br>
<br>
<br>
<br>
Kiedy article w section, a kiedy section w article Odwrotna sytuacja, czyli section wewnątrz article, sprawdza się, gdy w jednym artykule wydzielasz logiczne części. Artykuł może mieć wstęp, rozwinięcie i podsumowanie — każda z tych części może być osobnym section z własnym nagłówkiem. Pamiętaj jednak, że section nie może istnieć bez nazwy. Jeśli nie masz dla niego dobrego nagłówka, użyj div. To najczęstszy błąd: autorzy wstawiają section dla „lepszej semantyki", a potem nie potrafią go nazwać.<br>
<br>
<br>
<br>
Trzy rzeczy, które psują to ustawienie Pierwszy problem to brak wymiarów rodzica. Element relative, który nie ma wysokości ani szerokości, bo zawiera tylko absolutne dzieci, zapada się do zera. Dzieci nie nadają mu rozmiaru, bo wypadły z przepływu. W efekcie absolut ustawia się względem punktu, a nie prostokąta, i wszystko się rozjeżdża. Rozwiązanie: nadaj rodzicowi jawną wysokość, minimalną wysokość albo padding, który utrzyma jego wymiary.<br>
<br>
<br>
<br>
Uwaga na pułapkę związaną z resetowaniem stylów. Globalny reset typu * margin: 0; padding: 0; usunie wcięcia także z zagnieżdżonych list, przez co poziomy przestaną być widoczne. Po resecie trzeba ręcznie przywrócić odstępy dla każdego poziomu zagnieżdżenia. Podobnie z font-size: jeśli ustawisz go na rodzicu, wewnętrzna lista odziedziczy tę wartość i głębsze poziomy mogą stać się nieczytelne. Warto wtedy zastosować jednostki względne lub jawnie nadpisać rozmiar na wybranym poziomie. Testuj w kilku przeglądarkach, bo domyślne style list różnią się między nimi — to najczęstsze źródło niespodzianek.