Revision 693: HTML Glücksrad, mit Jens Oliver Meiert

Dec 16, 2025

Jens Oliver Meiert, Frontend-Entwickler und Autor, bringt seine Expertise in HTML und Webstandards mit. Sie besprechen verschiedene HTML-Vokabeln wie das id-Attribut und dessen historische Hintergründe. Praktische Tipps zur Verwendung von contenteditable und die semantischen Unterschiede zwischen und werden erläutert. Außerdem diskutieren sie das neue writingsuggestions-Attribut und tiefere Einblicke in moderne Bildformate wie JPEG XL und AVIF. Eine spannende Reise durch die Welt der Webentwicklung!

Ask episode

AI Snips

Chapters

Transcript

Episode notes

ADVICE

Spezifität Entschärfen

Verwende :where() oder Attribut-Selektoren, um die Spezifität von ID-Selektoren zu dämpfen.
Erzeuge eindeutige IDs per Template/UUID, wenn Komponenten mehrfach auf einer Seite auftauchen.

ANECDOTE

Contenteditable Im Praxiseinsatz

Shep beschreibt reale Einsätze von contenteditable für Inline-Inputs und kombinierte Combo-Boxen mit Chips.
Er nutzte contenteditable, um Inputs wachsend zu machen und Chips für ausgewählte Werte darzustellen.

ADVICE

Placeholders Und Plaintext In Contenteditable

Nutze [contenteditable]:empty::before für einen Pseudo‑Placeholder in editierbaren Bereichen.
Setze contenteditable="plaintext-only", um Formatierung beim Einfügen zu verhindern.

Get the Snipd Podcast app to discover more snips from this episode

Get the app

Wir drehen wieder am „Glücksrad“ – diesmal strikt mit HTML-Vokabular. Schepp hat sich Jens Oliver Meiert eingeladen (Frontend Dogma, Web Glossary, Revision 687). MDN-Daten liefern die Zufalls-Themen; wir sezieren Einsatzfälle, Historie, Stolpersteine und moderne Patterns – von id über contenteditable bis hin zu <option>, <datalist> und dem noch jungen Global-Attribut writingsuggestions. Außerdem streifen wir HTML-Geschichte (HTML 2, XHTML 2), IE-Altlasten (designMode, Drag and Drop), XSLT-Rückbau, AJAX-Begriffsgeschichte und aktuelle Bildformate.

Schaunotizen

[00:03:27] id (MDN) & Spec: The id attribute: Historischer Abriss von name-Sprungmarken zu id; warum id als CSS-Selektor teils verpönt wurde (Spezifität), und wann er weiterhin sinnvoll ist (einzigartige Ziele, Relation über for/aria-*). Praktische Kniffe: Attribute-Selektoren, Spezifitäts-Dämpfung via :where(); bei Komponenten Duplikate durch generierte Suffixe/UUIDs vermeiden.
[00:15:39] contenteditable, designMode & Rich-Text: Use-Cases von Inline-Eingaben bis Comboboxen. Placeholder-Pattern: [contenteditable]:empty::before für Pseudo-Placeholder. contenteditable="plaintext-only" verhindert Stil-Paste. Historische Wurzeln: IE-designMode, vieles später standardisiert. Schepps Blog-Nugget zur IE-Ära: Today the Trident Era ends. Und die Liste an historischen CSS Fehlern.
[00:24:36]  und  (sowie /): Warum  (Aufmerksamkeitsmarkierung) und  (idiomatische/andere Stimme) legitime Semantik haben und nicht bloß „Präsentation“ sind. Wir sprechen über historischen Kontext aus frühen HTML-Spezifikationen; Blick in die alten Spec-Dokumente: W3C HTML Spec (Archiv).
[00:35:53] <option>, <optgroup> & <datalist>: Arbeitspferd im Formular: Gruppenbildung via <optgroup>, deaktivierbare Optionen, label-Attribut (ersetzt sichtbaren Inhalt). <datalist> als unterschätztes Type-Ahead für viele <input>-Typen (Range, Date etc.) – aber Achtung bei tausenden Einträgen (Performance, Match-Heuristiken variieren je nach Browser). Inspiration: „Retropolis“ bei unseren Freunden von Wo wir sind ist vorne.
[00:43:40] writingsuggestions: Noch jung und teils experimentell: steuert Schreibvorschläge („ghost text“) in editierbaren Feldern. Support-Lage: Chromium/WebKit ja, Firefox noch nicht – sinnvoll dort, wo Inline-Completion UX-Gewinn bringt.
[00:47:48] XSLT-Rückbau in Browsern: Ökosystem-Abhängigkeiten, Wartbarkeit und Security als Gründe; nostalgischer Blick auf XSLT-basierte Transformations-Pipelines („Sliding Doors“, frühe „Transpile“-Ansätze), warum der Rückbau für die meisten Web-Apps heute verkraftbar ist. Mehr dazu in dieser Folge der Igalia Chats
[00:52:13] AJAX, XML HttpRequest & Naming: Der Begriff „AJAX“ (populär geworden durch Jesse James Garrett 2005) als Zündfunke für „app-iges“ Web – plus Seitenblick auf noch frühere Publikationen. Für Geschichtsnerds: Internet History Podcast.
[00:55:37] Bildformate heute: JPEG XL, WebP, AVIF: Trade-offs zwischen Decoder-Sicherheit, Multithreading-Decoding, Migrationspfaden (aus JPEG ableitbar) und Browser-Adoption; warum selbst „alte“ Formate wie PNG noch Updates/Use-Cases haben (APNG, Transparenz). Jake Archibald hat zum Thema „progressive Image Rendering“ ein tolles Blogpost verfasst, in dem auch JPEG XL vorkommt.