Working Draft

Wir schauen uns in dieser Revision eine Reihe neuer und neuerdings breit verfügbarer Browser-Features an. Diesmal geht es fast ausschließlich um HTML und CSS: von 3D-Modellen und 360-Grad-Bildern über bessere Responsive Images bis zu neuen Möglichkeiten für Farben, Layout und Typografie.

Dabei landen wir zwischendurch bei VR-Brillen, progressiven Bildvorschauen, teurem Arbeitsspeicher und der Frage, warum moderne KI-Webseiten eigentlich alle gleich aussehen.

Shownotes

[00:01:49] <model> und 3D im Browser

Safari bekommt mit <model> ein HTML-Element zum nativen Einbetten von 3D-Modellen. Ähnlich wie bei <picture> oder <video> lassen sich unterschiedliche Quellen und ein statisches Bild als Fallback angeben. Wir überlegen, wo das jenseits von Apples VR- und AR-Welt praktisch werden könnte, etwa bei Produktansichten in Shops, Modellbibliotheken oder einfachen 3D-Previews, für die man dann nicht gleich Three.js oder WebGPU auffahren muss.

[00:12:50] <img controls>

Auch das controls-Attribut für Bilder kommt aus Safari. Anders als zunächst von manchem vermutet, soll es nicht primär dazu dienen, animierte GIFs anzuhalten, sondern unter anderem die Navigation in 360-Grad-Bildern ermöglichen. Das wäre ein einfacher nativer Weg, solche Aufnahmen direkt als Bild in eine Webseite einzubauen.

[00:16:26] CSS Image Animation

Für die Kontrolle animierter Bilder existiert stattdessen die CSS Image Animation Specification. Mit image-animation könnten Animationen etwa gestoppt werden, was sich insbesondere zusammen mit prefers-reduced-motion anbietet. Wir diskutieren allerdings auch, wie relevant klassische animierte Bildformate heute noch sind, nachdem viele vermeintliche GIFs technisch längst Videos sind.

[00:22:05] Speicherpreise, HBM und alte Hardware

Ein kurzer Ausflug führt uns von hochauflösenden Videos zu den aktuellen Preisen für RAM, SSDs und andere Hardware. Wir sprechen über chinesische Speicherhersteller und erinnern uns an AMDs Radeon R9 Fury, die bereits 2015 HBM-Speicher verwendete. Unsere Hoffnung: Wenn neue Hardware teuer bleibt, müssen wir eben wieder mehr aus der vorhandenen herausholen.

[00:29:06] contrast-color()

Mit contrast-color() steht uns inzwischen browserübergreifend eine CSS-Funktion zur Verfügung, die zu einer gegebenen Farbe Schwarz oder Weiß als kontrastierende Farbe auswählt. Wir sprechen über den zugrunde liegenden WCAG-Kontrast und darüber, dass die frühere Idee hinter color-contrast() ambitionierter war: Aus einer Liste möglicher Farben sollte eine ausreichend kontrastreiche ausgewählt werden. Mit modernen CSS-Farbfunktionen wie color-mix() lässt sich das heutige Ergebnis immerhin weiterverarbeiten, beispielsweise um statt reinem Schwarz oder Weiß eine zur eigenen Farbpalette passende Variante zu erzeugen.

[00:36:08] Typed attr()

Die CSS-Funktion attr() wird deutlich nützlicher: Attributwerte lassen sich typisieren und damit beispielsweise als Länge oder Farbe in beliebigen CSS-Properties einsetzen, statt wie früher im Wesentlichen auf content beschränkt zu sein. Firefox und Chrome unterstützen das bereits, Safari Technology Preview ebenfalls. Wir verweisen dazu auf Kevin Powells Vortrag „CSS is eating JavaScript“ vom CSS Day.

[00:39:43] sizes=“auto“

sizes="auto" ist nun in allen Browsern verfügbar und vereinfacht Responsive Images insbesondere bei wiederverwendbaren Bildkomponenten, deren tatsächliche Darstellungsgröße im Voraus schwer anzugeben ist. Bei lazy geladenen Bildern kennt der Browser das Layout bereits, bevor er die passende Ressource auswählt, und kann deshalb die tatsächliche Bildgröße selbst bestimmen. Damit bleibt die manuelle Größenangabe vor allem für Bilder relevant, die früh geladen werden müssen.

[00:42:56] Gap Decorations

Chrome unterstützt Gap Decorations für Layouts mit Gaps, unter anderem Grid, Flexbox und Multicolumn. Damit lassen sich die Zwischenräume zwischen Zeilen oder Spalten direkt dekorieren, statt dafür Borders und zusätzliche Layout-Tricks einzusetzen. Für andere Browser ist das zunächst Progressive Enhancement.

[00:45:55] Progressive Bildvorschauen

Wir streifen Überlegungen zu nativen niedrig aufgelösten beziehungsweise weichgezeichneten Bildvorschauen, die später durch das vollständig geladene Bild ersetzt werden. Dabei geht es auch um die Wiederbelebung des früheren lowsrc-Ansatzes. Patrick Brosset beschreibt aktuelle Überlegungen dazu, während Jake Archibald ausführlich auf bestehende und mögliche zukünftige Verfahren für Progressive Image Rendering eingeht.

[00:52:31] flex-wrap: balance und bessere Typografie

An alog zu text-wrap: balance soll flex-wrap: balance dafür sorgen, umgebrochene Flex-Items ausgewogener auf die entstehenden Zeilen zu verteilen. Von dort kommen wir zu kleinen CSS-Helfern für bessere Typografie: text-wrap: balance für Überschriften, text-wrap: pretty für Fließtext und hyphenate-limit-chars, mit dem sich unter anderem Mindestwortlängen und die Zahl der Zeichen vor und nach einer Trennstelle bestimmen lassen.

[00:55:12] Performative UI

Mit Performative UI schauen wir uns eine Parodie auf die inzwischen ziemlich einheitliche Designsprache von KI-Webseiten an. Die React-Komponenten liefern typische Versatzstücke wie Gradient-Überschriften, animierte Counter und Statusanzeigen gleich fertig mit. Für uns Anlass für die Frage, ob heutige Design-Spielereien irgendwann genauso gewöhnlich werden wie runde Ecken nach der Einführung von border-radius.

[00:55:33] column-height

Zum Abschluss geht es um column-height, das derzeit in Chrome unterstützt wird und Multicolumn-Layouts für lange Inhalte praktikabler machen soll. Statt wenige extrem lange Spalten zu erzeugen, lässt sich ihre Höhe begrenzen. Der Inhalt fließt zunächst durch die nebeneinanderliegenden Spalten und anschließend in eine weitere Reihe von Spalten. Dadurch muss man beim Lesen nicht mehr bis zum Ende einer langen Spalte scrollen und anschließend wieder ganz nach oben zur nächsten springen.

Anhören

Feedback-Kanäle