Wzorce z praktyki — podpowiedzi i śledzenie stanu
Wykorzystywanie data-* do tworzenia podpowiedzi, oznaczania aktywnego stanu i konfiguracji komponentów
Wzorce z praktyki — podpowiedzi i śledzenie stanu to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Podpowiedź z data-tooltip
Tekst podpowiedzi należy przechowywać w data-tooltip elementu wyzwalającym. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } wyświetla go bez JavaScriptu. Aby podpowiedzi były dostępne, należy dodać role="tooltip" oraz aria-describedby wskazujące rzeczywisty element.
Pozycjonowanie podpowiedzi CSS
Element wyzwalający wymaga position: relative. Pseudoelement ::after korzysta z position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%), aby wyśrodkować podpowiedź nad elementem wyzwalającym. Należy dodać white-space: nowrap, aby zapobiec zawijaniu tekstu.
Śledzenie stanu za pomocą data-state
Wiele klas logicznych (is-open, is-loading, is-error) należy zastąpić jednym atrybutem data-state: el.dataset.state = "loading". CSS wybiera [data-state="loading"] — jeden atrybut, jedna reguła CSS dla każdego stanu i brak zarządzania klasami.
Akordeon z data-expanded
Każdy element akordeonu ma data-expanded="false". JavaScript przełącza jego wartość: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS pokazuje lub ukrywa panel: [data-expanded="false"] .panel { display: none; }.
Stan aktywnej karty
Kontener kart przechowuje aktywną kartę: data-active-tab="0". JavaScript aktualizuje tę wartość po kliknięciu. CSS może wybrać aktywny panel za pomocą [data-active-tab="0"] #panel-0. Cały stan kart znajduje się w jednym atrybucie elementu kontenera.
Śledzenie kroku formularza
Formularze wieloetapowe przechowują bieżący krok w data-step elementu formularza. CSS pokazuje tylko pasujący krok: form[data-step="2"] .step-2 { display: block; }. Pozostałe kroki pozostają ukryte bez przełączania klas dla każdego kroku.
Wzorzec stanu ładowania
Przyciski podczas działań asynchronicznych: btn.dataset.state = "loading" blokuje interakcję i wyświetla za pomocą CSS wskaźnik ładowania. Po zakończeniu należy ustawić btn.dataset.state = "idle". Jeden atrybut zastępuje trzy osobne przełączenia klas i sprawdzanie atrybutu disabled.
Wzorzec uchwytu przeciągania
Elementy, które można przeciągać, należy oznaczyć za pomocą data-draggable="true", a cele upuszczania za pomocą data-droptarget="true". Nasłuchiwacze zdarzeń używają selektorów atrybutów do znalezienia wszystkich przeciągalnych elementów: document.querySelectorAll("[data-draggable]"). Obecność atrybutu lepiej wyraża zamiar związany z działaniem niż nazwy klas.
Wskaźnik postępu
Komponent krokowy używa atrybutu data-step-status dla każdego kroku: „completed”, „current”, „upcoming”. CSS nadaje poszczególnym stanom odrębne style. JavaScript ustawia stan każdego kroku na podstawie bieżącej pozycji — stan jest czytelny bez konieczności odwzorowywania go w obiekcie stanu JavaScript.
Zapamiętywanie motywu
Preferencję motywu użytkownika należy przechowywać w localStorage i zastosować ją podczas ładowania: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS wybiera [data-theme="dark"] dla trybu ciemnego — rozwiązanie jest trwałe i eliminuje FOUC, gdy skrypt działa w <head>.
Metadane dynamicznej treści
Listy renderowane po stronie serwera zawierają metadane w atrybutach data: data-product-id, data-price, data-category. JavaScript odczytuje je bez dodatkowych wywołań API na potrzeby filtrowania, sortowania lub obsługi koszyka po stronie klienta, korzystając z już wyrenderowanych danych.
Sprawdzenie wiedzy
Jaka jest zaleta używania data-state="loading" zamiast dodawania i usuwania klasy CSS?
Podsumowanie
Atrybuty data-* umożliwiają tworzenie zaawansowanych wzorców stosowanych w praktyce: podpowiedzi CSS z użyciem content:attr(), maszyn stanów, w których data-state zastępuje przełączanie wielu klas, śledzenie wieloetapowych formularzy, zapamiętywanie motywu za pomocą documentElement.dataset oraz metadane renderowane po stronie serwera na potrzeby funkcji po stronie klienta — wszystko to bez synchronizowania stanu JavaScript.
Często zadawane pytania
Czy lekcja „Wzorce z praktyki — podpowiedzi i śledzenie stanu” jest bezpłatna?
Tak — pełny tekst „Wzorce z praktyki — podpowiedzi i śledzenie stanu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wzorce z praktyki — podpowiedzi i śledzenie stanu”?
Wykorzystywanie data-* do tworzenia podpowiedzi, oznaczania aktywnego stanu i konfiguracji komponentów Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Wzorce z praktyki — podpowiedzi i śledzenie stanu”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Składnia data-* i konwencje nazewnictwa
- Dostęp do data-* za pomocą dataset w JavaScript
- Używanie data-* z selektorami atrybutów CSS
- Wzorce z praktyki — podpowiedzi i śledzenie stanu