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() und scrollIntoView()

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-fit arbeitet 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.

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