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.
Rozwiązanie to znacznik meta viewport umieszczony w sekcji head dokumentu HTML. W najprostszej wersji wygląda tak: . Pierwsza wartość mówi przeglądarce, żeby szerokość widoku odpowiadała fizycznej szerokości ekranu. Druga ustawia początkowy poziom powiększenia na 1, czyli bez zbędnego skalowania. Ta jedna linia zmienia sposób, w jaki telefon traktuje całą stronę.
Podsumowując: dziedziczenie w zagnieżdżonych listach nie jest wadą, tylko mechanizmem, który trzeba świadomie wykorzystać. Zamiast liczyć, że styl przejdzie w dół, pisz selektory dla konkretnego poziomu, używaj ::marker do znaczników i zawsze sprawdzaj, które właściwości faktycznie się dziedziczą. Dzięki temu unikniesz sytuacji, w której wewnętrzna lista wygląda inaczej, niż zakładałeś.
Najczęstszy błąd to walka z liczbami bez zrozumienia, która wartość wygrywa. Zamiast zmniejszać marginesy na oślep, ustal jeden rytm pionowy strony i trzymaj się go konsekwentnie. Gdy wiesz, że przerwa między blokami wynosi zawsze tyle samo, przestajesz dodawać odstępy „na wszelki wypadek”. Drugi typowy błąd to dodawanie pustych elementów odstępujących. Taki element sam wprowadza kolejne zapadanie i zwykle nic nie wnosi. Trzeci: stosowanie marginesów na elementach liniowych, które układają się w wiersz — tam odstępy liczą się inaczej.
Można to rozwiązać na dwa sposoby. Pierwszy to otoczenie pola znacznikiem label: Imię . Drugi to pozostawienie etykiety obok pola i wskazanie powiązania przez atrybut for: Imię . Oba są poprawne, ale mają inne konsekwencje. Otulenie wymaga ostrożności przy polach wyboru i przyciskach opcji, bo kliknięcie w etykietę może niechcący przełączyć wartość. Wersja z for daje większą kontrolę nad tym, co dokładnie jest klikalne.
Dla czytników ekranu liczy się przede wszystkim poprawne powiązanie. Gdy używasz for, upewnij się, że id jest unikalne i że etykieta występuje przed polem albo zaraz po nim w kolejności czytania. Nie ukrywaj etykiety przez display: none, jeśli ma opisywać pole — lepiej zastosować technikę wizualnego ukrycia, która pozostawia ją dostępną dla technologii asystujących. Pamiętaj też, że placeholder nie zastępuje etykiety: znika podczas pisania i bywa ignorowany przez niektóre czytniki.
Otwierasz stronę na telefonie i widzisz pomniejszoną wersję desktopu: tekst nieczytelny, przyciski wielkości ziarenka, trzeba powiększać gestem. To nie wina telefonu ani przeglądarki. Brakuje jednego znacznika, który mówi urządzeniu, jaką szerokość ma przyjąć. Bez niego telefon zgaduje i domyślnie renderuje stronę wirtualną szerokością około 980 pikseli, a potem ściska całość do swojego ekranu.
Gdzie to wstawić i czego nie dodawać Znacznik musi znaleźć się w head, najlepiej zaraz po deklaracji kodowania znaków. Kolejność ma znaczenie: jeśli wstawisz go po dużych blokach CSS albo na końcu body, przeglądarka może zdążyć wyrenderować stronę w złym trybie. Uważaj też na kopiowanie gotowych fragmentów z różnych źródeł — często zawierają one dodatkowe parametry, które psują efekt. Na przykład maximum-scale=1 lub user-scalable=no blokują użytkownikowi powiększanie. To pozornie wygodne, ale utrudnia korzystanie osobom słabowidzącym i bywa podstawą skarg dostępnościowych.
Samo dodanie meta viewport nie naprawi jednak strony zbudowanej na sztywnych szerokościach. Jeśli kontener ma wpisane width: 1200px, telefon nadal będzie ściskał treść albo pokaże poziomy suwak. Meta viewport to warunek konieczny, ale nie wystarczający. Dopiero razem z elastycznym układem, procentowymi szerokościami i obrazkami skalującymi się do kontenera daje czytelny efekt na każdym ekranie.
Sprawdź swoje alty w praktyce. Wyłącz obrazy w przeglądarce i zobacz, czy strona nadal ma sens. Uruchom czytnik ekranu i przesłuchaj, co mówi przy każdym obrazie. Zwróć uwagę na powtórzenia, na teksty typu „obraz” czy „zdjęcie” — one nic nie wnoszą, bo czytnik i tak zapowie, że to grafika. Poprawiaj też alty, gdy zmienia się kontekst strony. To kilka minut pracy, która decyduje, czy odbiorca rozumie treść, czy tylko słyszy szum.
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.
If you adored this article and you would certainly such as to obtain additional details pertaining to Dawidkaminski42.Werite.net kindly go to our own web-page.