Revision 725: Die Browser haben wieder geliefert

Wir werfen wieder einen Blick auf aktuelle Entwicklungen der Webplattform und sprechen über eine ganze Reihe neuer Browser-Features und Standards, die in den letzten Monaten ihren Weg in Chrome, Firefox oder Baseline gefunden haben. Dabei geht es sowohl um neue APIs und CSS-Features als auch um Verbesserungen für Accessibility und die Entwicklerwerkzeuge. Unser Sponsor Alle reden von Automation – aber wo betreibst du eigentlich deine Tools? Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints. Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei mittwald. 👉 mittwald.de/workingdraft [https://mittwald.de/workingdraft?ref=workingdraft.de] Shownotes [00:02:09] focusgroup [https://open-ui.org/components/scoped-focusgroup.explainer/] Den Anfang macht das neue focusgroup-Attribut, das die Tastaturnavigation innerhalb von Komponenten deutlich vereinfachen soll. Wir sprechen über den aktuellen Stand der Implementierung in Chrome, den Ursprung der Idee im Open UI Projekt sowie Microsofts Beweggründe. Außerdem erinnern wir uns an unsere frühere Folge über räumliche Navigation und werfen einen Blick auf das verfügbare Polyfill für andere Browser. [00:12:49] Math.sumPrecise() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sumPrecise] Mit Math.sumPrecise() landet eine neue JavaScript-Funktion in Baseline, die Rundungsfehler beim Addieren vieler Fließkommazahlen reduziert. Wir sprechen darüber, wann sich die neue Methode lohnt und streifen dabei auch kurz Object.is() [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is] als verwandtes Thema. [00:29:49] Element-scoped View Transitions [https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API/Using_element-scoped] View Transitions lassen sich inzwischen nicht mehr nur für ganze Dokumente einsetzen. Wir schauen uns an, wie elementbezogene View Transitions funktionieren und welche Anwendungsfälle dadurch möglich werden. [00:38:09] light-dark() [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark] für Bilder Firefox unterstützt nun light-dark() auch in Kombination mit Bildern. Wir sprechen darüber, welche Möglichkeiten sich dadurch ergeben und streifen außerdem die neuen CSS-Eigenschaften link-parameters [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/link-parameters] sowie object-view-box [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/object-view-box]. [00:59:37] Promises für scrollTo(), scrollBy() und scrollIntoView() [https://trade-assistance.com/blog/programmatic-scroll-promises-chrome-150/] Chrome liefert für programmatische Scrollvorgänge künftig Promises zurück. Wir diskutieren, welche Probleme sich damit lösen lassen und warum das die Arbeit mit Scroll-Animationen und Benutzerinteraktionen vereinfachen kann. [01:07:11] Async Iteration für ReadableStreams Die asynchrone Iterati