Co zrobić, gdy nagłówek ma zostać na ekranie przy przewijaniu?

Drugą pułapką jest łączenie selektorów bez potrzeby. Zapis typu element.klasa inna-klasa podnosi specyficzność i utrudnia późniejsze nadpisanie, zwłaszcza gdy trzeba szybko poprawić jeden widok. Trzymaj selektory możliwie krótkie i płaskie. Jeśli musisz coś wymusić, użyj flagi ważności świadomie i skomentuj powód, bo inaczej za tydzień nikt nie będzie wiedział, dlaczego zwykła zmiana nie działa.

Obraz dekoracyjny, czyli taki, który nic nie wnosi — separator, tło, ozdobnik — powinien mieć alt="". Pusty alt mówi czytnikowi: pomiń mnie. Uwaga na częsty błąd: brak atrybutu alt wcale nie jest tym samym. Wtedy czytnik odczyta nazwę pliku, np. „IMG_2043.jpg", co jest bezsensownym hałasem. Drugi błąd to wrzucanie do alt tekstu, który już jest obok, np. powtórzenie podpisu pod zdjęciem. Trzeci: traktowanie alt jako miejsca na frazy pod pozycjonowanie. To psuje doświadczenie osób korzystających z czytnika i bywa karane przez wyszukiwarki.

Jak zbudować sam link i co się dzieje po kliknięciu Odnośnik tworzysz w zwykłym znaczniku a, wpisując w href znak # i wartość id bez cudzysłowów: Przejdź do kontaktu. Po kliknięciu przeglądarka przewija stronę tak, aby element z tym id znalazł się na górze okna. Nie musisz dodawać JavaScriptu ani żadnej biblioteki. Jeśli chcesz, aby po skoku adres w pasku przeglądarki zawierał identyfikator sekcji, nic więcej nie rób — dzieje się to automatycznie.

Kaskadowość arkuszy stylów działa na zasadzie prostej umowy: gdy dwie reguły dotyczą tego samego elementu i mają taką samą wagę, wygrywa ta zapisana później. Dlatego przeniesienie bloku kodu w pliku potrafi zmienić wygląd strony bez ruszania ani jednej wartości. Warto o tym pamiętać w chwili, gdy poprawka nie działa, choć wydaje się poprawna. Zanim zaczniesz podejrzewać przeglądarkę, sprawdź, czy ktoś niżej nie nadpisał tego samego selektora.

Najczęstszy błąd to pominięcie znaku # w href. Link prowadzący do "kontakt" bez krzyżyka zostanie potraktowany jako ścieżka do innego pliku i zakończy się błędem 404. Drugi typowy problem to wielkość liter: id="Kontakt" i href="#kontakt" to dla przeglądarki dwa różne cele. Trzeci przypadek to cel ukryty lub nieistniejący w danym momencie — jeśli sekcja ma display: none albo pojawia się dopiero po kliknięciu w przycisk, przewinięcie nie zadziała. Wtedy albo przenieś id wyżej, do widocznego kontenera, albo najpierw odsłoń sekcję, a dopiero potem wykonaj skok.

Najprostsze i najbardziej przewidywalne rozwiązanie to usunięcie białych znaków w kodzie. Zamiast wstawiać elementy w osobnych liniach, zapisz je bezpośrednio obok siebie. HTML tego nie wymaga, ale przeglądarka nie wstawi wtedy żadnej spacji. Alternatywa to komentarz HTML między elementami — również eliminuje spację, choć zaśmieca źródło. Trzecia metoda to ustawienie na kontenerze font-size: 0 i przywrócenie rozmiaru w elementach potomnych. Działa, ale jeśli w środku znajduje się tekst bez własnego font-size, zniknie z ekranu.

Najczęstszy błąd polega na mieszaniu plików i kolejności ich dołączania. Jeśli w jednym arkuszu ustawiasz kolor nagłówka, a w innym — dołączonym później — definiujesz ten sam selektor, efekt zależy od kolejności znaczników w dokumencie, a nie od tego, który plik jest „ważniejszy" w twoim odczuciu. Ta sama zasada dotyczy arkuszy wstrzykiwanych przez skrypty i moduły: wczytują się w momencie wykonania, więc ich reguły lądują na końcu i potrafią wyciszyć wszystko, co było wcześniej.

Nagłówek, który zostaje na ekranie podczas przewijania, uzyskasz na dwa sposoby: przez position: fixed albo position: sticky. Wybór między nimi nie jest kwestią gustu, bo oba zachowują się inaczej względem otoczenia. Fixed wyrywa element z dokumentu i przypina go do okna przeglądarki. Sticky zostawia element w układzie strony i przykleja go dopiero wtedy, gdy podczas przewijania dotrze on do zadanej granicy.

Specyficzność wygrywa z kolejnością Kolejność rozstrzyga dopiero przy równych szansach. Selektor o wyższej specyficzności wygra nawet wtedy, gdy stoi wyżej w pliku. Klasy i atrybuty biją selektory elementów, identyfikatory biją klasy, a styl w atrybucie elementu bije wszystko poza deklaracją z flagą ważności. Praktyczny wniosek jest taki: zanim przesuniesz regułę, sprawdź, czy nie wystarczy zawęzić selektora. Przesuwanie kodu w nieskończoność to walka z objawem, nie z przyczyną.

Właściwość font-family przyjmuje listę nazw oddzielonych przecinkami. Przeglądarka czyta ją od lewej do prawej i używa pierwszej dostępnej. Na końcu tej listy prawie zawsze pojawia się rodzaj ogólny, czyli słowo kluczowe takie jak serif, sans-serif, monospace, cursive lub fantasy. To nie jest nazwa konkretnego kroju pisma. To zbiór cech, według których system wybiera dowolny dostępny font pasujący do kategorii.