Revision 686: Neues in den Browsern

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.

Unser Sponsor

Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern ein Hosting mit Strom aus 100 % erneuerbaren Energien. Also, worauf wartest du?
Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt!

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.