Revision 695: Browser-News-Roundup

What this episode covers

In dieser Revision schauen wir wieder gemeinsam auf frische Browser-Features aus Chrome, Firefox und den WebKit Nightlies. Wir sprechen über praktische Bugfixes, neue CSS-Möglichkeiten, bessere DOM-APIs und ein paar eher nischige, aber extrem mächtige JavaScript-Neuerungen. SCHAUNOTIZEN [00:02:10] OVERSCROLL-BEHAVIOR FÜR CONTAINER OHNE SCROLL-LAYER (CHROME) Chrome respektiert overscroll-behavior jetzt auch dann, wenn ein Element faktisch keinen eigenen Scroll-Container hat. Das behebt einen langjährigen Pain Point bei Dialogen, Overlays und Off-Canvas-Navigationen, bei denen sonst plötzlich der Seitenhintergrund scrollt. Wir erklären, warum das bisher ein Spec-Problem war, wieso Chrome hier nachgezogen hat und warum man sich damit endlich fiese Workarounds sparen kann. Als anschauliches Beispiel schauen wir uns eine Scroll-Situation auf code.movie an. [00:11:50] WEAKMAP & WEAKSET MIT NICHT-REGISTRIERTEN SYMBOLS (FIREFOX) Firefox erlaubt nun auch nicht-registrierte Symbols als Keys in WeakMap und WeakSet. Damit sind Weak-Collections endlich vollständig konsistent mit der Garbage-Collection-Semantik von Symbols. Wir sprechen ausführlich darüber, warum das relevant ist, wann man Symbols überhaupt sinnvoll einsetzt und wie Peter sie unter anderem in seinem Web-Component-Framework Ornament nutzt – inklusive Exkurs zu registrierten Symbols, Symbol.for() und instanceof-Fallstricken bei gebundelten Libraries. [00:30:23] CSS STRETCH-KEYWORD FÜR WIDTH/HEIGHT Mit dem neuen Keyword stretch lassen sich Elemente sauber über die Content-Box ihres Elternteils aufspannen – ohne calc(), ohne absolute Positionierung und ohne Wissen über Padding. Wir ordnen ein, warum das funktional dem alten -webkit-fill-available entspricht, wie die Browser-Unterstützung aussieht (Can I Use) und warum das Feature trotz breiter Nutzbarkeit noch nicht als Baseline gilt. [00:36:27] ATOMICS.WAITASYNC() Atomics.waitAsync() bringt endlich eine Promise-basierte Alternative zur blockierenden Atomics.wait()-API. Damit lassen sich Shared-Array-Buffer-Synchronisationen auch im Main-Thread sinnvoll nutzen. Wir erklären, warum die alte API praktisch nur in Workern sinnvoll war, welche Workarounds man bisher brauchte und warum sich das Feature zwar nach Hardcore-Low-Level anhört, in der Praxis aber trotzdem nur selten lohnt. [00:43:02] @SCOPE @scope ist jetzt Baseline und ermöglicht echtes CSS-Scoping ohne Namenskonventionen, Build-Tools oder CSS-Modules. Styles lassen sich direkt an Komponenten koppeln – inklusive Donut-Scoping für Slots und Durchreiche-Bereiche. Wir diskutieren, warum das besonders für serverseitige Templates (PHP, Twig & Co.) hilfreich ist, wie man damit Toolchains drastisch vereinfachen kann und warum @scope ein echter Gamechanger für „CSS für Arme“ ist – im besten Sinne [01:07:15] MOVEBEFORE() moveBefore() ist die State-erhaltende Alternative zu insertBefore(). DOM-Nodes werden verschoben, ohne ihren internen Zustand zu verlieren – inklusive laufender Animationen, Video-Playback und Iframes. Für Web Components ist wichtig, dass sie den neuen connectedMoveCallback Lifecycle-Hook definieren, damit auch sie bei einem Move-Vorgang erhalten bleiben und nicht von Grund auf neu gebaut werden. [01:14:47] CSS SIBLING-COUNT() & SIBLING-INDEX() Mit sibling-count() und sibling-index() bekommt CSS endlich Zugriff auf strukturelle Informationen, die bisher nur mit Selector-Akrobatik oder JavaScript möglich waren. Wir erklären, wie man damit responsive Layouts, gestaffelte Animationen oder Karten-Stacks umsetzt – und warum das Zählen ab 1 zwar logisch, aber trotzdem ein dankbarer Diskussionspunkt ist. Schepp fällt eine Coding-Challenge von den Kollegen Syntax.fm ein, bei der Scott Tolinski das Feature sehr anschaulich zu seinem Vorteil einsetzt. [01:21:17] @CUSTOM-MEDIA (IN ARBEIT) Eigene Media-Query-Aliasse erlauben sprechende Breakpoints statt Magic Numbers. Firefox ist hier aktuell im Rollout, Chrome und Safari sind schon weiter. Ein großer Gewinn für Wartbarkeit und Lesbarkeit von CSS. [01:22:22] CSS MODULE SCRIPTS (FIREFOX AUF DEM WEG) CSS direkt per JavaScript importieren und als CSSStyleSheet weiterreichen – ohne Bundler, ohne Magie. Firefox schließt hier bald die letzte Lücke. Wir sprechen darüber, warum das besonders für Web-Components und native Module spannend ist und wie sich damit Toolchains und node_modules-Ordner spürbar verkleinern lassen. LINKS WORKING DRAFT REVISION 686 Die vorherige News-Round-Up-Folge, auf die wir mehrfach Bezug nehmen – inklusive weiterer Browser-Features, Device-Memory-API und Invoker-Commands. BOWER Ein nostalgischer Blick zurück auf einen der frühen Paketmanager fürs Web – inklusive Vogel-Logo, Merch-Shop und der Erkenntnis, dass manche Tools einfach nie ganz verschwinden.

Distinct summary based on available episode metadata or transcript content.