Live-Demos: Sehen was der Code tut
Code versteht man am schnellsten wenn das Ergebnis danebensteht. Deshalb stecken überall im Wiki kleine Live-Demos, erkennbar am grauen "Ergebnis"-Rahmen. Diese Seite ist das Sprungbrett zu den interessantesten, und natürlich zur Spielwiese, wo du selbst tippsst.
Das Herzstück: In der HTML-Spielwiese schreibst du eigenen Code und siehst sofort das Ergebnis. Kein Konto, keine Installation, kaputtmachen unmöglich.
Demos in der Elementreferenz
| Demo | Zu sehen bei |
|---|---|
| Überschriften-Hierarchie gerendert | Überschriften |
| Bild mit alt, Maßen und Pixel-Diskette | img |
| figure mit Bildunterschrift | figure |
| Formularfelder zum Anfassen | input, select, textarea |
| Checkbox mit klickbarem Label | label |
| Aufklappbereich ohne JavaScript | details |
| Echter modaler Dialog mit Escape | dialog |
| Canvas das live zeichnet | canvas |
| Das Wiki eingebettet in sich selbst | iframe |
Demos in den CSS-Kapiteln
| Demo | Zu sehen bei |
|---|---|
| Fünf Schreibweisen, eine Farbe | Farben |
| Die drei Schrift-Grundfamilien | Schriftarten |
| margin und padding zum Anschauen | Abstände |
| Das Box Model als Zwiebel | Box Model |
| Flexbox-Verteilung live | Flexbox |
| Ein 2fr-1fr-Raster | Grid |
| Badge in der Kartenecke (position) | position |
| Das blinkende NEU-Badge samt Keyframes | Animationen |
Wie die Demos technisch funktionieren
Ein kurzer Blick hinter die Kulissen, denn die Demos sind selbst ein Lehrstück: Die meisten Beispiele sind schlicht gestyltes HTML direkt auf der Seite. Wo eine Demo aber eigenständiges Verhalten zeigt (etwa das dialog-Element oder das zeichnende canvas), steckt sie in einem iframe mit sandbox-Attribut, also in einem abgeschotteten Mini-Dokument:
<iframe title="Demo: Aufklappbereich" srcdoc="<details>...</details>"
sandbox loading="lazy" height="120"></iframe>Das srcdoc-Attribut liefert den Demo-Code direkt mit, ohne separate Datei, das sandbox-Attribut sperrt alles was die Demo nicht braucht, und loading="lazy" lädt sie erst beim Scrollen. Drei Attribute, und aus einem potenziellen Sicherheits- und Performance-Thema wird ein braver Schaukasten. Die Details zu dieser Technik stehen auf der iframe-Seite, die selbst die schönste Demo von allen enthält: das Wiki, eingebettet in sich selbstt.
Alle Demos sind bewusst klein gehalten und laufen ohne externe Dienste. Was du siehst, ist exakt der gezeigte Code am Werkk.