Praktiska mönster: verktygstips och tillståndsspårning
Använd data-* för verktygstips, aktiva tillstånd och komponentkonfiguration
Praktiska mönster: verktygstips och tillståndsspårning är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Tooltip med data-tooltip
Lagra tooltip-texten i data-tooltip på det utlösande elementet. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } visar den utan JavaScript. För tillgängliga tooltips lägger ni till role="tooltip" och aria-describedby som pekar på ett verkligt element.
Positionera CSS-tooltips
Det utlösande elementet behöver position: relative. Pseudoelementet ::after använder position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) för att centrera tooltipen ovanför det utlösande elementet. Lägg till white-space: nowrap för att förhindra radbrytning.
Spåra tillstånd med data-state
Ersätt flera booleska klasser (is-open, is-loading, is-error) med ett enda data-state-attribut: el.dataset.state = "loading". CSS väljer [data-state="loading"] — ett attribut, en CSS-regel per tillstånd och ingen klasshantering.
Dragspel med data-expanded
Varje objekt i ett dragspel har data-expanded="false". JavaScript växlar värdet: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". CSS visar eller döljer panelen: [data-expanded="false"] .panel { display: none; }.
Aktivt fliktillstånd
En flikcontainer lagrar den aktiva fliken: data-active-tab="0". JavaScript uppdaterar detta vid klick. CSS kan välja den aktiva panelen med [data-active-tab="0"] #panel-0. Hela fliktillståndet finns i ett enda attribut på container-elementet.
Spåra formulärsteg
Formulär i flera steg lagrar det aktuella steget i data-step på formulärelementet. CSS visar endast det matchande steget: form[data-step="2"] .step-2 { display: block; }. Övriga steg förblir dolda utan att klasser behöver växlas för varje steg.
Mönster för laddningstillstånd
Knappar under asynkrona åtgärder: btn.dataset.state = "loading" inaktiverar interaktion och visar en laddningsindikator med CSS. När åtgärden är klar anger ni btn.dataset.state = "idle". Ett attribut ersätter tre separata klassväxlingar och en kontroll av disabled-attributet.
Mönster för draghandtag
Markera objekt som kan dras med data-draggable="true" och släppmål med data-droptarget="true". Händelselyssnare använder attributselektorer för att hitta alla objekt som kan dras: document.querySelectorAll("[data-draggable]"). Attributförekomst är mer semantiskt än klassnamn när beteendeavsikten ska uttryckas.
Förloppsindikator
En stegkomponent använder data-step-status på varje steg: "completed", "current", "upcoming". CSS stylar varje status på ett eget sätt. JavaScript anger status för varje steg utifrån den aktuella positionen — ett läsbart tillstånd utan ett JavaScript-tillståndsobjekt som måste spegla det.
Beständighet för tema
Lagra användarens temainställning i localStorage och tillämpa den vid inläsning: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". CSS väljer [data-theme="dark"] för mörkt läge — beständigt och utan FOUC när skriptet körs i <head>.
Metadata för dynamiskt innehåll
Serverrenderade listor inkluderar metadata i dataattribut: data-product-id, data-price, data-category. JavaScript läser dessa utan ytterligare API-anrop för filtrering, sortering eller kundvagnsfunktionalitet på klientsidan, med hjälp av de data som redan renderats.
Kunskapskontroll
Vilken fördel har data-state="loading" jämfört med att lägga till och ta bort en CSS-klass?
Sammanfattning
data-* -attribut möjliggör kraftfulla mönster från verkligheten: CSS-verktygstips med content:attr(), tillståndsmaskiner där data-state ersätter flera klassväxlingar, spårning av flerstegsformulär, bevarande av teman via documentElement.dataset och serverrenderade metadata för funktionalitet på klientsidan — allt utan att spegla tillstånd i JavaScript.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Praktiska mönster: verktygstips och tillståndsspårning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Praktiska mönster: verktygstips och tillståndsspårning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Praktiska mönster: verktygstips och tillståndsspårning”?
Använd data-* för verktygstips, aktiva tillstånd och komponentkonfiguration Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Praktiska mönster: verktygstips och tillståndsspårning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Syntax och namnkonventioner för data-*
- Åtkomst till data-* med dataset i JavaScript
- Använda data-* med CSS-attributselektorer
- Praktiska mönster: verktygstips och tillståndsspårning