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.
Shownotes
- [00:02:09]
focusgroup 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() 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() als verwandtes Thema.- [00:29:49] Element-scoped View Transitions
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()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 sowie object-view-box.- [00:59:37] Promises für
scrollTo(),scrollBy()undscrollIntoView() 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 Iteration über
ReadableStream-Objekte gehört inzwischen zu Baseline. Wir sprechen darüber, wie sich Streams dadurch deutlich eleganter verarbeiten lassen.- [01:11:33]
text-fit Mit
text-fitarbeitet Chrome an einer nativen Lösung für automatisch skalierenden Text. Wir vergleichen den aktuellen Vorschlag mit bisherigen CSS-Techniken und werfen dabei auch einen Blick auf Roman Komarovs Experiment Fit-to-Width.- [01:19:07] Heading Levels im Firefox Accessibility Inspector
Der Firefox Accessibility Inspector zeigt nun die berechneten Heading Levels an. Wir sprechen darüber, warum diese Information insbesondere bei komplexen Dokumentstrukturen und im Zusammenhang mit aria-level hilfreich ist.
- [01:27:31]
shadowrootslotassignment Wir schauen uns das neue
shadowrootslotassignment-Attribut für deklarative Shadow DOMs an und diskutieren, welche Auswirkungen unterschiedliche Slot-Zuweisungsstrategien auf Web Components haben.- [01:34:45] field-sizing
Zum Abschluss geht es um
field-sizing, das inzwischen Teil von Baseline ist. Wir sprechen darüber, wie Formularelemente ihren Inhalt automatisch berücksichtigen können und welche Auswirkungen das auf Textfelder und Textareas hat. Dabei kommen wir auch kurz auf das inzwischen längste ARIA-Attribut aria-brailleroledescription zu sprechen.
Links
- Making Keyboard Navigation Effortless
Microsoft beschreibt die Motivation und Hintergründe hinter dem neuen focusgroup-Attribut.
- @microsoft/focusgroup-polyfill
Polyfill für focusgroup, um das Feature auch in Browsern ohne native Unterstützung auszuprobieren.