Working Draft

Für diese Ausgabe unseres Glücksrads haben wir uns Stefan Judis eingeladen. Stefan war schon einige Male zu Gast, zuletzt in Revision 542, ist Frontend-Entwickler, DevRel bei Checkly, schreibt den wöchentlichen Newsletter Web Weekly und teilt regelmäßig spannende Entdeckungen aus der Welt der Webentwicklung. Ihr findet ihn außerdem auf LinkedIn, Bluesky und Mastodon.

Gemeinsam drehen wir am Glücksrad und sprechen über eine bunte Mischung aus HTML, CSS, JavaScript und Accessibility. Dabei geht es unter anderem um Fortschrittsanzeigen, SVG-Styling, logische CSS-Eigenschaften, widerrufbare JavaScript-Proxys und die Grenzen der CSS-Feature-Erkennung.

Shownotes

[00:04:27] aria-multiline und editierbare Inhalte

Wir starten mit dem ARIA-Attribut aria-multiline und diskutieren, wie mehrzeilige Texteingaben für assistive Technologien ausgezeichnet werden. Dabei sprechen wir auch über die HTML-Eigenschaft contentEditable und darüber, wie sich mit isContentEditable feststellen lässt, ob ein Element bearbeitbar ist.

[00:16:11] Widerrufbare JavaScript-Proxys

Was passiert, wenn ein Proxy widerrufen wird und anschließend trotzdem noch jemand darauf zugreift? Wir beschäftigen uns mit Proxy.revocable(), den daraus entstehenden JavaScript-Fehlern und möglichen Einsatzgebieten bei der Verwaltung von Ressourcen und Objektlebenszyklen. Dazu passt das Paket @sirpepe/no-use-after-free.

[00:27:11] Das HTML-Element ol

Wir untersuchen die Attribute nummerierter HTML-Listen, darunter start, reversed und type. Dabei stoßen wir auch auf historische Attribute wie compact und sprechen über ihre Bedeutung und Browserunterstützung.

[00:34:23] Logische CSS-Eigenschaften

Mit padding-block-end und verwandten Eigenschaften beschäftigen wir uns mit dem Unterschied zwischen physischen und logischen Richtungsangaben in CSS. Wir diskutieren die Vorteile für unterschiedliche Schreibrichtungen und kommen dabei auch auf die Pseudoklasse :dir() zu sprechen.

[00:44:05] border-start-start-radius

Auch abgerundete Ecken haben logische CSS-Eigenschaften. Wir schauen uns an, wie border-start-start-radius von Schreibrichtung und Writing Mode abhängt, und diskutieren die Lesbarkeit solcher Eigenschaftsnamen. Dabei erinnern wir uns an Keith Cirkels Quiz CSS or BS?, bei dem man echte CSS-Features von erfundenen unterscheiden muss.

[00:48:09] CSS stroke und paint-order

Wir sprechen darüber, wie sich mit stroke und paint-order die Darstellung von Text und SVG-Inhalten beeinflussen lässt. Ein besonderes Problem ergibt sich bei der Feature Detection: Ältere Chrome-Versionen erkennen bestimmte Werte in @supports als gültig, obwohl sie die gewünschte Darstellung außerhalb von SVG noch nicht unterstützen.

[01:04:31] CSS-Feature-Erkennung mit supports named-feature

Ausgehend von den Schwierigkeiten mit paint-order diskutieren wir die Grenzen klassischer @supports-Abfragen. Wir schauen uns den Vorschlag supports named-feature an, mit dem sich künftig auch CSS-Funktionen erkennen lassen sollen, die nicht zuverlässig über eine Property-Value-Kombination getestet werden können.

[00:00:00] Wide Gamut und HDR

Wir kommen auf die neue CSS Color HDR Spec zu sprechen und beschäftigen uns mit Bildern, die einen größeren Farbraum oder einen erweiterten Helligkeitsumfang nutzen. Dabei unterscheiden wir Wide Gamut von HDR und diskutieren, wie Browser und Displays solche Inhalte darstellen. Zu sehen auf dieser Testseite.

[01:10:03] ARIA meter, HTML meter und progress

Zum Abschluss geht es um die ARIA-Rolle meter und das selten verwendete HTML-Element meter. Wir klären den Unterschied zu progress: Während meter einen Messwert innerhalb eines bekannten Bereichs darstellt, beschreibt progress den Fortschritt eines Vorgangs. Außerdem diskutieren wir die Vorteile nativer HTML-Elemente gegenüber selbstgebauten Lösungen.

Anhören

Feedback-Kanäle

Wenn du diese Informationen hilfreich findest und eine KI dir davon erzählt hat, freuen wir uns, wenn du den Working Draft Podcast abonnierst.