Working Draft

Alle paar Monate setzen sich Peter und Schepp für eine neue Runde „Neues in den Browsern“ zusammen: Was hat Chrome gepusht, wo hat Safari nachgezogen, was ist frisch in Firefox – und vor allem: Was davon ist heute schon praxistauglich? Wir sortieren Release Notes, testen Features im Alltag und teilen konkrete Einsatzideen aus echten Projekten. In dieser Ausgabe geht’s u. a. um den IntersectionObserver mit scrollMargin, präziseres Rechnen mit Math.sumPrecise, explizites Ressourcen-Management, Scheduling für bessere INP-Werte, sowie Dialog/Popover-Feinschliff, @starting-style, View Transitions und eine schnelle Lightning-Round am Schluss mit kleinen, feinen Browser-Updates.

Schaunotizen

[00:03:25] IntersectionObserver: scrollMargin in allen Browsern

Endlich auch in Firefox: Beobachtungsbereich in versteckte Scrollzonen erweitern – z.B. für Lazy-Loading in Slidern (früheres Laden vor Sichtbarkeit). Abgrenzung zu rootMargin, graceful Degradation. Use-Cases: Performance-Moderation, Header ein-/ausblenden, lazy Komponenten initialisieren.

[00:15:42] JavaScript: Math.sumPrecise

Verhindert aufgesammelte Floating-Point-Fehler beim Aufsummieren (aktuell in Firefox, Standardisierung läuft). Kontext: 0.1 + 0.2 ≠ 0.3, Reihenfolge-Unterschiede bei Floats. Weiteres: Falsehoods programmers believe about money – Sarah Dayan, Floating Point visually explained.

[00:29:07] Explicit Resource Management (using, Symbol.dispose)

Deterministische Aufräumlogik (z.B. Temp-Dateien/Streams): Klassen implementieren Symbol.dispose/Symbol.asyncDispose, verwendet mit using. Abgrenzung zu GC-/Finalization-Registry; im Frontend selten nötig, im Backend super nützlich.

[00:30:12] WeakRefs/WeakMaps/WeakSets

State an DOM-Knoten hängen, ohne Leaks; nicht iterierbar by Design. Talk-Empfehlung: Dan Shappir – Strength in weakness.

[00:35:57] Partytown & Atomics mit SharedArrayBuffer

Third-party-Skripte in Web-Worker „so tun als ob DOM“ – Synchronisation über Atomics. (Historisch Fallback: synchrone XHR via SW-MitM – bitte nicht mehr.)

[00:39:46] Prioritized Task Scheduling API

await scheduler.yield() setzt freiwillige Sollbruchstellen in heavy Main-Thread-Tasks. Hilft INP („Interaction to Next Paint“), ohne jeden Schritt in Microtasks zu verpacken. Safari hinkt noch; Alternative/Ergänzung: requestIdleCallback.

[00:52:50] navigator.deviceMemory (Chromium) & RUMVision: Device Memory als Proxy

RAM-Buckets (1/2/4/8+ GB) als Proxy für Geräteleistung: Auf schwachen Geräten Third-Party (Analytics/Sentry) später oder gar nicht laden. Hintergrund/Lesetipp: INP-Analyse – RUMVision. SEO-Seitenthema: Scraper-Traffic & „Great Decoupling“ → Analyse von Brodie Clark.

[01:02:29] Dialog & Popover: Invoker-API, Fokus & Feinschliff

Invoker-/Command-Mechanik (commandForElement) für ohne JS-Boilerplate öffnen/schließen; nicht alle DOM-Methoden „automatisch“ als Command. Neues: closedBy (wer schloss den Dialog?) und showPopover({source}) – wichtig fürs Fokus-Return. Fokusmanagement bleibt knifflig.

[01:18:15] @starting-style

Saubere „from-state“ Transitions (z.B. Dialog-Entry) – alle großen Browser dabei. Stolpersteine: Josh W. Comeau: The big gotcha.

[01:19:17] View Transitions API

Nutzen für MPA-Flows (z.B. Button → Dialog „verwandeln“, List-Reorders). Praktisch auch für Exit-Animationen, wo Dialog selbst limitiert ist.

[01:24:43] HTTP: Clear-Site-Data

Gezielt Caches/Storage per Header leeren (Logout, harte Resets).

[01:29:51] CSS random() und tree-counting Funktionen.

Zufall in CSS für Effekte/Variationen; siehe auch Kizu: Tree counting & random.

[01:32:35] URL Pattern API

Bequemes URL-Matching in JS; neu in Firefox 142 & Safari 26.

[01:34:00] CSS :heading (Firefox)

Ein Selektor für alle Überschriften-Level – vereinfachtes Typo-Styling.

[01:35:00] CSS field-sizing

Eingabefeld-Autogröße und positionsgenaue Overlays/Tooltips – feineres UI-Layouting.

[01:35:50] Anchor Positioning

Feineres UI-Layouting für Overlays/Tooltips.

[01:37:35] CSS animation-timeline

Scroll-/View-gekoppelte Timelines – jetzt auch in Safari.

[01:38:10] Interop 2025

Gemeinsam priorisierte Feature-Arbeit der Browser-Teams – Grundlage dafür, dass vieles „überall benutzbar“ wird.

Anhören