Revision 734: Neue Browser-Features im Herbst 2026

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]