Revision 686: Neues in den Browsern

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

mittwald.de/workingdraft?ref=workingdraft.de

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?ref=workingdraft.de und buch dein erstes Projekt!

Schaunotizen

[00:03:25] IntersectionObserver: scrollMargin in allen Browsern (developer.mozilla.org/en-US/docs/Web/API/Inter…)
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 (developer.mozilla.org/en-US/docs/Web/JavaScrip…)
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 (youtube.com/watch?v=m6ID-dv2f34), Floating Point visually explained (fabiensanglard.net/floating_point_visually_exp…).
[00:29:07] Explicit Resource Management (using, Symbol.dispose) (developer.mozilla.org/en-US/docs/Web/JavaScrip…)
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 (developer.mozilla.org/en-US/docs/Web/JavaScrip…)
State an DOM-Knoten hängen, ohne Leaks; nicht iterierbar by Design. Talk-Empfehlung: Dan Shappir – Strength in weakness (youtube.com/watch?v=XwV9H3_m4lY).
[00:35:57] Partytown & Atomics mit SharedArrayBuffer (partytown.qwik.dev)
Third-party-Skripte in Web-Worker „so tun als ob DOM“ – Synchronisation über developer.mozilla.org/en-US/docs/Web/JavaScrip…. (Historisch Fallback: synchrone XHR via SW-MitM – bitte nicht mehr.)
[00:39:46] Prioritized Task Scheduling API (developer.mozilla.org/en-US/docs/Web/API/Prior…)
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: developer.mozilla.org/en-US/docs/Web/API/Windo….
[00:52:50] navigator.deviceMemory (Chromium) (developer.mozilla.org/en-US/docs/Web/API/Navig…) & RUMVision: Device Memory als Proxy (rumvision.com/blog/how-device-capabilities-mig…)
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 (calendar.perfplanet.com/2023/inp-performance-a…). SEO-Seitenthema: Scraper-Traffic & „Great Decoupling“ → Analyse von Brodie Clark (brodieclark.com/the-great-decoupling-num100).
[01:02:29] Dialog & Popover: Invoker-API, Fokus & Feinschliff (developer.mozilla.org/en-US/docs/Web/API/HTMLD…)
Invoker-/Command-Mechanik (developer.mozilla.org/en-US/docs/Web/API/HTMLB…) für ohne JS-Boilerplate öffnen/schließen; nicht alle DOM-Methoden „automatisch“ als Command. Neues: developer.mozilla.org/en-US/docs/Web/API/HTMLD… (wer schloss den Dialog?) und showPopover({source}) (developer.mozilla.org/en-US/docs/Web/API/HTMLE…) – wichtig fürs Fokus-Return. Fokusmanagement bleibt knifflig.
[01:18:15] developer.mozilla.org/en-US/docs/Web/CSS/@star…
Saubere „from-state“ Transitions (z.B. Dialog-Entry) – alle großen Browser dabei. Stolpersteine: Josh W. Comeau: The big gotcha (joshwcomeau.com/css/starting-style).
[01:19:17] View Transitions API (developer.mozilla.org/en-US/docs/Web/API/View_…)
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 (developer.mozilla.org/en-US/docs/Web/HTTP/Refe…)
Gezielt Caches/Storage per Header leeren (Logout, harte Resets).
[01:29:51] CSS random() (webkit.org/blog/17285/rolling-the-dice-with-cs…) und tree-counting Funktionen.
Zufall in CSS für Effekte/Variationen; siehe auch Kizu: Tree counting & random (kizu.dev/tree-counting-and-random).
[01:32:35] URL Pattern API (developer.mozilla.org/en-US/docs/Web/API/URL_P…)
Bequemes URL-Matching in JS; neu in Firefox 142 & Safari 26.
[01:34:00] CSS :heading (Firefox) (developer.mozilla.org/en-US/docs/Web/CSS/:head…)
Ein Selektor für alle Überschriften-Level – vereinfachtes Typo-Styling.
[01:35:00] CSS field-sizing (developer.mozilla.org/en-US/docs/Web/CSS/field…)
Eingabefeld-Autogröße und positionsgenaue Overlays/Tooltips – feineres UI-Layouting.
[01:35:50] Anchor Positioning (developer.mozilla.org/en-US/docs/Web/CSS/CSS_a…)
Feineres UI-Layouting für Overlays/Tooltips.
[01:37:35] CSS animation-timeline (developer.mozilla.org/en-US/docs/Web/CSS/anima…)
Scroll-/View-gekoppelte Timelines – jetzt auch in Safari.
[01:38:10] Interop 2025 (webkit.org/blog/16458/announcing-interop-2025)
Gemeinsam priorisierte Feature-Arbeit der Browser-Teams – Grundlage dafür, dass vieles „überall benutzbar“ wird.

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