Revision 705: Browser-News-Roundup

What this episode covers

Nach rund 20 Wochen Pause haben wir uns mal wieder zusammengesetzt und durch die aktuellen Browser-Releases gewühlt. Diesmal haben uns vor allem Firefox und Safari angeschaut, während Chrome eher im Hintergrund mitlief. EVENT-TIPP Am 27.–28. April 2026 findet die beyond tellerrand Düsseldorf 2026 statt – zwei Tage Inspiration für Kreative und Entwickler:innen in Düsseldorf. Tickets kosten 349 €. Alle Infos gibt’s auf beyondtellerrand.com Praktischer Hinweis: „Holiday Inn Express“ oder „Holiday Inn – the niu, Tab“ direkt an der Venue buchen und abends noch mit Speakern und Community an der Bar abhängen. Wir freuen uns, wenn wir uns dort sehen! Dabei sind wir über eine ganze Reihe spannender Neuerungen gestolpert – von großen CSS-Features über neue APIs bis hin zu kleineren, aber wichtigen Verbesserungen im Detail. Wir gehen die Highlights durch und diskutieren, was davon wirklich relevant ist und wo noch Fragen offen bleiben. SCHAUNOTIZEN [00:03:39] ANCHOR POSITIONING WIRD INTEROPERABEL Mit Anchor Positioning ist ein lange erwartetes CSS-Feature jetzt in allen Browsern angekommen. Es erlaubt, Elemente direkt relativ zu anderen Elementen zu positionieren – etwa für Popovers, Tooltips oder Dropdowns – ohne Wrapper-Hacks oder komplexes JavaScript. Der Browser übernimmt dabei auch das Umschalten von Positionen, wenn Inhalte am Viewport-Rand abgeschnitten würden. Besonders hilfreich ist der Artikel von Temani Afif, der typische Edge Cases beschreibt. Ergänzend verweisen wir auf einen Talk von Bramus van Damme, der sich ausführlich mit dem Feature beschäftigt. [00:30:27] CSS MODULE SCRIPTS IN FIREFOX Firefox unterstützt nun ebenfalls CSS Module Scripts, sodass Styles direkt über ECMAScript-Module importiert werden können. Das ermöglicht neue Patterns für komponentenbasiertes Arbeiten, etwa in Kombination mit adoptedStyleSheets. Gleichzeitig diskutieren wir die Auswirkungen auf Performance und Architektur, insbesondere bei hybriden Ansätzen wie „Islands of Reactivity“, wo klassische Stylesheets und modulbasierte Styles zusammenkommen. [00:47:09] NAVIGATION API UND URL PATTERN API Die Navigation API ist jetzt auch in Firefox verfügbar und ersetzt die alte History API durch ein moderneres, eventbasiertes Modell. Navigationen können abgefangen, kontrolliert und mit eigenen Logiken versehen werden. Zusammen mit URL Pattern Matching entsteht so eine solide Grundlage für clientseitiges Routing ohne Frameworks. Die API ist Teil der Interop-Bemühungen, wie sie etwa im Interop 2026-Programm definiert sind. [00:51:49] CUSTOMIZABLE SELECT UND NEUE FORM CONTROLS Safari bringt Fortschritte bei anpassbaren Form-Controls. Das -Element lässt sich künftig über appearance: base-select komplett stylen. Ziel ist es, native Controls flexibler zu machen, ohne sie vollständig neu implementieren zu müssen. Dabei stellt sich auch die Frage, wie sich solche Anpassungen auf mobile Plattformen auswirken, wo bisher systemeigene UI-Komponenten dominieren. [00:59:08] ITERATOR HELPERS UND NEUE JAVASCRIPT-APIS Firefox implementiert neue Iterator-Methoden wie Iterator.zip() und Iterator.zipKeyed(). Diese arbeiten auf der Ebene von Iterables und Iterators und erlauben das Kombinieren unterschiedlicher Datenstrukturen wie Arrays, Sets oder NodeLists. Dabei wird deutlich, dass viele dieser APIs lazy arbeiten und andere Rückgabetypen liefern als klassische Array-Methoden, was ein Umdenken beim Umgang mit Daten erfordert. [01:11:35] STREAMS, TRANSFERABLES UND WORKER-KOMMUNIKATION Safari erweitert seine Unterstützung für Streams deutlich: ReadableStreams sind jetzt asynchron iterierbar (for await...of), können mit Readable.from() erzeugt werden und sind als transferable Objekte nutzbar. Dadurch lassen sich Datenströme direkt an Web Worker übergeben, ohne komplexe postMessage-Protokolle bauen zu müssen. [01:16:50] POPOVER, CLOSEWATCHER UND DIALOG-VERHALTEN Firefox ergänzt die Popover API um sogenannte Hints, die automatisch auf Basis von Nutzerverhalten erscheinen können. Zusätzlich gibt es mit dem CloseWatcher eine API, die plattformabhängige „Schließen“-Gesten abstrahiert. Ergänzend dazu erlaubt das closeby-Attribut bei Dialogen ein einheitliches Light-Dismiss-Verhalten. [01:21:31] NEUE CSS-PSEUDO-KLASSEN UND UNITS Es gibt eine Reihe weiterer CSS-Erweiterungen: Die :heading-Pseudo-Klasse selektiert alle Heading-Elemente, während :open geöffnete Elemente anspricht. Zusätzlich unterstützt Firefox jetzt Root-Varianten klassischer Längeneinheiten wie rcap, rch, rex und ric. [01:22:25] WEITERE VERBESSERUNGEN UND FIXES Firefox behebt einen langjährigen Quirk rund um about:blank-Load-Events in iframes. Safari unterstützt jetzt Scroll Anchoring und bringt mit Zstandard-Kompression sowie Verbesserungen bei Streams und Kompression zusätzliche Performance-Features. Außerdem ist die Sanitizer API nun auch in Firefox verfügbar, die wir bereits in Revision 695 besprochen haben. [01:30:27] WEBGPU ALS MODERNER WEBGL-NACHFOLGER Mit WebGPU ist eine moderne API für GPU-Berechnungen jetzt auch in Safari angekommen. Im Gegensatz zu WebGL ist sie besser erweiterbar, unterstützt Multithreading und erlaubt neben Grafik auch allgemeine Berechnungen auf der GPU, etwa für Simulationen oder KI-Anwendungen. LINKS CSS CAROUSEL ALS THEME SWITCHER Experiment von Schepp, das moderne CSS-Features unorthodox kombiniert. THE WEB WE WANT Event rund um die Frage, wie wir das Web in Zukunft gestalten wollen. CSS ARTICLES Sammlung von Artikeln von Temani Afif zu modernen CSS-Techniken.

PodParley-generated summary based on available episode metadata and transcript content.