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

Wir drehen wieder am „Glücksrad (workingdraft.de/gluecksrad)“ – diesmal strikt mit HTML-Vokabular. Schepp hat sich Jens Oliver Meiert (meiert.com) eingeladen (Frontend Dogma (frontenddogma.com), Web Glossary (webglossary.info), Revision 687 (workingdraft.de/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) (developer.mozilla.org/en-US/docs/Web/HTML/Refe…) & Spec: The id attribute (html.spec.whatwg.org/multipage/dom.html#the-id…)
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] developer.mozilla.org/en-US/docs/Web/HTML/Refe…, 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 (schepp.dev/posts/today-the-trident-era-ends). Und die Liste an historischen CSS Fehler (wiki.csswg.org/ideas/mistakes)n.
[00:24:36] <b> (developer.mozilla.org/en-US/docs/Web/HTML/Refe…) und <i> (developer.mozilla.org/en-US/docs/Web/HTML/Refe…) (sowie <strong>/<em>)
Warum <b> (Aufmerksamkeitsmarkierung) und <i> (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) (w3.org/MarkUp/html-spec/html-spec_toc.html).
[00:35:53] <option> (developer.mozilla.org/en-US/docs/Web/HTML/Refe…), <optgroup> & <datalist> (developer.mozilla.org/en-US/docs/Web/HTML/Refe…)
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 (wowirsindistvorne.show/retropolis).
[00:43:40] developer.mozilla.org/en-US/docs/Web/HTML/Refe…
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 (igalia.com/chats/xslt-liam)
[00:52:13] AJAX, XML HttpRequest & Naming
Der Begriff „AJAX“ (populär geworden durch Jesse James Garrett 2005 (almaer.com/blog/ajax-a-new-approach-to-web-app…)) als Zündfunke für „app-iges“ Web – plus Seitenblick auf noch frühere Publikationen. Für Geschichtsnerds: Internet History Podcast (internethistorypodcast.com).
[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 (jakearchibald.com/2025/present-and-future-of-p…), in dem auch JPEG XL (cloudinary.com/blog/how_jpeg_xl_compares_to_ot…) vorkommt.

Diskutiert die Folge mit uns in unserem Community-Slack: draft.community