HTML Academy · Lektion

Bygg ett PE-dragspel

Bygg ett dragspel som fungerar utan JavaScript och förbättra det sedan

Lektion 4 av 413 steg

Bygg ett PE-dragspel ä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.

Mål: ett fungerande dragspel utan JS

PE-versionen av ett dragspel använder enbart HTML — det inbyggda elementparet <details>/<summary>. Klicka på summary för att växla panelen. Det fungerar utan CSS, JS och ramverk: det är inbyggt i HTML.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

Inbyggd tillgänglighet

<summary> är en fokuserbar, tangentbordsaktiverbar knapp (Enter/Space växlar). Skärmläsare meddelar om tillståndet är expanderat eller hopfällt. Två HTML-element levererar det som en anpassad React-komponent för dragspel kan kräva dussintals rader ARIA- och händelsehantering för att åstadkomma.

Styla med CSS

Styla utfällningstriangeln, panelens inre marginaler och övergångar med vanlig CSS. Attributet open återspeglar tillståndet, så details[open] summary { color: blue; } tillämpas endast när panelen är expanderad. Ingen JS behövs för visuell finputsning.

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

Animera öppning och stängning

Standardbeteendet för öppning och stängning sker direkt. Animera genom att övergå med content-visibility eller med JS som mäter panelens höjd och animerar max-height. För enkla fall är den abrupta växlingen acceptabel; animering är en CSS+JS-förbättring som läggs till progressivt.

Förbättra med JavaScript

JS kan lägga till praktiska funktioner: stänga andra dragspel när ett öppnas (läge där endast ett är öppet), spara öppet tillstånd i localStorage, animera övergången eller analysspåra vilka poster som expanderas. Varje förbättring är ett rent tillägg till grundfunktionen.

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

Växlingshändelsen

<details> utlöser en toggle-händelse varje gång dess öppna tillstånd ändras. Använd den för att reagera på att användaren expanderar innehållet utan att koppla om klickhanterare. Kompatibel med både musklick och aktivering med tangentbordet.

Rendera tillstånd på servern

För att rendera ett dragspel som är öppet från början anger du attributet open på serversidan: <details open>. Tillståndet finns då i HTML-koden och är tillgängligt för sökrobotar och användare med långsamma anslutningar innan någon JS körs.

När den inbyggda funktionen inte räcker

Om designen kräver en egen ikon för expandering/ihopfällning, animerad visning eller en panel med flera kolumner kan du bygga en anpassad version — men använd om möjligt <details>/<summary> som underliggande struktur. Lägg endast till ARIA om du inte alls kan använda de inbyggda elementen.

Verifiering utan JS

Inaktivera JavaScript i DevTools och kontrollera att dragspelet fortfarande fungerar: klicka på summary, kontrollera att panelen växlar, att fokusordningen förblir logisk och att tangentbordet aktiverar funktionen. Om något går sönder är JS inte längre en förbättring utan ett krav, vilket bryter mot PE.

Enbart CSS: endast en öppen

Om du vill ha radioknappsbeteendet ”endast en öppen åt gången” utan JS använder du attributet name på <details> (stöds i Chrome/Safari): alla <details name="faq"> delar tillstånd, så när ett öppnas stängs de andra. Ett mönster med enbart HTML som motsvarar radioknappar.

Migrera från ett JS-baserat dragspel

Ersätt divs+JS med <details>/<summary> och behåll CSS-klasserna för styling. Resultatet blir kortare HTML, inget JS-beroende, bättre tillgänglighet och indexerbart innehåll. De flesta JS-baserade dragspel kan migreras till PE med minimala synliga förändringar för användaren.

Kunskapskontroll

Vilket par HTML-element ger ett fullt fungerande dragspel utan någon JavaScript?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ett PE-dragspel använder inbyggda <details>/<summary> som grund — fullt tillgängliga och tangentbordsstyrda utan JS. Lägg till CSS för visuell styling och vid behov JS för animeringar eller beteendet att endast ett dragspel är öppet. Kontrollera genom att inaktivera JS att grundfunktionen fortfarande fungerar. Det nya name-attributet möjliggör dessutom ett läge med endast ett öppet dragspel och enbart CSS.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygg ett PE-dragspel” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Bygg ett PE-dragspel”, 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 ”Bygg ett PE-dragspel”?

Bygg ett dragspel som fungerar utan JavaScript och förbättra det sedan 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 ”Bygg ett PE-dragspel”?

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

← Tillbaka till HTML Academy