Hinweis: Diese Seite ist vollständig eigenständig (Vanilla HTML/CSS/JS). Live-Demos sind lokal, schnelle Tests ohne Abhängigkeiten.

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.
Demo
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

JS
Sichere Zugriffe und sinnvolle Defaults: obj?.a?.b ?? fallback.
Demo
Ergebnis erscheint hier …

async/await – Lesbare Asynchronität

JS
Promises elegant nutzen. Beispiel: künstliche Wartezeit mit await.
Demo
Bereit …

ES Modules & dynamischer Import

JS
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

JS
Einfaches Kopieren/Einfügen (mit HTTPS/Permissions). Hier lokal für Codeblöcke verwendet.
Snippet
await navigator.clipboard.writeText('Hello Clipboard')

WebGPU (Hinweis)

JS
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 …

Barrierefreiheit (A11y) – Best Practices

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
Beispiel-Dialog
Dies ist ein nativer HTML-Dialog gemäß Living Standard. Fokus & Esc funktionieren automatisch.