HTML/CSS/JS Living Standard – Kompakte Info-Seite (2026)

HTML – Living Standard

Semantische Struktur

HTML

Nutze <main> <nav> <aside> <section> <article> für klare Dokumentstruktur und bessere A11y/SEO.

Beispiel

<main>
<article>
<h1>Titel</h1>
<section>Inhalt</section>
<aside>Randinfo</aside>
</article>
</main>

<dialog> – Native Modals

HTML

Native Dialoge inkl. Fokusfalle und Backdrop. Methoden: show(), showModal(), close().

Dialog-Markup

<dialog id="dlg">
<form method="dialog">
<header class="dlg-hd">…</header>
<div class="dlg-bd">…</div>
<footer class="dlg-ft">
    <button value="cancel">Abbrechen</button>
    <button value="ok">OK</button>
</footer>
</form>
</dialog>

Formulare & Validierung

HTML

Nutze eingebaute Validierung (required, pattern, min/max). Keine JS-Polyfills nötig.

<template> + Slots (Web Components)

HTML

Vorlagen kapseln & wiederverwenden. In Verbindung mit Shadow DOM für echte Komponenten.

Mini-Komponente live

Komponenten sind eigenständige UI-Bausteine.

Definition

<template id="tpl-note">
<style>
:host{display:block; border:1px solid currentColor; border-radius:10px; padding:10px}
:host([data-variant="info"]) {color: var(--brand, #2b66ff)}
</style>
<slot></slot>
</template>
<script>
class MyNote extends HTMLElement{
constructor(){ super(); const t = document.getElementById('tpl-note'); this.attachShadow({mode:'open'}).append(t.content.cloneNode(true)); }
}
customElements.define('my-note', MyNote);
</script>

CSS – Moderne Module & Patterns

Grid & Subgrid

CSS

Zweidimensionales Layout. Subgrid vererbt Spalten/Zeilen an Kindelemente – perfektes, konsistentes Alignment.

Hauptbereich (span 8)

Seitenleiste (span 4)

Subgrid A

Subgrid B

:has() – Parent-Selektor

CSS

Reagiere auf Kind-Zustände (z. B. invalid). Beispiel: .field:has(input:invalid){ outline:2px solid var(--danger); }

Snippet

.card:has(> .bd:empty){ display:none }
.field:has(input:invalid){ outline:2px solid red }
nav:has(a[aria-current="page"]) { box-shadow: inset 0 -3px currentColor }

Container Queries

CSS

Komponenten-responsiv ohne Media Queries. Layout passt sich der Breite des Containers an.

Komponente

Bei >=520px nebeneinander, sonst untereinander.

Erweiterte Farbräume

CSS

Nutze color(display-p3 r g b / a) oder oklch() für konsistente Farben – besonders auf Wide-Gamut-Displays.

Snippet

.btn.primary{ background: color(display-p3 0.28 0.54 1 / 1) }
.bg-accent{ background: oklch(0.81 0.12 160) }

Scroll-Linked Animations

CSS

Mit scroll-timeline Animationen an die Scrollposition koppeln – ohne JS.

Snippet

@keyframes fade-in { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@scroll-timeline yscroll { source: auto; orientation: block; }
.fade { animation: fade-in 1s both; animation-timeline: yscroll; animation-range: entry 0% cover 40% }

JavaScript – Sprache & Web-APIs

Optional Chaining & Nullish

Sichere Zugriffe und sinnvolle Defaults: obj?.a?.b ?? fallback.

Demo

Ergebnis erscheint hier …

async/await – Lesbare Asynchronität

Promises elegant nutzen. Beispiel: künstliche Wartezeit mit await.

Demo

Bereit …

ES Modules & dynamischer Import

Modulare Struktur in Browsern. Dynamisches Laden nur bei Bedarf.

Snippet

<script type="module">
export function sum(a,b){ return a+b }
// dynamisch:
const math = await import('./mod.js');
</script>

Hinweis: Für dynamischen Import ist i. d. R. ein Server-Kontext nötig.

Clipboard API

Einfaches Kopieren/Einfügen (mit HTTPS/Permissions). Hier lokal für Codeblöcke verwendet.

Snippet

await navigator.clipboard.writeText('Hello Clipboard')

WebGPU (Hinweis)

WebGPU ist seit 2025 breit verfügbar (Browserabhängig). Für High-Performance-Grafik & GPGPU. In dieser Seite nicht ausgeführt.

Kurz-Check

Prüfe Unterstützung …

Semantik & ARIA

HTML

Nutze native Semantik vor ARIA. Wenn nötig: role, aria-label, aria-live, aria-controls.

Checkliste

Fokus-Reihenfolge logisch, sichtbarer Fokuszustand
Labels verknüpfen: <label for> ↔ id
Alternativtexte für Bilder
Kontraste prüfen (≥ 4.5:1 für Text)

Bewegung respektieren

CSS

Mit @media (prefers-reduced-motion) Animationen abschwächen.

Snippet

@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important }
}

Praxis-Tipps & Architektur

Trennung & Progressive Enhancement

Leitlinie

Struktur (HTML), Präsentation (CSS), Verhalten (JS) getrennt halten. Erst Basics, dann Upgrades, wenn der Browser Features kann.

Feature-Query

@supports (container-type: inline-size){ /* Container Queries Styles */ }

Beispiel-Datenattribute

<button data-variant="danger" data-size="sm">Löschen</button>

Performance-Kür

Leitlinie

Critical CSS inline, Fonts vorsichtig einsetzen, Bilder lazy-loaden, JS klein halten, Langläufer vermeiden.

loading="lazy" bei Bildern & Iframes
Komponenten isolieren (CSS-Container, Shadow DOM)
Nur nötiges JS, keine Blocker im Head

HTML – Living Standard

CSS – Moderne Module & Patterns

JavaScript – Sprache & Web-APIs

Barrierefreiheit (A11y) – Best Practices

Praxis-Tipps & Architektur