Typowe błędy widać gołym okiem. Powtarzanie tego samego identyfikatora na kilku elementach — przeglądarka to zniesie, ale dokument przestaje być poprawny, a skrypt trafi tylko na pierwszy element. Stosowanie identyfikatora tam, gdzie wystarczyłaby klasa, i odwrotnie: nadawanie klas elementom, które występują raz i nigdy się nie powtórzą. Kolejny częsty problem to nazwy klas opisujące wygląd, na przykład „czerwony-tekst”, zamiast roli, na przykład „ostrzeżenie”. Gdy zmienisz kolorystykę, pierwsza nazwa stanie się kłamstwem.
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.
Na co uważać przy zagnieżdżonych kontenerach Problem pojawia się, gdy w środku jest kilka warstw z position. Najbliższy przodek z position wygrywa, nawet jeśli nie jest tym, o którym myślisz. Jeśli kontener ma position: relative, a wewnątrz niego jest jeszcze jeden element z position: absolute, to on staje się punktem odniesienia dla swoich dzieci. Łatwo wtedy o przesunięcie o kilka pikseli, którego nie widać w kodzie, a który wynika z paddingu lub obramowania przodka.
Drugi częsty błąd to ustawianie absolute bez żadnej wartości przesunięcia. Element z position: absolute i bez top, left, right ani bottom zachowuje się podobnie do static, ale wypada z normalnego przepływu dokumentu. Sąsiednie elementy przestają go omijać, co potrafi rozsypać cały układ. Zawsze podawaj konkretne wartości, np. top: 0 i right: 0, jeśli chcesz przypiąć element do narożnika.
Ustawienie position: absolute na elemencie nie działa w próżni. Taki element pozycjonuje się względem najbliższego przodka, który ma ustawione position inne niż static. Jeśli żaden przodek takiego position nie ma, punktem odniesienia staje się obszar początkowy dokumentu, czyli w praktyce cała strona. To najczęstsza przyczyna sytuacji, w której element zamiast siedzieć w prawym górnym rogu karty, wylatuje gdzieś na sam szczyt okna przeglądarki.
Na koniec: po dodaniu znacznika nie wystarczy odświeżyć stronę w przeglądarce mobilnej. Część przeglądarek buforuje ustawienia viewportu przy pierwszym wejściu. Testuj w trybie prywatnym albo wyczyść dane strony. Warto też sprawdzić, czy motyw lub framework nie wstawia własnego meta viewport — wtedy w kodzie pojawią się dwa takie znaczniki i jeden nadpisze drugi, często w nieprzewidywalny sposób.
Pilnuj spójności między href i id. Literówka w jednym z nich sprawia, że link pozornie działa — adres się zmienia — ale strona się nie przewija. Najczęstsze pomyłki to brak znaku # w href, wielka litera w jednym miejscu i mała w drugim oraz doklejona spacja na końcu nazwy. Sprawdzaj to w narzędziach deweloperskich przeglądarki: kliknij link i zobacz, czy adres zawiera dokładnie tę samą nazwę, którą widzisz w atrybucie id.
Bez znacznika meta viewport w sekcji head telefon zakłada, że strona ma szerokość około 980 pikseli. Efekt? Przeglądarka oddala całą witrynę, żeby zmieściła się na ekranie. Użytkownik widzi miniature, w którą musi celować palcem i powiększać, żeby cokolwiek przeczytać. Wystarczy jedna linia kodu, żeby to zmienić.
Kotwica to zwykły link prowadzący do miejsca na tej samej stronie. Działa dzięki temu, że element docelowy ma atrybut id, a odnośnik kończy się znakiem # i tą samą nazwą. Przykład: w nagłówku sekcji wpisujesz id=”kontakt”, a w linku href=”#kontakt”. Po kliknięciu przeglądarka przewija dokument tak, aby element z tym id znalazł się u góry okna. Nie potrzebujesz do tego żadnego skryptu ani dodatkowej biblioteki.
Jak procenty współpracują z gap i paddingi
Na koniec rzecz, o której łatwo zapomnieć: kotwice działają też w adresie strony. Wysłanie komuś linku zakończonego #cennik sprawi, że odbiorca wyląduje od razu przy tej sekcji. Warto więc nadawać id krótkie i zrozumiałe, bo stają się częścią adresu. Gdy zmieniasz nazwę id, popraw wszystkie odnośniki w menu, w treści i w stopce. Stare linki z zewnątrz przestaną wtedy trafiać w cel, dlatego przy większych zmianach rozważ pozostawienie poprzedniej kotwicy jako dodatkowego punktu.
Rozwiązanie jest proste: przodek, wewnątrz którego ma być osadzony element absolutny, musi dostać position: relative. Wtedy absolute liczy współrzędne od krawędzi tego przodka, a nie od dokumentu. Wystarczy dopisać jedną regułę w CSS, np. dla kontenera karty, i element wraca na swoje miejsce. Warto pamiętać, że relative nie zmienia położenia samego kontenera — tylko tworzy układ odniesienia dla dzieci z absolute.
To read more info about Freereadinglist.Com look at the website.