Klasa, identyfikator czy znacznik: którą drogą wskazać element
Selektor znacznika celuje we wszystkie elementy danego typu, na przykład akapity albo listy. Zapis jest krótki i nie wymaga dopisywania niczego w HTML-u. Problem pojawia się, gdy ten sam znacznik pełni na stronie różne role — wtedy jedna reguła zaczyna wpływać na miejsca, których wcale nie chciałeś ruszać. To najczęstsze źródło sytuacji, w której poprawka w jednym miejscu psuje układ w trzech innych.
Selektor to sposób, w jaki arkusz stylów albo skrypt odnajduje konkretny fragment dokumentu. W CSS i w JavaScripcie masz do dyspozycji trzy podstawowe narzędzia: znacznik, klasę i identyfikator. Wybór między nimi nie jest kwestią gustu — decyduje o tym, jak łatwo później zmienisz wygląd strony i jak bardzo kod stanie się odporny na błędy.
Osobna sprawa to pola ukryte i własne komponenty. Jeśli zamiast standardowego pola tekstowego używasz elementu, który tylko udaje pole, kliknięcie w etykietę nie ustawi kursora, bo nie ma czego ustawiać. W takich konstrukcjach fokus trzeba przenosić ręcznie skryptem, a etykietę połączyć z rzeczywistym, dostępnym polem. Warto też zadbać, by pole nie miało atrybutu wyłączającego ani nie było przykryte przez warstwę, która przechwytuje kliknięcia — przezroczyta nakładka nad etykietą potrafi zablokować zdarzenie, mimo że wizualnie wszystko wygląda poprawnie.
Typowe błędy wynikają z nadużywania identyfikatorów i „!important". Pierwsze zawyża specyficzność tak bardzo, że późniejsze poprawki wymagają jeszcze cięższych selektorów. Drugie omija całą hierarchię, ale gdy pojawią się dwa „!important" o tej samej specyficzności, znów decyduje kolejność — a debugowanie staje się koszmarem. Zamiast tego warto trzymać selektory płaskie: jedna klasa na element, bez zagnieżdżania pięciu poziomów. Jeśli musisz nadpisać cudzy styl, zwiększ specyficzność o jedną klasę zamiast sięgać po identyfikator.
Praktyczny wybór wygląda tak: rozmiary tekstu i odstępy w rem, odstępy wewnątrz komponentu w em, a piksele zostaw dla obramowań, cieni i elementów, które naprawdę nie mają rosnąć z tekstem. Jeśli chcesz sprawdzić, czy układ jest odporny, ustaw w przeglądarce domyślną czcionkę na bardzo dużą i przejrzyj stronę. Wszystko, co się rozjeżdża, zdradza, gdzie jednostki zostały pomieszane.
Zacznij od sprawdzenia, czy etykieta faktycznie jest etykietą, a nie zwykłym akapitem czy elementem blokowym. Przeglądarka łączy etykietę z polem na dwa sposoby: przez atrybut „for" wskazujący identyfikator pola albo przez fizyczne otoczenie pola znacznikiem etykiety. Jeśli w kodzie widnieje element, który wygląda jak etykieta, ale nie jest nią semantycznie, kliknięcie nie ma prawa przenieść kursora. To pierwsza rzecz do weryfikacji i najczęstsze źródło frustracji.
Kiedy druga etykieta pomaga, a kiedy szkodzi Druga etykieta bywa przydatna w układach, gdzie to samo pole pojawia się w dwóch miejscach strony — na przykład w nagłówku sekcji i przy przycisku zapisu. Zamiast duplikować cały formularz, można dodać drugą etykietę w innym kontenerze. Problem pojawia się, gdy obie etykiety mają inną treść. Wtedy użytkownik technologii asystującej usłyszy sprzeczne informacje, a osoba korzystająca z nawigacji klawiaturą może nie wiedzieć, do czego pole służy. Trzymaj się zasady: obie etykiety powinny mieć identyczny tekst albo druga powinna być ukryta przed czytnikiem ekranu i pełnić wyłącznie funkcję wizualną.
Pułapka zagnieżdżonego pola i podwójnego kliknięcia Drugi typowy błąd to etykieta, która sama zawiera pole wyboru, a obok niej stoi druga etykieta z atrybutem „for" wskazującym to samo pole. Wtedy kliknięcie w tekst raz zaznacza, raz odznacza pole, bo przeglądarka traktuje zdarzenie podwójnie — raz z wnętrza etykiety, raz z powiązania. Efekt bywa losowy i trudny do odtworzenia. Rozwiązanie jest jedno: albo pole siedzi w środku etykiety i żadnego „for" nie potrzebuje, albo stoi obok, a etykieta ma poprawne „for" i nie zawiera pola w sobie. Mieszanie obu podejść to gwarancja kłopotów.
W prostym formularzu każdemu polu odpowiada jedna etykieta. Bywa jednak, że ten sam element sterujący ma dwie etykiety label — na przykład widoczną obok pola i drugą, ukrytą, używaną w innym miejscu układu strony. Przeglądarki radzą sobie z tym różnie, a konsekwencje bywają zaskakujące: kliknięcie w dowolną z etykiet przenosi fokus do pola, ale czytniki ekranu mogą odczytać je dwukrotnie albo pominąć jedną z nich. Zanim uznasz to za sprytny trik, sprawdź, czy naprawdę działa.
Aby powiązać etykietę z polem, użyj atrybutu for i wskaż w nim identyfikator elementu. Druga etykieta może wskazywać ten sam identyfikator — to poprawne składniowo. Uwaga na pułapkę: jeśli drugi label leży wewnątrz tego samego elementu nadrzędnego co pole, przeglądarka może potraktować go jako etykietę domyślną i wtedy for staje się zbędny, a nawet mylący. Najbezpieczniej trzymać obie etykiety poza elementem, który zawiera pole, i jawnie podawać for.