Header i nav czy main i footer — co naprawdę opisuje układ strony
Wybór formatu pliku graficznego najczęściej sprowadza się do jednego pytania: czy obraz ma mieć przezroczyste tło, czy nie. PNG obsługuje kanał alfa, więc potrafi zapisać obszary całkowicie lub częściowo przezroczyste. JPEG tego nie zrobi — nie ma kanału alfa i każdy piksel musi mieć pełny kolor. Jeśli więc przygotowujesz logo, ikonę, przycisk albo element interfejsu, który ma leżeć na innym tle, PNG jest naturalnym wyborem. Próba zapisania takiego elementu jako JPEG kończy się tym, że przezroczystość zostaje zastąpiona białym lub czarnym tłem, zależnie od programu. To jeden z najczęstszych błędów przy eksporcie grafiki.<br>
<br>
<br>
<br>
Jak świadomie wykorzystać kolejność zapi<br>
<br>
<br>
<br>
Kolor tekstu i obramowanie zachowują się w drzewie dokumentu zupełnie inaczej, choć w arkuszu stylów wyglądają podobnie. Właściwość color jest dziedziczona: dziecko, które nie ma własnej reguły, dostaje wartość od rodzica i pokazuje ten sam kolor znaków. Właściwości border nie są dziedziczone: element potomny nie dostaje ramki tylko dlatego, że miała ją sekcja nadrzędna. Zrozumienie tej różnicy oszczędza mnóstwo czasu przy debugowaniu układu.<br>
<br>
<br>
<br>
Przy zapisie PNG zwróć uwagę na typ koloru. Dla grafiki z przezroczystością wybierz tryb RGBA, a nie RGB — inaczej kanał alfa zniknie. Dla prostych ikon w jednym kolorze wystarczy paleta z przezroczystym indeksem, co daje mniejszy plik. Unikaj natomiast zapisywania zdjęć w PNG, jeśli nie masz konkretnego powodu — różnica w rozmiarze bywa kilkukrotna. I pamiętaj, że przezroczystość w PNG działa też jako półprzezroczystość, co bywa przydatne przy cieniach i nakładkach, ale w JPEG nie ma na to miejsca.<br>
<br>
<br>
<br>
Na koniec: nie ufaj automatycznym optymalizatorom, które „bezstratnie" zmniejszają rozmiar. Część z nich stosuje agresywne kwantyzacje, które psują krawędzie. Zawsze sprawdź wynikowy plik w powiększeniu, zanim go opublikujesz. Jeśli zależy Ci na jakości, wybierz format bezstratny dla grafiki z ostrymi elementami, a JPEG zostaw dla zdjęć, gdzie naturalne przejścia tonalne maskują drobne artefakty.<br>
<br>
<br>
<br>
Dwie etykiety powiązane z jednym polem formularza to sytuacja, która pojawia się częściej, niż się wydaje. Wynika zwykle z pośpiechu przy budowie formularza albo z kopiowania fragmentów kodu bez sprawdzenia, co tak naprawdę robią. Sam atrybut for w elemencie label nie jest unikalny — nic nie stoi na przeszkodzie, by kilka etykiet wskazywało na ten sam identyfikator. Przeglądarka to zniesie, walidator też nie zaprotestuje, ale użytkownik i czytnik ekranu mogą dostać sprzeczne informacje.<br>
<br>
<br>
<br>
Gdzie postawić header, a gdzie nav header to nie synonim górnego paska. To wprowadzenie do najbliższego kontekstu — może być nagłówkiem całej strony, ale też pojedynczego artykułu czy sekcji. W nagłówku strony zwykle ląduje logo, nazwa serwisu i główne menu. W nagłówku artykułu — tytuł, autor i data. Możesz mieć wiele elementów header w dokumencie, byle każdy należał do innego bloku. nav z kolei opisuje zbiór linków nawigacyjnych. Nie każdy zestaw odnośników to nawigacja: linki w stopce albo w akapicie nie muszą być w nav. Używaj go dla menu głównego, bocznego, breadcrumbów i spisu treści. Jeśli na stronie jest kilka nawigacji, rozróżnij je atrybutem aria-label, np. „menu główne" i „menu boczne".<br>
<br>
<br>
<br>
Po poprawkach przetestuj formularz z klawiaturą i czytnikiem ekranu. Kliknięcie w etykietę powinno przenosić fokus do właściwego pola, a komunikat czytnika ma być jednoznaczny. Jeśli pole jest wymagane, dodaj informację o tym w jednej etykiecie, a nie w obu. Krótko mówiąc: jedna etykieta to nazwa, druga może być opisem — ale nigdy dwiema nazwami naraz.<br>
<br>
<br>
<br>
footer zamyka kontekst — stronę, artykuł albo sekcję. W stopce strony umieszcza się dane kontaktowe, prawa autorskie, linki pomocnicze. Podobnie jak header, może występować wielokrotnie. Uważaj na dwa częste błędy. Pierwszy: wrzucanie całej stopki do nav, tylko dlatego że są tam linki. Drugi: traktowanie footer jako miejsca na treść, która powinna być w main. Stopka to dodatek, nie drugi główny blok.<br>
<br>
<br>
<br>
Dziedziczenie działa w dół łańcucha elementów i dotyczy głównie cech tekstowych: koloru, kroju i rozmiaru pisma, wysokości linii, odstępów między literami, wyrównania tekstu. To dlatego wystarczy ustawić color: #333 na kontenerze, żeby cała jego zawartość — akapity, nagłówki, listy, komórki tabeli — przejęła ten odcień bez powtarzania reguły. Jeśli któryś element ma się wyróżniać, nadpisujesz wartość bezpośrednio na nim i dziedziczenie zostaje przerwane tylko w tym miejscu.<br>
<br>
<br>
<br>
Typowe błędy wynikają właśnie z tego złudzenia. Ktoś ustawia border: 1px solid na div i dziwi się, że akapity w środku nie mają ramek. Inny nadpisuje kolor na rodzicu i nie rozumie, dlaczego przycisk w środku pozostał niebieski — bo elementy formularzy często mają własne reguły przeglądarki. Kolejny przypadek to inherit wpisany bez potrzeby w miejscu, gdzie wartość i tak przyszłaby z łańcucha, oraz initial, które kasuje kolor odziedziczony i przywraca domyślny czarny. Warto też pamiętać, że currentColor w obramowaniu bierze aktualny kolor tekstu danego elementu, więc zmiana color na dziecku zmieni także jego ramkę — i to jest jedyny sensowny sposób „przenoszenia" koloru na obwódkę.