
Working Draft· Folge 734
Revision 734: Neue Browser-Features im Herbst 2026
Dienstag, 20. Oktober 2026 · 1 h 02
Kapitelklicken springt direkt hin
Shownotes
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
[] <model> und 3D im Browser (developer.apple.com/quick-look-gallery)
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.
[] <img controls> (github.com/whatwg/html/issues/11856)
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.
[] CSS Image Animation (w3.org/TR/css-image-animation-1/#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.
[] 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 (golem.de/news/cxmt-ymtc-chinesische-speicherhe…) und erinnern uns an AMDs Radeon R9 Fury (notebookcheck.com/AMD-Radeon-R9-Fury-Benchmark…), die bereits 2015 HBM-Speicher verwendete. Unsere Hoffnung: Wenn neue Hardware teuer bleibt, müssen wir eben wieder mehr aus der vorhandenen herausholen.
[] 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.
[] Typed attr() (kevinpowell.co/talks/css-is-eating-js)
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.
[] 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.
[] 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.
[] 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 (patrickbrosset.com/articles/2026-09-22-blurry-…) beschreibt aktuelle Überlegungen dazu, während Jake Archibald (jakearchibald.com/2025/present-and-future-of-p…) ausführlich auf bestehende und mögliche zukünftige Verfahren für Progressive Image Rendering eingeht.
[] flex-wrap: balance (developer.mozilla.org/en-US/docs/Web/CSS/Refer…) 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 developer.mozilla.org/en-US/docs/Web/CSS/Refer…, mit dem sich unter anderem Mindestwortlängen und die Zahl der Zeichen vor und nach einer Trennstelle bestimmen lassen.
[] Performative UI (performative-ui.cncl.co)
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.
[] developer.mozilla.org/en-US/docs/Web/CSS/Refer…
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.
Diskutiert die Folge mit uns in unserem Community-Slack: draft.community
Transkriptvom Podcast bereitgestellt · Zeitmarken springen hin
Also ich finde, das ist ja bei allen 3D-Brillen so. Ja, absolut. Also mich hat das nie so richtig gekickt, also diese Vorstellung, was man noch machen kann. Andere sehen das anders. Ich habe kein iPhone. Ich habe ein Mac, aber der ist noch auf einer alten Mac OS-Version. Deswegen habe ich natürlich nicht den neuesten Safari und kann es auch gar nicht ausprobieren.
Dass es gut bleibt, solange auf der alten Version, wie du sein kannst, frag mich nicht, woher ich das weiß. Aber hier 27 soll doch gut sein. Ich habe das Gefühl, dass du etwas sarkastisch bist. Ich bin mir nicht sicher. Ach was, ach was. Working Draft Revision 734. Hallihallo Hallöle und herzlich willkommen zu Working Draft Revision 734. Wir sind heute zu zweit. Da haben wir einmal aus dem Team den Shep.
Hello. Und auch aus dem Team mich, den Peter. Und sonst haben wir hier niemanden, außer natürlich einer langen Liste mit Dingen, die jetzt plötzlich in den Browsern unserer Wahl und oder größter Verachtung funktionieren, die vorher nicht funktioniert haben. Und wir können jetzt mal drüber reden, was das so alles ist, wie wir das finden und was man damit so anstellen kann.
Und es sind, würde ich sagen, eher so Kleinigkeiten oder Dinge, die halt extrem speziell sind. Und naja, fangen wir einfach mal an mit einem Zeug, wo ich jetzt wirklich so denke, das braucht doch nun wirklich keine alte Sau. Aber Shep erinnert sich seiner Vergangenheit und sagt, nee, HTML braucht definitiv ein Model-Tag, um 3D-Modelle in Webseiten einzubinden.
Genau, also wenn wir schon Geolocation bekommen und User-Media und so weiter und so fort, dann kann man auch Model nehmen. Also ich meine, Geolocation, der Rideshare-Fahrer muss doch wissen, wo er mich einsammeln muss. 3D-Modell? Ja, genau. Das ist natürlich ein spezieller Use Case. Gibt es jetzt in Safari.
Funktioniert eigentlich genauso wie das Picture Element. Also du hast Model und da drin hast du, oder vielleicht das Video Element. Du hast dann Sources, wo du verschiedene Dateiformate, 3D-Dateiformate angeben kannst. Und wenn der Browser eins von denen kennt, dann kann er das Model eben in einem, Art Viewport in deiner Seite eingebettet zeigen.
Und wenn ein Browser es nicht kann, dann packst du halt noch ein Image-Element rein und dann hast du eben ein statisches Fallback, das eben dann dein 3D-Modell zeigt und warum das im Safari-Land ist, ist, sehr wahrscheinlich wegen hier deren 3D-Brille die haben. Wie ist denn das so in der Welt der 3D-Modelle? Ist das so mit den Dateiformaten, dass es da so die gängigen gibt?
Weil ich meine, in der Welt der Rastergrafiken ist es ja recht einfach. Da haben wir unsere JPEGs und unsere PNGs, nur noch fancy sind unsere WIPs und unsere AVIFs und dann war's das. Gibt's da auch irgendwie so die großen vier im 3D-Bereich oder ist das da komplizierter? Ne, da gibt es auch so Formate, die sich so durchgesetzt haben, um auch eben 3D-Modelle zwischen verschiedenen Programmen hin und her zu schieben.
Und dann gibt es eben aber nochmal jeweils das Dateiformat dieses Programms, das eben nur dieses Programm kann. Darum ist es auch gar nicht so doof, da einfach mehrere Formate anzubieten. Einfach für den Fall. Das sind manche Formate halt auch einfach unterstützen, mehr Features als andere. Also. Zum Beispiel? Naja, es gibt welche, die können halt nur geometrische Daten und Texturen unterstützen, aber dann sind, glaube ich, die Texturen auch nicht drin.
Das ist so OBJ, so ein altes Format von Silicon Graphics, das das kann oder, das viele Dinge nicht kann. Dann gibt es das FBX-Format, das konnten auch viele 3D-Programme, ich weiß nicht, ob das, glaube ich, gar nicht mehr so angesagt. Und das konnte dann halt, keine Ahnung, auch Skelette in Figuren drin und.
Wie halt die Oberfläche sozusagen gekoppelt ist an das Skelett, sodass wenn du das halt bewegst, dass dann auch die Geometrie sich passend mitbewegt. Solche Dinge. Naja, und so haben die halt eben alle verschiedene Fähigkeiten und die kann man dann einfach da spezifizieren. Und je nach, aber es ist ja momentan eh nur ein Client, der das unterstützt, und da kann man dann im Grunde, das beste Modell nehmen, das beste Format, was eben die Apple-Brille unterstützt.
Ja, du bist ja noch näher am Apple-Universum dran als ich. Funktioniert das so als Produkt für die oder wird das demnächst den Weg des Lisa gehen und. Also ich habe das Gefühl, dass es noch nicht so richtig funktioniert, aber eingestellt wird es auch nicht. Aber ich glaube, es wird einfach jetzt auch nicht mehr so viel Gas gegeben und so viele Ressourcen aufgeworfen.
Aber es gibt trotzdem immer noch Updates dafür. Also es wird nicht fallen gelassen. Aber ich glaube, dass man da eben einfach nicht so dahinter ist wie am Anfang. Aber ich meine, es ist ja auch sehr teuer. Es ist sehr teuer und natürlich ist, also ich habe bei der Produktkategorie echt den Eindruck, dass der Pitch deutlich besser ist als dann die Realität, also im Sinne von Integration in einen wie auch immer gearteten Alltag, der nicht.
Also ich finde, das ist ja bei allen 3D-Brillen so. Ja, absolut. Also mich hat das nie so richtig gekickt, also diese Vorstellung, was man dort machen kann. Andere sehen das anders. Lange hieß es ja so, es liegt einfach nur an der Hardware. Wenn die mal so weit ist, wenn die gut genug ist, dann finden die Leute das mega und machen das.
Aber das halt wie mit so Shutterbrillen am Fernseher. Das hatten wir ja auch mal eine gewisse Zeit lang. da war es total gehypt, da mussten alle Fernsehere 3D unterstützen auf die eine oder andere Art, und dann hat man halt noch mit seinem Fernseher so zwei Shutterbrillen mitbekommen und dann konnte man aber eben nur zwei, die anderen musste man dazu kaufen und dann konnte man, theoretisch 3D gucken vor seinem Fernseher aber ich kenne niemanden, der das irgendwie gemacht hat und die ganzen 3D-Brillenbesitzer, die ich kenne die haben sich eine geholt meistens so eine HTC Vive, weil es halt irgendwie Spaß macht und witzig ist und dann hat man es irgendwie ausprobiert und dann hängt die in der Ecke.
Ja, ich kenne halt tatsächlich so ein paar Enthusiasten, die haben so ein Teil im Einsatz. Also okay, das ist keine 3D-Brille. Aber was machen die damit? Mehr so 2D. Nee, das ist so ein 2D-Ding. Das geht so mehr so in Richtung der perversen Brille da von Meta, nur halt eben nach innen gerichtet, nicht nach außen mit der Idee.
Das sieht dann einfach nur aus, als wäre es eine etwas absurd große Sonnenbrille. Das ist ja mit der aktuellen Mode in Sachen Nasenfahrrad vereinbar. Und kann halt mit deinem Laptop reden. Das heißt, du könntest im Prinzip im Zug sitzen und dann Top-Secret-Kram arbeiten und niemand kann dir halt über die Schulter gucken und das lesen.
Okay, ja. Das ist aber was anderes als halt eben so ein zigtausend Dollar Virtual-Reality-Ding. Genau, es ist halt kein Virtual-Reality, es ist einfach nur dein Bildschirm, den du vor dem Auge hast. Aber sonst ist alles wie gehabt. Ja. Ja, aber selbst das, also selbst das reizt mich nicht so wirklich.
Also Hut ab, dass sie es durchziehen, aber ja. Also ich könnte mir das vorstellen im Sinne von so einer Arcade Experience. Irgendwie so, ich nutze das, weil ich irgendwo hingehe und da gibt das das und das ist dann auch irgendwie in einer Art und Weise aufbereitet in halt irgendwie auch einem Raum mit dann gegebenenfalls gepolzertem Fußboden und ähnlichen Kisten, wo ich dann sagen kann, jawohl, gib her und ja.
Arcade-mäßig halt, ne? Ja, das gibt es auch. Aber zu Hause? Schwierig. Also hier haben wir Holocafé, haben wir. Und Seven Space, glaube ich, die haben mehrere Filialen. Genau, da kannst du dich einfach einmieten. Kannst dann sagen, was du machen willst. Kein Markt ist das halt. Nee, nee, ist es auch nicht. Absolut nicht.
Genau, aber ich kann mir vorstellen, also dieses Model-Dings, das könnte man auch, einfach im normalen Browser haben und dann hast du da auch Controls und dann kannst du dein Modell drehen und ja, also musst du dann nicht das ganze 3.js, WebGPU-Zeugs auffahren, um eben Modelle zu zeigen. Und vielleicht wenn du, also es gibt auch diese Bibliotheken, wo du dir Modelle für deinen 3D-Docker kaufen kannst oder so, da könnte ich mir vorstellen, ist das vielleicht ganz nett, wenn man da so durchbrowsen kann und sich die da anguckt da. Oder vielleicht auch für Shops, die dann irgendwelche Produkte darstellen.
Ja, ich wollte es gerade sagen, ich bin halt gedanklich im Ikea und ich drehe den Stuhl dreimal um die Ecke. So, einfach nur so als erster Schritt. Als zweiter Schritt stell den vielleicht irgendwie in einen Raum rein, um halt so eine Idee davon zu bekommen, wie der aussieht. Das ist halt nicht die verkehrteste Idee per se, aber die Frage ist natürlich, wo sitzt das Model, was so Capabilities angeht, im Vergleich zu einer 3JS-Applikation?
Weil das Model ist ja wirklich so, das ist dann da und ich kann es mir angucken. Aber das hat ja jetzt keinen Interaktivitätslayer und ich frage mich halt eben, wie wichtig ist der Use Case, wo diese Interaktivität, die halt dann customizable wahrscheinlich auch sein will. Weil ich halt eben als der Verchecker von 3D-Modellen wahrscheinlich andere Anwendungsfälle habe für sowas als ein Verchecker von Stühlen.
Also für wen ist das halt oder ist es einfach nur nice? Kann ich dir auch nicht sagen. Also ich glaube auch, dass der Uptake durch die anderen Browser-Hersteller eher gering sein wird. Also weiß nicht, ob die das auch so mega finden, dass die da Entwicklerressourcen draufwerfen. Und auch wir Entwickler, Entwicklende, ich weiß nicht, ob da die Leute Großschlange stehen dafür.
Aber gibt's, wer es braucht, hat halt irgendwie einen relativ einfachen Weg, jetzt 3D-Modelle im Browser anzuzeigen. Genau. Schritt 1. Besorgt dir so eine Apple-3D-Brille? Ja, wobei ich weiß, also der Normal-Safari müsste das ja auch darstellen. Also ich glaube nicht, dass der sagt, ich kann es nicht und vielleicht kannst du auf deinem iPhone dann auch so ein Modell darstellen und dann kannst du vielleicht dein iPhone irgendwie bewegen und das Modell dreht sich dabei oder du guckst um das Modell rum oder so. Keine Ahnung.
Ich habe kein iPhone, ich habe ein Mac, aber der ist noch auf einer alten macOS-Version, deswegen habe ich natürlich nicht den neuesten Safari und kann es auch gar nicht ausprobieren. Das ist gut, bleibt so lange auf der alten Version, wie du sein kannst. Frag mich nicht, woher ich das weiß. Aber hier 27 soll doch gut sein. Das ist doch sozusagen der Polish von der 26.
Kollege, das alles hat ein Polish von irgendwie einem Linux von 2004. Keine zwei Border-Radien sind gleich. Ich weiß nicht, was die da rauchen im Apple-Hauptquartier. Also bei richtigem Design sind ja auch nicht immer alle Border-Radien gleich. Weil wenn du quasi zwei hast, die quasi einen zusammen, sozusagen in einem Abstand voneinander sind, dann muss natürlich der äußere, ein anderer Border-Radius, nämlich ein weiterer sein als der Border-Radius von innen, weißt du?
Ja, aber dann sieht es ja gut aus. Die haben die Border-Radien so gewählt, dass sie nicht gleich sind und das aussieht wie, das sieht halt aus wie Linux. Also sorry. Okay. Was machen die da? ich verstehe das nicht, oder ich bin halt einfach nur ich habe einen Knick in der Optik, Ja, wir werden alle älter wer weiß, irgendwann werde ich mal updaten auf die 27 Ja, äh, Genau, und was ich dann aber auch noch bekommen werde, ist das Controls Attribut auf dem Image Element weil du dann in deinem fortgeschrittenen Alter dann einfach auf größer drücken kannst.
Zum Beispiel? Genau, also auf LinkedIn war letztens ein Post, wo jemand das eben auch darüber geschrieben hatte, dass es dieses Controls-Attribut auf Image gibt und dessen These war, dass man damit ja dann, vermutlich Animated GIFs pausieren könne, was ja ganz cool ist eigentlich für Accessibility. Und auch vielleicht generell, also irgendwann geht es einem vielleicht dann auf den Sack, dass da so ein Bild sich immer bewegt und ablenkt.
Stell dir dabei heraus, dafür ist es nicht gedacht. Gedacht ist es für auch wieder die also so Use Cases, wo du 360-Grad-Bilder, in das Image-Element reinlädst und dann Controls brauchst, um dich darin umzugucken. Also sozusagen das Umgedrehte von dem Model. Beim Model guckst du von außen drauf und das dreht sich in der Mitte und hier guckst du quasi von der Mitte nach außen und willst dich halt umschauen.
Ja, interessant. Ich habe mal ein 360-Grad-YouTube-Video gesehen. Das gibt es ja. Und da ist ja tatsächlich das Bedienelement wirklich, wie drehst du das Telefon? Genau. Es gibt auch Facebook, das ist auch schon immer. Und ich habe es auch so eine 360-Grad-Kamera, die sowohl Fotos als auch Videos aufnehmen kann und das ist schon ganz fein. Macht Spaß.
Das ist sehr cool, aber also zum Aufnehmen sehe ich das. Weißt du, du machst irgendwie einen coolen Stunt oder sowas oder dann willst du halt einfach, alle Winkel aufnehmen, damit du hinterher im Edit dir im Prinzip aussuchen kannst, was du gefilmt hast. Das haben wir übrigens ja auch gemacht mit der 60-Grad-Kamera, der Hans und ich, auf der T3-Con.
Da hatten wir ja quasi eine Kamera und haben dann verschiedene Close-Ups da rausgeholt, weil die ja eh rundherum gefilmt hat. Da konnten wir uns hinterher quasi die Aufnahmen und Totalen rausfischen, die wir zwischen den hin und her schneiden wollten. Das war ganz nice. Ja, das ist es. Nur als Medium, das dann präsentiert wird, es ist...
Ja. Bin ich halt noch nicht so der Fan von und bessere Steuerungsmittel als ich drehe das Telefon von meiner Nase herum wie ein Wahnsinniger, wäre schon gar nicht so schlecht. Ja, ich glaube, du konntest auch mit dem Finger swipen, das ging auch. Ja, nicht als ich das probiert habe oder ich bin zu blöd, das kann natürlich auch sein.
Ja, also es ist halt ganz cool, also wenn ich so ein 360-Grad-Bild habe und ich will das irgendwie mit wem schicken, dass die Person sich das angucken kann, dann kann ich das momentan oder mache ich das momentan über Google Fotos. Die unterstützen das auch. Und es wäre natürlich cool, wenn man das einfach in einen normalen Image-Element reinpacken könnte und dann wem schicken und so, dass da irgendwie keine Verrenkung nötig ist.
Aber trotzdem ist es sehr speziell. Also die breite Masse juckt es, glaube ich, eher nicht. Aber ich finde den Use Case näher, alter als kompatibler in der Theorie als jetzt, ich brauche jetzt hier einen generischen 3D-Modell-Renderer ohne weitere Customization. Ja, das stimmt. Genau, und ich hatte dann mich erinnert, dass es, auch so eine CSS-Spec gibt, die gedacht ist für das, also für das, was dieser Mensch auf LinkedIn ursprünglich dachte, wofür Controls gut ist, nämlich, dass man, animierte Bilder pausieren kann und die dümmelt leider so ein bisschen vor sich hin.
Ich weiß nicht, vielleicht müsste man da mal den Browser-Herstellern sagen, so, hey, so, wir wollen das haben. Ich fände es auf jeden Fall cool, das ist die Image-Animation-Level-1-Spec. Genau, mit dem Image-Animation, mit der Image-Animation-Property, die man auf Pause setzen kann oder Stopped oder Running.
Dann könnte man das hier hingehen und bei Prefers-Reduced-Motion eben sagen, okay, Image-Animation ist einfach grundsätzlich Stopped. Das wäre natürlich schön, aber ich glaube tatsächlich, wie viele animierte Bilder gibt es tatsächlich im Alltag? Im Sinne von, das ist ein animiertes Bild und nicht auf einer Webseite präsentiert, die behauptet, sie würde GIFs verteilen, aber de facto sind das alles irgendwelche Videos.
Ja. Weil das Problem mit Videos ist halt, leider Videokodex sind halt schwarze Magie und die kriegen Sachen so klein gequetscht, dass man das nicht glaubt. Und jedes animierte Bildformat kackt dagegen massiv ab. Ja, das stimmt. Genau. Wobei du mit CSS alleine kannst ein Video ja auch nicht vom Spielen abhalten.
Nö, aber meine private Hypothese ist ja, seit jeher nacktes Video verwendet keiner, sondern das ist immer eingepackt in sieben Schichten JavaScript-Lasagne. Und wenn das eh deine Membran ist, um mit dem Ding umzugehen und du kannst ja in JavaScript auch recht bequem abfragen, ob Preface Reduced Motion an ist oder nicht.
Ja, genau. Es gibt halt trotzdem keine reine CSS Möglichkeit, das zu steuern. Also ich meine, im einfachsten Falle hast du einfach ein Video-Element mit Muted, und Autoplay und dann und glaube ich, Loop oder so. Ja. Und da brauchst du ja noch nicht mal das JavaScript für. Dann könntest du JavaScript nehmen, um das davon abzuhalten natürlich, um vielleicht dann das Autoplay-Attribut runterzunehmen.
Aber vielleicht wäre es mit CSS noch ein bisschen leichter. Ja, ist halt schwierig. Also inhärent ist halt die Dimensionalität von Video, größer. Im Sinne von, du kannst damit mehr Dinge machen und halb so schnell abspielen, doppelt so schnell abspielen, Ton an, aus. Ich glaube, dieses Image-Animation-Ding macht in einer Welt, wo tatsächlich GIFs und.
Web-Piece und sowas existieren, schon viel Sinn. Aber wie gesagt, die Frage, die ich halt stelle, ist jetzt nicht, macht das Sinn, sondern wie prävalent ist das Problem, das da belöst wird, das existiert. Aber wie oft kommt das wirklich vor? Ja, deswegen ist es wahrscheinlich auch noch nicht groß angegangen worden. Ja.
Weil du ja im Safari kannst du ja Videos auch in Image-Elemente reinpacken und dann würde es damit wahrscheinlich funktionieren. Okay. Das sind die einzigen, die das können. Ja. Warum machen die das? Also die Chrome-Leute haben da keinen Bock drauf, weil die irgendwie ihre, das passt irgendwie nicht zu deren Vorstellungen, wie ihre Render-Pipeline läuft.
Also das wurde immer härtestens abgeschmettert, wenn irgendwelche User oder, Autoren das haben wollten. Ja. Aber ich glaube, auch da müsste man einfach die weiter piesacken. Ja, ich meine, es ist schon eine lustige Idee. Ich brauche kein spezielles Videotech. So, das Ding von HTML5, mit dem der heilige Steve eins Flash zu Grabe getragen hat.
Wir sind jetzt die Einzigen, die das Ding im Prinzip abschaffen, weil ich kann es auch mit einem Image-Element machen. Aber ich würde tatsächlich an deren Stelle nicht ruhen, bis tatsächlich Videos auch durch Diffs abgespielt werden können. Du meinst einfach zum Beispiel durch ein CSS-Hintergrund Video anstatt Bild oder was?
Ja, oder alles andere. Schau dir nur mit deiner Web-Anwendung an, das ist eh alles Diffs. Und das Diff scheint ja sowas zu sein, so als Evolutionsziel, sowas ähnliches wie die gemeine Krabbe. Alles, was man so vor sich hin mutieren lässt, wird am Ende zur Krabbe. Das ist irgendwie die Idealform halt des Lebens und so ähnlich sieht es ja mit Diffs aus.
Ich habe das Gefühl, dass du etwas sarkastisch bist. Ich bin mir nicht sicher. Ach was, ach was. Das war ein Thema, wo wir bei Videocards sind. Ich hab mal zum Spaß letztens versucht, baue mal irgendwie ein 8K-Video mit 120 Frames und gib das mal einem Browser zum Rendern. War nicht so gut. Ja, glaube ich.
Kommt wahrscheinlich drauf an. Der delegiert das ja auch einfach nur an den Hardware-Decoder ab. Und dann hast du noch das Problem, dass deine Refresh-Rate, wenn die nur 60 Hertz ist, hast du von 120 Hertz nichts. Nee, aber es ging halt einfach nur darum, zu zeigen, dass das geht oder halt, wie das dann aussieht.
Natürlich bringt das nichts und zum anderen ist es ja so, dass du auf anderen Devices als halt jetzt so ein Computermonitor durchaus mehr Refresh-Rate haben kannst. Aber auch wenn ich gedacht hätte, das muss ja eigentlich funktionieren, wenn ich es halt einfach so abspielen kann in meinem Videoplayer, sollte es ja irgendwie dann in so einem Firefox-Fenster genauso tun, aber hat es irgendwie nicht getan.
Ich weiß nicht warum und ich brauchte das auch nicht. Das war halt einfach nur so, was passiert, wenn ich einfach alle Regler auf 11 drehe. Und mehr ging es mir gar nicht. Aber du hast quasi auf der gleichen Maschine, lief es dann in sagen wir mal QuickTime? VAC lief easy, so ganz normale Linux-Kiste. Ja, okay.
Also moderner PC auf dem Stand von Anfang 2020. Wir können uns ja eh keine moderneren PCs mehr holen durch Ramageddon und so. Ich hab mich tatsächlich gefragt, weil mein PC so all ist, wie weit sind die Chinesen wirklich hinterher, was so RAM angeht. Weil irgendwann bin ich so weit hinter State of the Art hinterher, dass ich weniger weit hinterher bin als die chinesischen RAM-Hersteller, wenn du mir folgen kannst. Weißt du, was ich meine?
Und dann deckst du dich bei denen ein, oder wie? Dann decke ich mich bei denen ein für halt einfach irgendwie Kram, der halt irgendwie nicht so besonders toll ist im Vergleich zu einem hypothetischen Kram, den ich halt von, verkauft ja keiner mehr, Ramridl. Also, ne? Wenn du die letzte Generation nimmst, dann sind die ja noch nicht so teuer.
Aber die Chinesen haben ja, es gibt ja jetzt hier gerade einen ganz neuen Player aus China, der auch aktuelle, also moderne DDR5-Speicher baut, hier CXMT heißen die. Ja, genau, das ist die, die ich auch da so mit einem halben Auge verfolge. Ja. Aber trotzdem kriegt man den Speicher bei denen auch nicht billiger.
Also ich meine, die werden ja auch schön blöd, wenn die sehr viel billiger werden. Warum nicht sich die Taschen voll machen? Naja, aber ich meine, mit den Autos kriegen sie es ja auch hin. Also ein Freund von uns, größter Mercedes-Fan aller Zeiten, hat jetzt ein chinesisches Elektroauto und ist begeistert.
Wir haben auch eins, super. Weil er halt eben sagt, okay, das ist irgendwie ziemlich luxuriös, ich habe hier Massagesitze für irgendwie Preis, den ich immer noch für ziemlich hoch halte, aber es ist halt eine Luxuskarre und irgendwie alles toll und ist halt nicht so, ein Elektro-Benz oder so ein Scheiß.
Und warum soll ich das halt mit ihrem Speicher nicht auch hinkriegen? Keine Ahnung. Weiß ich nicht. Genau. Aber wir werden auf jeden Fall jetzt alle erstmal sitzen bleiben und mitten auf unserer Hardware, die wir haben, da wird nichts mehr geupgradet, groß, glaube ich. Und auch so Sachen wie eine Playstation, die kostet mittlerweile, oder eine Xbox. Das ist einfach alles komplett irre.
Komplett bizarr, ne? Genau. Aber das heißt, jetzt wird erstmal wieder alles aus Hardware rausgeholt. So ein bisschen so wie bei den Konsolen, vor allem früher, als sie dann so, als am Ende des Lebens von so einem Super Nintendo echt die geilsten Spiele rauskamen, weil die das System so in- und auswendig kannten und da alles ausgereizt haben.
Aha, du gehst also jetzt davon aus, als Performance-Papst, dass für dich goldene Zeiten anbrechen, weil die Hardware eingefroren ist auf dem Stand von vor drei Jahren? Nicht nur für mich. Also, ich denke mal, ich meine, das ist ja der Einzige, das Einzige, was du machen kannst. Ja, aber entspricht das deiner Alltagserfahrung? Also ich meine ja mittlerweile so an so manchen Dingen durchaus zu erkennen, wer da mittlerweile den ganzen Code schreibt und dass diese Entität nicht die größte Weitsicht an den Tag legt.
Also schneller wird meiner Software hier nicht gefühlt. Ich weiß es nicht. Mal gucken. Genau, aber neue Hardware kaufen ist keine Option. Also oder ist eine Option, aber eine sehr teure, die man sich gut überlegt. Das kann sich vielleicht Bill Gates leisten, aber wir machen das mal nicht. Nee. Genau, wir warten einfach, bis die ganzen KI-Buden irgendwie zusammenklappen und dann ultra viel Hardware auf dem Markt ist und auch ganz viel Produktionskapazität und dann kriegen wir wieder alles hinterher geworfen.
Aber ist das mit der Produktionskapazität nicht so, dass diese HBM-Kisten, die sie halt für ihre GPUs haben, nicht wirklich übersetzbar sind in, ich baue eine RAM-Riegel für Chefs PC? Nee, aber für Grafikkarten. Also es gab, also jetzt schreife ich ein bisschen ab, aber es gab ja von AMD gab es ja mal die eine mit HBM-Speicher, also diesem High Bandwidth Memory, was ja die ganzen hier Enterprise GPUs nutzen. Ja.
Ja. Und da gab's, also genau, die hatten, das ist schon eine Weile her, da haben die mal ein so ein Ding, ich glaube, das war die Fury, hieß die, meine ich. Und ich meine mich jetzt ja auch zu erinnern, also korrigier mich, wenn ich falsch liege, ich hab von sowas ja gar keine Ahnung, aber tatsächlich ist ja der Nachteil von dem HBM im Wesentlichen in der Produktion.
Also ist irgendwie feine Technik, aufwendig, niedrige Yields und lauter so Kram. Aber wenn du tatsächlich eine Fabrik so konfiguriert hast, dass du nur noch dieses Zeug bauen kannst, ist das natürlich so, dann würdest du es im Teil 200 eben bauen, während du versuchst, wieder was anderes hochzuziehen.
So habe ich das noch gar nicht betrachtet. Aber der SSD kriegen wir dann trotzdem nicht, oder? Also mit HBM nicht, aber die SSDs werden ja auch alle von den KI-Buden gekauft. Und die Produktionskapazität ist ja da. Und wenn die Abnehmer dann an der Stelle fehlen, dann wird man halt wieder den Endkonsumenten suchen.
Das ist zumindest mal meine These. So. Ja, ja. Wen denn sonst? Hat ja nichts übrig. Und auch da wieder scheint es mir ja so darauf hinaus zu laufen, dass der Chines uns zeigt, wo der Hammer hängt mit seinen. Open-Wade-Modellen, die halt für billig 90% der Leistung bieten. Das wird dann schwierig, wenn du so ein Open-AI bist. Langfristig, mittelfristig, baldfristig.
Ja, ich sage ja eh, Open Air ist eh bald platt. Die sind so hinüber. Die Frage ist halt, was mit dem Nächsten halt eben passiert. Aber ich meine, der ist ja auch in einer finanziell nicht unbedingt haltbaren Situation, wie mir scheint. Wir werden das beobachten. Und wenn die zusammenklappen, dann freuen wir uns auf jeden Fall über hoffentlich günstigere Hardware.
Ich habe in meinem Bürokühlschrank zwei Dosen Bier stehen. Eine für mich vielleicht? Also du kannst gerne vorbeikommen, wenn du möchtest. Aber tatsächlich ist die eine halt immer so für besonders schlimmer Diktator hat einen besonders schlechten Tag. Okay. Das ist einfach so, das habe ich dann damals, als sie Saddam abgesetzt haben, mir zur Tradition gemacht, dass ich gesagt habe, weißt du was, das wird jetzt bestimmt irgendwie schrecklich schief gehen, aber heute ist ein guter Tag. So, dafür ist das Ding da.
Als sie Assad verjagt haben. So, die nächsten sind bestimmt auch nicht toll, aber jetzt ist halt mal ein guter Tag. Dafür ist die eine Dose. Die andere Dose ist halt, wenn irgendwie die erste von den KI-Booten über den Deister geht. Ja, ich bin gespannt. Ja, ja. Genau. Aber hier an der Browserfront neu ist auch Contrast Color.
Meine Güte, manchmal ist es ja so, du findest so ein Feature und hast es instantan in deine Realität integriert. Und mir ging das ja so mit Contrast Color. Als ich irgendwie gemerkt habe, ah, das können jetzt ja alles. Zack. Ja, das ist schon cool. Ich meine, so ein bisschen enttäuschend ist, dass es ja mal mit mehr Ambitionen gestartet ist, als es noch Color-Contrast hieß.
Ja. Genau, da war ja mal die Idee, dass man Also vielleicht sollten wir kurz beschreiben, was das macht, oder? Genau, also das Aktuelle, willst du beschreiben, was das Aktuelle macht? Genau, korrigiere mich, wenn ich falsch liege, aber Contrast Color, eine Funktion in CSS, steckt man eine Farbe rein und hinten fällt die Kontrastfarbe raus, die entweder schwarz oder weiß ist.
Genau, aber es gibt eben nur die Option schwarz oder weiß, also was anderes nicht. Genau, das ist halt, was da rauskommt. Genau, und Und innen drin steckt einfach der Algorithmus von der WCAG. Der Kontrastberechnungsalgorithmus für Level AA, glaube ich. Ich meine auch, dass das so war, ja. Genau. Also, dass einfach das Kontrastverhältnis passt.
Was ja nicht garantiert ist trotzdem. Also, man kann trotzdem hinterher, man kann eine Farbe reinstecken und man kriegt was raus, was irgendwie... Besser ist als das Gegenteil, aber trotzdem nicht irgendwie ein Lesbarkeitskriterium erfüllt. Damit spielst du an auf die Tatsache, dass das nicht berücksichtigt, wie wir Farben, so perzeptieren, also wie wir die quasi wahrnehmen und wir bestimmte Farben eben einfach als die, die zwar mathematisch ein gleiches Helligkeitsniveau haben, aber unterschiedlich hell wahrnehmen.
Zum Beispiel, ja. Weil der Algorithmus, wenn ich mich recht erinnere, ja nicht in einem dieser modernen, wahrnehmungskalibrierten Farbräume operiert, sondern oldschool ist. Ja, genau. Da gibt es ja den Upcar-Algorithmus, der das eben macht und über den diskutiert wird, ob der in eine zukünftige WCAG-Version hineinwandert.
Aber da er jetzt momentan eben nicht drin ist, riecht man sich eben nach WCAG-Standard und der ist eben, wie er ist. Und ich muss noch sagen, mit Contrast Color, selbst wenn man irgendwie, wenn man sich die Webseiten da draußen anguckt, es sind jetzt ja nicht gerade die wilden 70er angesagt im Webdesign, was so die Farbschemata angeht, und gerade in einer Welt, wo man halt ein Dark Mode und ein Light Mode irgendwie hat, dann macht man da vielleicht eher was Dunkles und was Helles und macht halt ein paar Akzentfarben drüber und gut ist und wenn man mit sowas operiert, was halt echt, glaube ich, üblich ist ist halt dann, dieser Mechanismus der einem entweder ein Schwarz oder ein Weiß rauswirft.
Gut genug. Ausreichend. Genau. Genau. Was man ja auch machen kann, ist, dass man dann hingeht und einen zweiten Schritt mit Color Mix zum Beispiel hingeht und dieses Weiß oder das Schwarz, was rausgekommen ist, also quasi da, das mischt mit der Brand Color, die man hat oder sowas in der Art. Oder man zerlegt das und nimmt sich dann einen Teil des Helligkeitswerts und lässt sich einfließen in diese Brand Color.
Genau, das war nämlich genau, was ich gerade sagen sollte, ist ja so eine von diesen Faustregeln, irgendwie macht das Design halt ein bisschen besser, dass man nicht wirklich mit Schwarz und Weiß operiert, sondern ein bisschen Sättigung reinwirft, und dass es halt eben dann mit den Farbfunktionen in CSS, die, wie du sagtest, das halt wunderbar in die Bestandteile zerlegen, dann, also ist es nicht trivial, aber auf jeden Fall möglich, dass man dann irgendwie sagt, ich mische das zusammen, ich akzentuiere das.
Was halt so langsam echt fehlt in CSS, ist wirklich so die selbstdefinierte Funktion, dass man das irgendwie in so einem Mix in... Ach so, ja, aber das kommt ja. Also ich glaube, in Chrome hast du das ja schon. Die Functions. Ja, aber was habe ich in Chrome nicht? Also ich meine, ich brauche das aber in mehr als einem Browser. Ja, klar.
Aber ja, ich kann mir vorstellen, dass das vielleicht, aktuell läuft ja auch quasi die. Also die, der Call for Submissions für Interop 20, ist das 27 oder doch, genau, 2027. Müsste 27 sagen, ja. Und vielleicht ist da ja auch, sind da die Functions mit drin oder die Mixins oder sowas. Mal gucken. Also es hängt ja immer so ein bisschen davon ab, ob die dafür Web-Plattform-Tests haben.
Also es ist halt nicht so, dass man sich einfach nur was wünschen kann, sondern man kann sich nur was wünschen, für das es auch genügend Web-Plattform-Tests gibt, gegen die die Browser eben dann, testen können, weil die ja auch irgendwie messen wollen, wie weit sie sind und so. Man kann sich eine Implementierung wünschen, aber kein Feature.
Genau. Und das Ursprüngliche, das war ja mal ein bisschen größer gedacht von dem Contrast Color. Das hieß damals auch eben noch Color-Contrast. Und da war es so, dass du einen ganzen Satz an Farben. In die Funktion reingeben konntest. und dann hat die erste war die Hintergrundfarbe und, alle folgenden waren sozusagen mögliche kontrastierende Farben und dann hat die Funktion eben die erstbeste dieser Farbliste ausgespuckt, die eben genug Kontrast hat.
Genau, also das ist was, das kann man glaube ich mit dem, was wir in CSS haben, leider nicht nachbauen. Nee, das wäre halt ein wunderbarer Use Case für halt so eine Function. Ja. Genau. Ich scrolle hier gerade durch. Es ist echt super, dass diese Functions dann auch als Identifier so ein Dash-Dash vorne dran haben.
Ich glaube, da haben die sich ja mittlerweile irgendwie darauf geeinigt, dass das irgendwie ganz cool ist, das einfach so zu handhaben überall. Ja. Aber was natürlich besonders super ist, wenn man irgendwie so am Debuggen ist, ist, man kann auch wunderbar so ein Identifier bauen und drei Dashes vorne dran machen.
Und sich dann wundern, warum es nicht funktioniert, weil man nicht genau hinschaut. Ja. Naja, so Möglichkeiten gibt es genug, sich in den Fuß zu schießen im Web. Ja. Ich habe letztens in einem CSS-Parser einen Bug-Report gesehen, der da so sagte, hier ist aber schon klar, dass man eine ID haben kann und entsprechend auch einen ID-Selektor, der eine Syntax hat, die auch eine gültige Farbe ist.
Und dass man das vielleicht berücksichtigen sollte. Ja. Ja, aber... Ich meine, die Sonntags von diesen CSS-Funktionen, so wie sie jetzt gerade definiert sind, ist auch einfach super. Sieht halt aus wie CSS. Das ist brillant. Genau, da haben wir noch eine CSS-Funktion, die wir ganz gut finden. Oh ja. Die jetzt im Grunde bald überall nutzbar ist.
Und zwar die Attribut-Funktion. Die gibt es ja schon ganz lange, aber es gibt jetzt sozusagen die Version 2 davon, die typt es, also man kann dann sozusagen, man kann sagen, also verwende den Wert, der in einem HTML-Attribut steckt und zwar und interpretiere den als Length Unit oder als Color oder was weiß ich.
Und dann kann man das auch in jeder beliebigen CSS-Property verwenden und nicht nur in Content. wie das früher der Fall war in Pseuderelementen. Das ist cool. Ja, das ist cool und glaube ich auch, was relativ häufig ist, wo normale Menschen versuchen, das so zu nutzen und dann irgendwie sich wundern, warum geht denn das nicht? Aber ohne Datentyp weiß Attra halt eben nicht, was das für ein Typ sein soll. Nach Taten-String draus.
Ich sehe gerade, der Attra-Funktion kann man auch einen Namespace geben, weil ja Attribute in einem Namespace sein können. Stimmt. Ja, das stimmt, aber ich suche nach weiteren CSS-Bugs für meinen Parser. Das ist eines, was bestimmt nicht berücksichtigt ist. Das muss ich mir direkt mal notieren. Genau, wird unterstützt von Firefox, von Chrome und von der Safari Technology Preview.
Aber eben noch nicht von Safari 27. Genau. Das ist dann wirklich der Letzte, der noch fehlt dafür. Ja, und ich meine, momentan macht man das ja, indem man dann irgendwie einen Inline-Style hat und dann da ein Custom-Property reinsteckt. Die kann man natürlich dann auf ähnliche Art und Weise verwenden, aber, ist halt auch cool, wenn man Sachen, die eh in einem Attribut stehen, auch direkt nutzen kann. Ja, auf jeden Fall.
Meine Güte, das wird eins von diesen Dingern sein, wenn das plötzlich einfach so geht? Ja. Nach Dekaden? Nach Dekaden, ja, ja. Das ist auch, warum ging das nicht? Gute Frage. Unklar. Ich habe beim CSS-Day einen Vortrag von einem Talk von Kevin Powell zu dem Thema gesehen und ich gucke mal, ob ich den finde.
Kevin Paul, weil dann könnten wir den auch noch verlinken. Der war nämlich echt ganz schön. Ist er da auch so in die, warum hat er so lange gedauert, Kiste eingestiegen? Weil die würde mich ja interessieren. Die Frage hat er sich nicht gestellt. Er hat einfach nur gezeigt, was da möglich ist. Na gut, ist ja auch der CSS-Day und nicht der Browser-Hersteller-Firmen-Bürokratie-Day.
Ja, guck mal, es gibt auf jeden Fall hier die Präse dazu. Die Videos, die releasen die immer erst später. Meistens immer erst kurz, bevor dann der nächste CSS-Day stattfindet, der dann immer im Juni stattfindet. Das Slide Deck ist auch cool gut, genau, dann haben wir was in HTML, nämlich alle Browser unterstützen das Sizes Attribut auf Picture und Image tun sie das nicht schon wieder ja, eigentlich ist das ja immer auf dem Image Element, glaube ich, oder ja, genau, ja, ich meine auch, weil das Picture Element ist ja nichts weiter als quasi ein Steuerungsmechanismus für das Image, das Image rendert es und das Picture pickt die Source raus.
Genau, wobei Source Set, das kannst du ja auch auf dem Source Element packen, meine ich. Aber Sizes ist da nicht. Aber vielleicht bin ich jetzt, habe ich auch gerade einen Knoten im Kopf. Auf jeden Fall Sizes gleich Auto ist deswegen cool, weil das auch, also die richtigen Sizes zu spezifizieren ist ja nicht immer so ganz trivial und und oder machbar.
Oder machbar, genau. Vor allem oft dann nicht, wenn du eine Bildkomponente hast, die in ganz verschiedene Dinger reingesteckt werden könnte. Und dann würdest du ja unterschiedliche Sizes angeben wollen, in denen das Bild gerendert wird. Was du aber vielleicht nicht immer weißt oder gesagt bekommst. Und bei Sizes Auto musst du das nicht. Da befindet der Browser das selber heraus.
Was aber nur dann geht, wenn dieses Bild auch lazy loadet. Weil wenn das Bild nicht lazy loadet, dann will ja der Browser dieses Bild, diese Bildressource so möglichst schnell laden. Da ist ja dieser Resource-Scanner, der über dieses HTML geht. Und weil das Layout dann ja noch nicht steht, weiß er eben nicht, welche Größe das hat.
Und darum muss man ihm da das dann sagen, aber wenn man das Bild auf lazy stellt, dann wartet der Browser ja für dieses Bild erstmal ohnehin, dass das Layout steht, um dann zu wissen, ob das Bild im Viewport ist und dann es zu laden oder nicht und in dem Moment weiß er natürlich dann auch, in welcher Größe es geändert werden wird.
Ja, und der Effekt wäre also, ich gebe Sizes Auto an, mach es aber nicht lazy loading, dann hat das Sizes Auto keinen Effekt. Ja, genau. Dann wäre das wie, wenn du kein Sizes-Attribut hättest und dann würde er einfach die größte Auflösung aus dem Strauß nehmen, zur Sicherheit. Ja. Genau, aber ist halt so, macht das Leben leichter, ist halt, dann hat man das Problem im Grunde nur noch beim, vielleicht beim Hero-Image oder so, aber da kann man vielleicht auch davon ausgehen, dass das wahrscheinlich die volle Bildschirmbreite hat.
Das heißt also so, man schießt sich deutlich weniger in den Performance-Fuß. Also manche bei der Performance-Fuß ist der linke oder der rechte, das habe ich mir jetzt nicht so sicher. Ja. Ich würde sagen, das ist halt wie beim Fußballer, je nachdem wie du halt drauf bist, ist es links, rechts und wenn du besonders gut bist, sind beide die Performance-Füße.
Beidfüßige Performance-Füße, ja. Beidfüßiger Performance-Papst, würde ich sagen. Ja. Genau, ja. Unterstützen jetzt auf jeden Fall alle Browser. Ja, das ist schon mal sehr gut. So, wollen wir eine Feature-Lücke schließen, Shep? Ja, gerne, immer. Gap Decorations für Grid und Flexbox und Konsorten sind im Kommen, sind, wenn ich mich jetzt gerade richtig erinnere, weil ich mich in unsere Notizen verlaufen habe, im Moment in Chrome, und sonst noch nirgends, aber ist halt im Prinzip mal halt eine Border zwischen deine Grid Columns oder Rows.
Genau, aber auch Flex oder Multicolumn. Alles, was eben mit Gaps haben kann, kann jetzt auch diese Gaps bedecorated bekommen. Genau, und das ist so ein Ding, es gibt ja immer so ein paar Sachen, die sich die Microsofties so rauspicken, an denen sie dann an Chromium arbeiten. Und Gap Decorations ist eben so ein Ding. Übrigens aktuell überlegen sie, ob sie diese Nativ, dieses, ich weiß nicht, wie der Begriff dafür ist, aber dass du quasi Bilder, erstmal so weich gezeichnete, niedrig aufgelöste Bilder hast und, dann, sobald das hoch aufgelöste Bild dann geladen ist, wird es dann ausgetauscht und fadet quasi in das vollaufgelöste.
Da gibt es ja auch so einen Begriff, wie diese Technik heißt. Genau, aber das mit niedrig aufgelöst ist ja noch nett beschrieben. Im Prinzip ist es ja mehr oder minder ein fancy Gradient. Ja, genau. Und die Herausforderung ist halt dann auch immer, okay, Gradient aus dem Bild irgendwie rauskriegen, muss halt auch erstmal irgendwie gemacht werden, ist nicht ganz trivial.
Und wie implementiert man das dann? Genau, also das bleibt, das hast du leider immer noch an Hacken, das Problem. Aber du musst eben nicht mehr irgendeinen JavaScript oder so dafür an den Start bringen, um quasi diesen Build-Switch durchzuführen. So würde man einen JavaScript an den Start bringen müssen.
Wenn ich es jetzt hätte machen müssen, hätte ich jetzt gesagt, man serialisiere den Gradient in irgendeine Form und baue den in irgendeiner Form ins HTML rein, das da geschickt wird. Irgendwie von mir aus geinlinedes SVG oder irgendwie so ein Käse. Und schicke dann halt das rüber, damit das im Prinzip aberst ein Rendering da ist und dann irgendwann lädt das Bild Lazy da rein.
Ja, genau, aber wo packst du denn, also dann würdest du das als Hintergrund von dem Image benutzen, weil du kannst ja nicht Source benutzen, da liegt ja schon dein späteres Bild drauf. Ja, absolut. Ja. Genau. Also erst war, glaube ich, Preview-Source oder so war, glaube ich, ein angedachtes Attribut und dann hatte ja auch bei uns im Community-Slack der Patrick Lauke, darauf hingewiesen, dass es ja damals und auch die Microsoft ist darauf hingewiesen, dass es damals Low-Source schon gab als Attribut, das aber irgendwie nie so richtig genutzt wurde, aber es war spezifiziert. Okay.
Und der Thomas Steiner auch, den wir auch schon zu Gast hatten, beide. Und ja, dann jetzt überlegen sie gerade oder schwenken sie gerade um, dass sie sagen, cool, wenn es eben Low Source als Attribut schon für Bilder gab, dann lassen wir uns das so einfach auch wieder nehmen. Ja. Also weil das ist ja im Grunde, sagt das ja genau das, was die vorhaben.
Ich verlinke das mal hier auch. Ja, ich habe halt nur die ein bisschen so Social-Media-Diskussionen darüber gesehen. Das ist alles, was ich dazu verfolgt hatte. Ich meine auch gelesen zu haben, dass irgendwelche Leute an den Bildformaten rumgehackt haben, um irgendwie zu sagen, ich hacke da jetzt irgendwie so den Rendermechanismus von so einem AVIV, das ist das erste Frame, was da rauskommt.
Weil das ja auch irgendwie, also das ist ja nicht in dem Sinne progressiv, wie jetzt ein progressives JPEG ist, aber irgendwie ist da ja auch sowas in der Richtung drin, glaube ich. Das ist der Jake Archibald, der damit rumgefummelt hat. Ja, genau, irgendwie sowas. Und eigentlich wäre es ja ganz nett, wenn Bilder das tatsächlich einfach so nativ als Feature könnten.
Also Progressive JPEG wieder. Aber das bringt halt nichts, wenn die Latenzen hoch sind. Ich verlinke den Artikel oder den Blogpost von Jake auf jeden Fall auch. Die sind immer super. Also gerade die Bildgeschichten, da geht der immer echt tief rein. Genau. Und auf jeden Fall Gap Decorations können wir in Chrome benutzen.
Das ist natürlich dann erstmal nur ein Progressive Enhancement Feature vielleicht, wo man die Gaps in Chromium-basierten Browsern schöner machen kann. Aber ich glaube, das, ich kann mir gut vorstellen, dass das ein Feature ist, was auch in die anderen Browser kommt. Vielleicht auch in Interop-Beweis.
Ich würde auch sagen, dass da eine relativ hohe Wahrscheinlichkeit eines baldigen Implementierens ist, weil ich weiß nicht, wie das jetzt so bei dir in deiner Realität ist. Aber ich habe mich letztens umgeschaut und habe so gemerkt, ah, ich mache den ganzen Tag, wenn ich irgendwie die Boxen anordnen möchte, gehe ich halt ohne zu nachdenken direkt zu Grid.
Und ich weiß noch, wie ich mir das seinerzeit sehr mühsam reinziehen musste, als ich mir so gerade Flex drauf geschafft hatte. Und es war ja schon recht komplex. Also, Machen wir uns nichts vor. Float-Layout war jetzt auch nicht gerade trivial. Aber ja, also Flex und aber vor allem, also ja, genau, Grid ist auf jeden Fall nochmal ein bisschen.
Also hat schon viele Möglichkeiten, was man da machen kann und man braucht so ein bisschen, man muss so ein bisschen Muscle-Memory aufbauen durch Benutzung und dann bleiben aber trotzdem Features übrig, die man einfach trotzdem nie benutzt. Absolut. Aber das ist auch, glaube ich, okay. Also, weil man hat so seine Comfortzone, das ist schon meine Erfahrung, wo man halt quasi Native Grid spricht.
Und dann gibt es halt so den Bereich, ich weiß, dass das irgendwie gehen muss. Also sucht man eine Runde und findet dann die Lösung dafür. Und dann ist es halt noch ferner liefen. Wie, ich male mein Grid-Layout mit Ascii-Art auf, was ja eine sehr schöne Demo immer ist, aber ja selten irgendwie zum Einsatz kommt, glaube ich.
Haben wir eigentlich erwähnt, dass Flex-Rap-Balance auch kommt? Haben wir schon mal gesagt? Ich glaube nicht, weil ich würde jetzt als nächstes fragen, hey, Shep, was ist Flex-Rap-Balance? Genau, ich habe gerade geguckt. Wir haben darüber noch nicht gesprochen. Das ist im Prinzip das. Wir haben das ja bei Text-Rap, haben wir das ja auch.
Text-Rap-Balance ist ja das, was empfohlen wird, auf Headlines zu setzen. Und das funktioniert ja bis zu einer gewissen Textlänge, weil es ja für den Browser aufwendig zu berechnen ist. Und da ist es eben so, dass wenn der Browser den Text umbrechen muss, weil er eben nicht in die Box passt, dass er dann nicht einfach nur das, was zu lang ist, umbricht, sondern eben sagt, okay, ich muss umbrechen.
Dann lass mal gucken, dass ich so umbreche, dass eben beide Zeilen, die dadurch entstehen, in etwa die gleiche Länge haben. Und das sieht dann einfach besser aus. Ja, was ein Feature ist, ist irgendwie. Manchmal erzählen mir die richtigen Entwicklerinnen und Entwickler, also die richtigen, richtigen, die JavaScriptler, ja, nee, Design, das ist ja alles auch viel zu kompliziert und es ist unglaublich schwer und das stimmt alles, aber man kann mit relativ wenigen Kniffen sicherstellen, dass man ein gewisses Niveau nicht unterschreitet.
Und das ist gerade bei so Text-Webseiten, was halt so das durchschnittliche Entwickler-Blog gerne mal ist, mach halt bei der Überschrift so was an, wie halt eben, dass das balanced ist, dass die Zeilenhöhe ein bisschen geringer ist bei der Überschrift als bei dem Brottext. Ja. Ach, dann müssen wir mal den Oliver Schöndorfer nochmal einladen, der soll uns nochmal ein bisschen so coole Typografie-Sachen, so Kniffe.
Nee, nicht coole, sondern unmittelbar anwendbar. Ja, ja, klar. Du betreibst irgendwie so deinen Blog und das soll jetzt irgendwie mit einer Stunde Podcast-Förerung besser werden. Was sind so die zehn wichtigsten Dinge, die du auf jeden Fall machen musst? Go. Ja. Ja, das machen wir. Das halte ich für eine sinnvolle Übung, weil dann erzählen mir die Leute nicht mehr, dass es irgendwie unmöglich ist. Es ist halt nur schwer, aber es ist nicht unmöglich.
Ja, da gibt es ja viele so Sachen. Also dann Textrap Pretty für den, für Fließtext und dann kannst du ja auch hier bei der Hyphenation kannst du ja auch genau Genau, gibt es ja auch eine MIP-Property, deren Syntax ich vergessen habe, die kann ich aber gleich mal raussuchen. Da kannst du genau steuern, wie hyphenated wird, also dass nicht quasi pauschal.
Dass sozusagen eine Mindestlänge an Wort nach der Hyphenation übrig bleiben soll, dass das nicht so ein kleines Stümmelchen ist oder sowas. Also so ein bisschen wie Orphans und Widows in CSS für Wörter ist das eben für gehyphenate, Wortbestandteile. Das ist auch sowas, das packe ich eigentlich immer in meinen Style Sheet rein, weil es einfach voll cool ist.
Und das macht alles ein bisschen besser, ohne dass du irgendwie das Designstudium abgeschlossen haben musst. Ja, genau. Aber hey, wo wir gerade bei so Design sind, will ich nochmal kurz irgendwie verweisen auf ein Projekt, eine Parodie, die mir untergekommen ist. Eine Library namens Performative UI, die sich da beschreibt als AI Native React Components.
Und das sind dann halt React-Komponenten für die ganzen Dinger, die man halt so sieht, wenn man halt so generische AI-Company-Webseite aufmacht, weil die ja alle die gleiche visuelle Sprache sprechen und das gibt's da dann halt eben auch. Also Überschrift mit Gradient drin, läuft. Irgendein Counter, der hochzählt, läuft. Irgendein Ding, das grün blinkt und sagt, ich bin am Denken, weil ich voll KI bin, ist halt eingebaut.
Das muss man nicht mehr selber machen. Ist super. Mhm. Ja, so einfach so ein bisschen rumflexen, oder? Ja. Rumpflexerei. Rumpflexerei, die ja nur Flexerei ist, weil es nicht trivial zu machen ist mit den Mitteln, die uns CSS heutzutage gibt. Irgendwie relevant zu runden Ecken früher, als du da noch selbst eigenhändig Hacks entwickeln musstest, als das noch nicht ging.
Und irgendwann war das da und wir hatten alle 2.0 und dann war das plötzlich langweilig. Smashing Magazine wollte meinen Artikel nicht haben. Weiß ich noch. Was? Naja, so war das damals. Hyphenate-Limit-Chars heißt das. Da kannst du quasi alles einstellen. Es wird in Chrome und Firefox unterstützt. Und in Safari nicht. Was übrigens komisch ist, weil die eigentlich immer total stark sind in so Typografie-Geschichten. Also sie sind eigentlich immer vorneweg.
Aber hier irgendwie nicht. Genau, da kannst du dann drei Werte angeben. Der erste Wert ist die minimale Wortlänge, die vorliegen muss, damit überhaupt getrennt wird. Dann die zweite Zahl ist, wie viele Buchstaben müssen mindestens vor dem Bindestrich sein. Also dass das eben nicht ein zu kleiner Wortschnipsel ist. Und der dritte ist eben, wie viele Buchstaben sollen mindestens nach der Worttrennung dann noch übrig sein. Ja.
Und ich habe das hier auf 10, also erst ab 10 Buchstaben, also das ist so mein Sweet Spot, ab 10 Buchstaben soll erst überhaupt getrennt werden und dann sollen halt. Genau, entsprechend machst du dann zum Beispiel irgendwie 10, 5, 5 oder sowas. Hm. Ja. Nice. Genau. Nice, nice. Ja, und die Performative UI-Seite, die werden wir natürlich auch, verlinken. Ja, ist ja klar.
Ja, wird halt nur vorschlagen, die nicht aufzumachen, wenn man nur noch irgendwie 1% Akku hat, weil das versteht sich von selbst. Pfeift das Ding auf das letzte Loch. Genau. Eine machen wir noch. Was würdest du davon halten, wenn wir, also ich hätte Lust auf Callum-Height. Findest du das auch gut? Wunderbar. Ich habe nämlich immer noch nicht verstanden, worum das da geht. Deswegen lasse ich mich gerne erhellen. Dann gehe ich hier so ein Podcast schlauer raus, als ich reinklang bin. Ach, was rede ich?
Das ist ja eh immer der Fall. Genau, Column Hide ist auch neu in Chrome, wird das momentan unterstützt und da geht es darum, dass wenn du, sehr langen Text hast, also wirklich langen Text und du willst den in ein Multicalm Layout reinstecken, dann, hast du ja das Problem, dass auch jede dieser Spalten sehr lang wird.
Weil dein Text insgesamt einfach so lang ist und darum werden auch die Spalten entsprechend lang, und das führt dann dazu, dass du zum Lesen erstmal quasi, scrollst und scrollst und scrollst und nur die erste Spalte liest und dann wieder nach oben scrollen musst wo auch immer dann die zweite Spalte anfängt und dann wieder die liest runterscrollst, runterscrollst und so weiter und das dann eben für jede Spalte machst.
Und dieses eben immer runter und wieder raufscrollen müssen, runter und rauf, ist doof. Und deshalb kannst du eine Column-Height definieren, die dazu führt, dass dann erst mal nach dieser Höhe die zweite Spalte gefüllt wird mit Text und dann die dritte Spalte gefüllt wird mit Text und erst, wenn eben alle Spalten gefüllt sind, also es funktioniert übrigens auch nur im Zusammenhang mit, einem Column-Count, ja, Und dann, wenn eben die letzte Column gefüllt ist, dann in die nächste sozusagen Row an Columns übergeht und da dann wiederum auf gleiche Art und Weise weitermacht.
Und das hat halt zum Lesen. Das heißt, mit der Column halt gebe ich an, wie hoch die Row wird. Ja. Das macht Sinn. Dann kannst du nämlich wirklich dein Viewport an einer Stelle lassen, erst mal alle Columns dort durchlesen und dann scrollst du runter und liest dann wiederum die nächsten Columns, die da alle in der nächsten Row nebeneinander stehen.
Also so ein bisschen wie das bei Zeitungen auch ist. Ja, nur in Zeitungen scrollst du halt, also heutzutage vielleicht schon, aber normalerweise, ursprünglich waren die ja nicht als scrollbar implementiert, als sie noch auf Papier daherkamen. Nee, aber trotzdem verliert dein Auge ja irgendwann den Halt und weiß nicht mehr, wo es hin muss und da hast du das ja auch. Ja.
Genau. Ja, finde ich gut. ich finde eh CSS Multicolumn, da steckt auch noch so viel Potenzial drin, so ungehobenes Potenzial. Da kann man auf jeden Fall noch mehr machen. Und dann kann man es jetzt auch noch dekorieren, die Gaps, und da kommt auch einiges mehr. Genau. Ja. Das war doch wieder eine launige Sendung hier.
Ja, mit allen möglichen da drin, außer JavaScript. Hey. Das haben wir mal elegant umsegelt, aber ganz ehrlich, das tut ihm auch mal ganz gut. Ja, genau. Wir hatten eine Sache, aber, die ist jetzt auch nicht so oberkrachermäßig gewesen, oder? Erstens ist sie nicht oberkrachermäßig gewesen und zweitens hatten wir ja Performative UI. Das ist eine React-Library, das muss reichen an JavaScript.
Ja, genau. die gleicht das aus. Da ist mehr als genug JavaScript drin. Genau. Außerdem, wir müssen jetzt ja eh sparen an CPU-Zyklen und Arbeitsspeicher, wie wir gelernt haben. Also nutzt weniger JavaScript, mehr CSS-Wagen, mehr HTML-Wagen. Ja. Sehr gut. I like it. Gut. Cool. Dann, vielen Dank dir mal wieder.
Vielen Dank dir. Es ist mir ein Fest, wie immer. Ja, macht immer Spaß und die Browser geben uns ja da auch immer gute Schützenhilfe. Das ist ja auch immer nett. Ja, das ist bei, glaube ich, der Content Creation, mit das Wichtigste, dass du immer irgendwie da so eine Kuh hast und da kannst du daran ziehen und dann fällt da Content raus und du musst dann nur noch zwei Typen in einen Raum sperren und dann labern die ein bisschen und dann hast du was fertig.
Und zum Glück ist ja unsere Branche da sehr dankbar. Ja. Genau, wenn ihr Hörende irgendwie Feedback habt oder noch irgendwelche Anmerkungen zu Dingen, lasst es uns auf jeden Fall gerne wissen. Wie ihr diese Anmerkung loswerdet, könnt ihr auf unserer Webseite sehen. Da gibt es diverse Kanäle. Gerne natürlich in unserem Community Slack.
Und ja, ansonsten hören wir uns nächste Woche wieder. Und ich glaube, da wissen wir noch gar nicht, da wissen wir noch nicht, was da Phase ist. Aber vielleicht kriegen wir den Oliver Schönendorfer zur Typografie eingeladen. Ist dann zwar ein bisschen on short notice, aber vielleicht klappt das ja. Ja, aber die Typografen sind ja alle Enthusiasten.
Der wird dann sagen, was? Ich darf eine Stunde reden und die hören mir alle zu? Gib. Ja. Genau. Ja, das machen wir doch so. Machen wir. Alles klar. dann einen schönen Tag, schönen Abend, schönen was auch immer euch allen und dir auch viele Grüße nach Kiel und einen schönen Abend, Peter. Ja, viele Grüße nach Düsseldorf und ein Danke an die Hörerinnen und Hörer.
Lasst euch nicht runterkriegen. Bis zum nächsten Mal. Bis zum nächsten Mal. Tschüss. Tschüß!