Co zrobić, gdy nagłówek ma zostać na ekranie przy przewijaniu?
W praktyce wygląda to tak: ustawiasz na kontenerze display: flex, flex-wrap: wrap, a na dzieciach elastyczne szerokości, na przykład flex: 1 1 240px. Wartości w skrócie flex oznaczają odpowiednio: zdolność do rozciągania, zdolność do kurczenia i bazową szerokość. Gdy dostępne miejsce pozwala na trzy kolumny, zobaczysz trzy. Gdy zrobi się węższe, czwarty element spadnie do nowej linii, a pozostałe zachowają sensowną szerokość zamiast zamieniać się w pionowe paski.<br>
<br>
<br>
<br>
Zacznij od pytania, czy obraz zawiera dużo kolorów przechodzących płynnie w siebie. Zdjęcia i fotorealistyczne renderowania niemal zawsze wymagają formatu z kompresją stratną, takiego jak JPEG. Ikony, schematy i wykresy składają się z ostrych krawędzi, jednolitych plam i cienkich linii — tu JPEG wypada źle, bo rozmywa kontury i tworzy szum wokół liter oraz osi. W takich przypadkach wybieraj formaty bezstratne: PNG dla grafiki z przezroczystością, a przy prostych ikonach jednokolorowych warto rozważyć SVG, czyli zapis wektorowy.<br>
<br>
<br>
<br>
Zanim zmienisz display, sprawdź w narzędziach deweloperskich, jak element zachowuje się domyślnie. Często wystarczy drobna korekta, a nie przepisywanie całego układu. Pamiętaj też, że display: none usuwa element z przepływu, a visibility: hidden tylko go ukrywa, zostawiając puste miejsce. Te dwie właściwości mylone są nagminnie i potrafią zepsuć zarówno układ, jak i dostępność strony.<br>
<br>
<br>
<br>
Niezależnie od wybranej metody sprawdź trzy rzeczy: czy treść nie chowa się pod nagłówkiem, czy przyklejony element nie zasłania ważnych przycisków oraz czy po powiększeniu tekstu w przeglądarce nagłówek nadal mieści się w jednej linii. Testuj na wąskim ekranie i przy długiej stronie — dopiero tam wychodzą błędy, których nie widać w krótkim podglądzie.<br>
<br>
<br>
<br>
Ikony: przezroczystość i skalowanie bez utraty ostrości Ikona musi działać w wielu rozmiarach — od kilkunastu pikseli w menu po kilkadziesiąt na ekranie o wysokiej gęstości. Jeśli tworzysz ją raz i chcesz używać wielokrotnie, rysuj w programie wektorowym i zapisuj jako SVG. Taki plik zachowuje ostrość niezależnie od powiększenia, a jego rozmiar jest niewielki. Gdy SVG nie jest obsługiwany, eksportuj ikonę do PNG w docelowym rozmiarze, np. 16, 24 i 48 pikseli osobno. Nie skaluj jednego małego PNG w górę — to najczęstszy błąd, który daje rozmazane krawędzie. Uważaj też na przezroczystość: JPEG jej nie przechowuje i zastąpi ją białym tłem, co psuje ikonę na ciemnym interfejsie.<br>
<br>
<br>
<br>
Inline-block to hybryda. Element nadal ustawia się w linii z innymi, ale zyskuje możliwość ustawiania width, height, margin i padding bez rozrywania układu. Świetnie sprawdza się przy przyciskach, kartach czy elementach nawigacji, które mają stały rozmiar, ale mają stać obok siebie. Uwaga na whitespace w kodzie HTML — spacja między elementami inline-block tworzy dodatkowy odstęp. Można go usunąć, pisząc znaczniki bez odstępu, komentując go albo ustawiając font-size: 0 na rodzicu i przywracając go na dzieciach.<br>
<br>
<br>
<br>
Każdy element HTML ma domyślny sposób zajmowania miejsca w układzie strony. Zanim zaczniesz ustawiać szerokości, marginesy i wyrównania, musisz wiedzieć, czy dany element jest block, inline czy inline-block. Od tego zależy, czy będzie rozpychał sąsiadów w pionie, czy tylko w linii tekstu, i czy w ogóle zareaguje na width oraz height.<br>
<br>
<br>
<br>
Gdy elementy mają różną zawartość, flex-basis w procentach bywa mylące, bo nie gwarantuje równej szerokości, jeśli flex-shrink i flex-grow są ustawione inaczej. Domyślne flex-shrink: 1 pozwala elementom się kurczyć poniżej basis, gdy brakuje miejsca. Jeśli chcesz sztywnego podziału, ustaw flex-shrink: 0. I ostatnia rzecz: procenty w flex-basis nie działają względem rozmiaru samego elementu ani względem sąsiadów — tylko względem rodzica. Testuj układ przy różnych szerokościach okna, bo to najszybciej pokazuje, czy procenty faktycznie odnoszą się do tego, czego oczekujesz.<br>
<br>
<br>
<br>
Na urządzeniach mobilnych oba rozwiązania potrafią psuć wrażenia. Nagłówek fixed zjada pionową przestrzeń, a sticky przy pasku adresu przeglądarki może drgać. Zadbaj o kompaktową wysokość nagłówka, a jeśli to możliwe, ukrywaj go przy przewijaniu w dół i pokazuj przy przewijaniu w górę. Taka zmiana wymaga kilku linijek skryptu i zwykle wystarcza do poprawy komfortu.<br>
<br>
<br>
<br>
Znacznik ważności to ostateczność. Dopisanie go do deklaracji sprawia, że wygrywa ona z większością innych, niezależnie od kolejności. To wygodne, ale łatwo o bałagan: gdy w projekcie pojawia się kilka takich deklaracji, zaczynają walczyć ze sobą i trudno przewidzieć wynik. Jeśli musisz go użyć, stosuj go punktowo i komentuj, dlaczego dana reguła ma być nadrzędna. W przeciwnym razie po miesiącu nikt nie będzie wiedział, która linia tak naprawdę steruje wyglądem.<br>
<br>
<br>
<br>
Elementy block, jak div, p, h1 czy section, zajmują całą dostępną szerokość rodzica i zaczynają się od nowej linii. Kolejny element block wyląduje pod nim, nawet jeśli wizualnie zostałoby miejsce obok. Możesz swobodnie ustawiać im width, height, margin i padding we wszystkich kierunkach. Typowy błąd to wrzucanie span do akapitu i próba nadania mu szerokości bez zmiany display — wtedy width zostanie zignorowany, a element nadal będzie płynął w linii tekstu.