Jak zdefiniować w języku CSS takie formatowanie tabeli, żeby wiersz, na którym aktualnie znajduje się kursor myszy, zmieniał kolor tła na szary?
A. tr:hover { background-color: gray; }
B. tr:active { color: gray; }
C. tr:hover { color: gray; }
D. tr:active { background-color: gray; }
Pytanie z egzaminu CKE, czerwiec 2022 (arkusz E.14-SG-22.06).
W CSS zapis tr:hover { background-color: gray; } jest właściwy, bo łączy selektor elementu tr z pseudoklasą :hover. Element tr oznacza wiersz tabeli, a :hover działa wtedy, gdy użytkownik najedzie na dany element kursorem myszy lub innym urządzeniem wskazującym. Właściwość background-color zmienia kolor tła, więc efekt będzie dokładnie taki: wiersz tabeli pod kursorem dostanie szare tło. To jest typowe i zgodne ze standardowym podejściem w CSS, opisanym w specyfikacji selektorów CSS, gdzie pseudoklasy służą do reagowania na stan elementu. W praktyce taki zapis często stosuje się w tabelach z danymi, np. w panelach administracyjnych, cennikach, listach zamówień albo raportach, bo użytkownikowi łatwiej śledzić aktualnie wskazywany rekord. Moim zdaniem to jedna z prostszych, a bardzo użytecznych technik poprawiających czytelność interfejsu. Dobrą praktyką jest też dobranie koloru z odpowiednim kontrastem, na przykład jasnoszarego tła i ciemnego tekstu, żeby nie pogorszyć dostępności strony.
W tym pytaniu łatwo pomylić dwie różne rzeczy: stan elementu oraz właściwość, którą chcemy zmienić. Jeżeli celem jest zmiana tła wiersza tabeli po najechaniu myszą, potrzebna jest pseudoklasa :hover oraz właściwość background-color. Sama właściwość color nie zmienia tła, tylko kolor tekstu znajdującego się w elemencie. Dlatego zapis z color: gray sprawiłby, że litery w komórkach stałyby się szare, ale tło wiersza pozostałoby bez zmian. To częsty błąd, bo w języku potocznym mówi się po prostu zmień kolor, a w CSS trzeba precyzyjnie wskazać, czy chodzi o kolor tekstu, tła, obramowania czy jeszcze innego elementu wyglądu. Równie ważne jest rozróżnienie :hover i :active. Pseudoklasa :active działa głównie w momencie aktywowania elementu, na przykład podczas kliknięcia przyciskiem myszy, zwykle bardzo krótko. Nie oznacza ona zwykłego znajdowania się kursora nad elementem. Z mojego doświadczenia wynika, że uczniowie często wybierają :active, bo brzmi jak aktywny wiersz, ale w CSS ma to bardziej techniczne znaczenie związane z akcją kliknięcia. Dla tabel, menu i list danych najlepszym wyborem do efektu podświetlenia pod kursorem jest właśnie :hover. Warto też pamiętać, że selektor tr:hover dotyczy całego wiersza, a nie pojedynczej komórki, więc jest wygodny i czytelny w kodzie.