Media queries bez pułapki, która psuje cały układ

Kolejność reguł i podejście mobile first Reguły w CSS działają kaskadowo. Jeśli najpierw napiszesz styl dla szerokiego ekranu, a potem dla wąskiego, ten drugi nadpisze pierwszy tylko wtedy, gdy warunek będzie spełniony. W praktyce wygodniej zacząć od układu dla wąskiego ekranu, a potem dodawać min-width dla coraz szerszych widoków. To podejście mobile first. Dzięki niemu telefon dostaje najprostszy, bazowy styl, a dodatkowe elementy pojawiają się dopiero, gdy jest na nie miejsce. Warto trzymać breakpointy w jednym miejscu i nie mieszać jednostek — raz piksele, raz em — bo przy zmianie rozmiaru czcionki reguły zaczną się rozjeżdżać.

Przy kompresji stratnej warto stosować maskowanie krawędzi: w programach graficznych istnieje opcja „wyostrz krawędzie" lub „zachowaj szczegóły", ale to tylko półśrodek. Lepiej zapobiec problemowi, niż go naprawiać. Jeśli już masz plik z artefaktami, nie licz na idealne odzyskanie jakości. Możesz spróbować delikatnego wygładzenia (np. filtr medianowy) albo rozmycia Gaussa o małym promieniu, ale to zawsze pogorszy ostrość. Jedynym pewnym rozwiązaniem jest ponowny eksport z oryginału z lepszymi ustawieniami.

Fixed ustawia się najprościej: position: fixed; top: 0; left: 0; width: 100%. Trzeba jednak pamiętać, że element znika z przepływu, więc treść pod nim wskoczy pod spód i schowa się za nagłówkiem. Rozwiązanie to rezerwa miejsca — padding-top na głównym kontenerze równy wysokości nagłówka albo pusty blok o tej samej wysokości. Wysokość najlepiej trzymać w zmiennej CSS, żeby nie poprawiać jej w dwóch miejscach przy każdej zmianie.

Media queries to reguły CSS, które włączają się dopiero przy określonej szerokości okna. Podstawowa składnia wygląda tak: @media (min-width: 768px) { ... }. Wszystko, co znajdzie się w nawiasach klamrowych, zadziała tylko wtedy, gdy warunek zostanie spełniony. Dla wąskiego ekranu używa się zwykle max-width, dla szerokiego min-width. Wartości podaje się w pikselach, em lub rem. Zapis @media screen and (max-width: 600px) oznacza: dotyczy ekranu i maksymalnie 600 pikseli szerokości.

Nagłówek, który nie zjeżdża z ekranu podczas przewijania, robi się na dwa sposoby: przez position: fixed albo position: sticky. Wybór nie jest obojętny, bo oba zachowują się inaczej w układzie strony i inaczej kosztują przeglądarkę. Fixed wyrywa element z normalnego przepływu dokumentu i przypina go do okna widoku. Sticky najpierw zachowuje się jak zwykły element, a po przekroczeniu progu przewijania przykleja się w obrębie swojego kontenera nadrzędnego.

Testuj w przeglądarce, zmniejszając okno płynnie, a nie skokowo między dwoma szerokościami. Sprawdź też widok przy powiększonej czcionce, bo użytkownik może mieć ustawiony większy rozmiar tekstu. Media queries działają na szerokość okna, a nie na rozdzielczość ekranu, więc telefon w trybie poziomym może zachowywać się jak tablet. Jeśli używasz max-width i min-width jednocześnie, pamiętaj, że zakresy nie mogą na siebie nachodzić, bo jedna reguła nadpisze drugą w nieprzewidywalny sposób. Najbezpieczniej trzymać się jednego kierunku — albo samych min-width, albo samych max-width.

Na koniec sprawdź zachowanie przy powiększeniu tekstu i przy nawigacji klawiaturą. Fixed i sticky nie mogą zasłaniać treści ani łapać fokusu poza ekranem. Przetestuj też kotwice — po kliknięciu w link do sekcji nagłówek może ją przykryć. Rozwiązaniem jest scroll-margin-top ustawiony na wysokość przyklejonego paska. Wybierz fixed, gdy nagłówek ma być widoczny zawsze i globalnie, a sticky, gdy ma działać tylko w obrębie wybranej sekcji i nie zabierać miejsca w układzie.

Najczęstszy błąd to zła nazwa. System może dopisać ukryte rozszerzenie i plik nazywa się w rzeczywistości index.html.txt. Sprawdź nazwę w oknie właściwości albo włącz wyświetlanie rozszerzeń w menedżerze plików. Druga pułapka to kodowanie znaków — jeśli w pliku są polskie litery, a zapisano go w innym kodowaniu niż zadeklarowane w nagłówku, strona pokaże krzaki. Zapisuj w UTF-8 i pilnuj zgodności z deklaracją w sekcji head.

Ustal zasadę, że modyfikator nigdy nie występuje samodzielnie. W HTML zawsze zostaje klasa bazowa: class="product-card product-card--compact". Dzięki temu selektor w CSS może być krótki i przewidywalny, a usunięcie modyfikatora nie psuje całego komponentu. Warto też trzymać się jednego poziomu podkreślników — jeśli pojawia się potrzeba drugiego, to sygnał, że komponent powinien zostać rozbity na mniejszy blok. Na przykład zamiast product-card__image__caption lepiej zrobić product-card__caption albo wydzielić osobny blok image-caption.

Osobny przypadek to link prowadzący do samej góry strony. Nie musisz tworzyć sztucznego id na początku dokumentu — wystarczy href="#" albo href="#top", choć pierwsza wersja bywa różnie interpretowana. Jeśli używasz przycisku „wróć na górę", upewnij się, że nie przeładuje strony i nie doda historii przeglądania przy każdym kliknięciu. Płynne przewijanie uzyskasz przez scroll-behavior: smooth w CSS na elemencie html, bez pisania JavaScriptu.