Working Draft

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.

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 <select>-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, ohn e 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.

Anhören