Revision 590: State of CSS, Teil 2 von 2

Transcript

[0:00] Sag mal, Shep, ist CSS eine Programmiersprache, was meinst du?
Tja, da scheiden sich die Geister.
Deswegen frag ich. Die Frage, die ich mir jetzt stelle, ist, wie kann ich das kaputt trollen?
Ich stelle mir vor, ich baue was, was irgendwie so dann umbricht und zwei Zeilen braucht.
Aber ich mach halt ein Wort irgendwie auf Schriftgröße 9001.
Verstehst du, wie ich meine?
Ja, ich glaube, dass du das auf jeden Fall kaputt spielen kannst.
Schon toll, das Textlayout, also wirklich so die älteste Kulturtechnik.
Da war auf jeden Fall eine steinalte. Aber du kriegst es nicht hinautomatisiert.
Du kannst den Künstler nicht rausholen, weil zu kompliziert.

[0:39] Diese Revision von Working Draft wird euch präsentiert von Midwild.
Next-Level-Hosting für deine Projekte.
Ihr fragt euch bestimmt, wie kann so was Langweiliges wie Hosting next-level sein?
Ganz einfach. Midwilds hochperformantes Cloud-Hosting ist perfekt abgestimmt auf die Anforderungen von Freelancern und Agenturen.
Es gibt ein smartes Rollensystem für die Zusammenarbeit mit euren Projektpartnern.
Und Midwild hat mit M-Studio auch eine sehr schöne moderne Verwaltungsoberfläche gebaut, mit der das Arbeiten Spaß macht. Aber jetzt mal unter uns Nerds.
Sachen anklicken in einem User-Interface? Muss das sein? Nein, muss es nicht.
Denn bei Midwild gibt's die M-Studio CLI.
Mit der könnt ihr euer Hosting komplett über die Kommandozeile verwalten und natürlich auch automatisieren.
Von Nerds für Nerds bringt euch Midwild die optimale Developer-Experience, wenn's ums Hosting geht.
Und deshalb jetzt auf zu mitwald.de. Egal, ob mit Curl oder mit so nem grafischen Browser, es schreibt sich auf jeden Fall mitwald.de.
Und alle Infos zu mitwald findet ihr natürlich auch noch mal in den Show Notes zu dieser Revision.
Wir danken mitwald für die Unterstützung von dieser Revision von Working Draft.
Revision 590.

[1:53] Music.

[2:20] Wir sind heute zu zweit. Und da hätten wir einmal den Peter. Moin, moin.

Revision 590: State of CSS, Teil 2 von 2

https://workingdraft.de/590/

[2:25] Ich bin der Shep, und eigentlich hätten wir gern noch die Vanessa dabei gehabt.
Die ist leider nur ganz schön krank, denn wir wollten uns heute weiter durch den State of CSS durcharbeiten.
Das haben wir ja zuletzt mit der Vanessa gestartet. Vor, vor, vor was? Zwei Wochen? Hab schon.
Und jetzt hätten wir das gerne natürlich mit der Vanessa zu Ende gemacht, aber es hat nicht sollen sein.
Wir schaffen das aber auch. Was wir vielleicht ein bisschen ausklammern werden, sind so CSS-Frameworks und wahrscheinlich auch CSS in JS-Lösungen, weil unser beider Kompetenz da nicht besonders ausgeprägt ist.
Nee, damit haben wir nicht so viel zu tun.
Genau. Aber genau, mit dem Puren, mit dem eigentlichen CSS, da kennen wir uns schon aus.
Und wir waren zuletzt in, also steckten fest in der View-Transition-Ecke.
Und die nächste, die wir uns angucken wollten, mit der wir jetzt beginnen werden, ist Colors.
Jawohl. Was macht denn diese Color Function? Habe ich noch nie gesehen.

Color() function

[3:39] Genau, die Color Function ist im Prinzip, Dadurch, dass du jetzt ja immer mehr Farbräume nutzen kannst.
Im Prinzip ein generischer Ersatz für so Dinge wie RGB, HSL oder eben früher auch RGBA und HSLA, was ja jetzt mittlerweile in RGB und HSL hineingewandert ist.
Also die sind jetzt in der Lage, eben auch einen vierten Parameter entgegenzunehmen hinter einem Slash.
Aber damit man eben nicht für jeden Farbraum, den man jetzt einführt, Und da gibt's ja jetzt einige, gibt's ja P3, Lab, LCH, OK Lab und OK LCH, die quasi so nochmal optimierte Varianten sind.
Genau, also es kommt so ein ganzer Haufen neuer Farbräume und da müsste man entsprechende Funktionen ja haben.
Und das vermeidet man im Prinzip mit dieser Color Function, die als ersten Parameter dann den Farbraum entgegennimmt und dann die Kanalangaben sozusagen.
Das heißt, diese ganzen HSLs und ähnlichen sind dann sozusagen Spezialisierungen von der Color Function.
Das ist sozusagen der allgemeinere Unterbau.

[4:51] Ja. Okay. Jetzt musst du mich mal noch use case mäßig davon überzeugen.
Warum will ich das haben? Also, weil so den Pitch von HSL, den kann ich nur nachvollziehen im Vergleich zu RGB, weil RGB ist Computersprecher, HSL ist mehr so Menschensprech.
Da kann man so eine Anweisung, die machen wir ein bisschen heller, auch in einer Welt, in der das nicht in jede IDI eingebaut ist, dass da sofort ein Farbblick hochkommt.
Aber dann kann man das eben so tweaken.

[5:19] Dafür brauch ich den ganzen Rest. RGB und HSL arbeiten auf ...
Oder sind einfach nur verschiedene Repräsentationen des gleichen Farbraums.
Das eine ist eher so würfelförmig, das andere mehr wie so ein Zylinder.
Ein Farbraum ist jetzt was genau.

[5:38] Ein Farbraum ist sozusagen die Menge Farben, die beschrieben werden können, oder die in diesem Farbraum sozusagen beschrieben werden können.
Und RGB ist im Prinzip eine Art, diese Farben zu picken aus diesem Farbraum, und HSL ist eine andere.
Das ist irgendwie so ein geometrisches, mathematisches Ding, ne?
Ja, genau. Und wo man das merken kann, ist, wenn man zum Beispiel ein Linear Gradient macht, und man macht den gleichen Gradient, oder es gibt bestimmte Gradienten, die, wenn du sie in RGB-Farben angibst, hässlich aussehen, und wenn du sie in HSL angibst, dann sehen sie besser aus.
Weil auch der Weg zwischen den beiden Farben im Prinzip in dieser räumlichen Repräsentation berechnet wird, die du da gewählt hast.
Okay, und je nach Repräsentation hat man da sozusagen mathematisch mehr Abstufungen, zum Beispiel.

[6:42] Zum Beispiel, genau, oder was man ja auch oft kennt aus den Colour Pickern ist, dass die gesättigten Farben an den Rändern sind und in der Mitte hast du dann Weiß oder das Ungesättigste sozusagen.
Und stell dir vor, du würdest eine gerade Linie ziehen von der einen Ecke zur gegenüberliegenden Ecke, weil du diese von der einen Farbe zur anderen weich überblenden willst.
Dann, wenn du im falschen Farbraum bist, geht halt quasi deine Überblendung durch diesen ungesättigten Bereich durch.
Dann ist also dein Linear Gradient in der Mitte sieht halt einfach nur total hässlich aus.

[7:18] Ah, ja, ja, okay, stimmt. Das macht extrem viel Sinn. Genau, und das ist da der Unterschied.
Und dann gibt's eben neue Farbräume, die mehr Farben können.
Also sozusagen, ja, das nennen die halt Wide Garment oder vielleicht auch High Dynamic Range, wobei das manchmal ja auch Bezug nimmt, einfach nur auf die Helligkeit, die möglich, die abbildbar ist. Genau, und innerhalb dieser neuen Farbräume, die halt noch sattere Farben darstellen können, sofern man entsprechende Hardware auch hat, die das kann, da kann man dann auch so analoge Farbräume oder Repräsentationen nutzen, wie RGB und HSL es sind.
Genau, und ich glaube, Lab oder OK Lab sind im Prinzip sowas wie RGB und LCH und OK LCH, die sind analog zu HSL. Also leichter für uns Menschen eben zum Beispiel Farbtöne.
Zu entsättigen oder satter zu machen oder eben die helligkeit zu regeln.

[8:30] Okay, ich verstehe mit dem wissen, dass ich jetzt habe nach dieser nach der nach deiner erklärung, Wie wie bringe ich das jetzt zu sagen auf die straße? Also, wie werde ich das an? Ich mache irgendwie gradient und der sieht doof aus und dann probiere ich, Farbräume durch bis gut aussieht oder wie würdest du sozusagen, Also was machst du mit dem ganzen zeug, dass wir jetzt da haben?
Ja, naja, was du halt erst mal machen kannst, ist, dass du auf die neuen Farbräume umsteigst, um vielleicht Farben zum einen noch knackiger zu bekommen.

[9:02] Und es gibt auch so Farben, die in RGB zum Beispiel einfach nicht gut genug abgebildet werden können.
Ich glaube, grün ist so eine Farbe.
Das heißt, RGB hat halt einfach wenig Bit fürs Grün, und darum sieht Grün eigentlich immer nicht so cool aus wie die anderen Farben.
Und das kannst du eben verbessern, wenn du einen Wide-Gamut-Farbraum nimmst, der eben einfach mehr Luft hat, um Farben zu repräsentieren.
Okay. Genau, und was die Linear Gradients angeht, Und da springen wir einfach mal zu dem letzten Eintrag,

Interpolation Colorspaces

[9:45] den wir hier bei Color haben. Das ist nämlich Interpolation Color Spaces.
Und da kannst du dediziert sagen, in welchem Farbraum der Browser arbeiten soll, um zwischen zwei Farbtönen zu interpolieren.

[10:00] Und genau, das könnten zwei RGB-Farben sein, aber du kannst halt sagen, aber zum Interpolieren Dieser zwei RGB Farben, da nimmst du jetzt bitte OK LCH zum Beispiel.

[10:14] Ah, okay, also ich gebe immer noch in irgendwie meinem RGB oder so sozusagen die Colour Stops an, aber sag ihm, zum Interpolieren nimmst du was anderes?
Ja, genau. Oder es gibt auch so die Möglichkeit, ich glaub, hier bei Relative Colours müsstest du sein.
Das ist auch hier so ein Punkt. Also du hast Funktionen, ich weiß nicht mehr genau, welche das sind, aber wo du quasi zwei Farben auch tatsächlich mischen kannst oder Komponenten von zwei Farben miteinander mischen kannst.
Und da, um quasi eine neue Farbe zu erzeugen, und da könntest du das auch benutzen.

[10:48] Mhm. Und vielleicht noch ein Aspekt zu diesen Lab- und LCH-Farben.
Die können nicht nur mehr Farben abbilden, die sind auch so ein bisschen wie MP3 nach dem ...
MP3 ist ja so quasi wie du hörst, modelliert. Also, die komprimieren halt die Sachen weg, die dein Ohr sowieso nicht mitbekommt und erhalten eben bewusst die, die du sofort sehen würdest, auch wie JPEG ja auch.
Also da ist es ja so, dass man quasi Helligkeit oder Kontrast, das ist das, was dein Auge am besten sehen kann. Und bei den Farben, da kann man so ein bisschen pfuschen, da kann man irgendwie nur jeden zweiten Pixel einfärben korrekt.
Und das kriegst du dann aber nicht mit, weil mit deinem Schwarz-Weiß-Bild zusammen ergibt das für dich irgendwie ein schlüssiges Ganzes.
Und diese neuen Farbräume, die sind auch so ein bisschen nach unserem Sehverhalten oder nach unseren Augen modelliert.

[11:47] Nämlich so, dass wenn du ein Blau und ein Rot und vielleicht ein Gelb nebeneinander hättest, die beide den gleichen Brightness-Wert hätten, also du quasi den gleichen Brightness-Wert gesetzt hättest in deiner Programmierung, dann wären die tatsächlich auch Dein Eindruck dieser Farben wäre so, dass sie alle ungefähr gleich hell sind.
Und das ist ja bei RGB und HSL eben nicht der Fall.
Nee, doll nicht. Genau, dann gibt es einfach Farben, die irgendwie immer sehr hell wirken und andere, die tendenziell eher immer ein bisschen dunkel wirken.
Hm.

[12:27] Ja. Okay. Auf jeden Fall cool.
Nutzen würde ich's. Ich würde gerne mal damit rumspielen. Problem ist, ich habe einfach keine Hardware, die das darstellt.
Ähm, ich müsste mir einen neuen Monitor holen, der das könnte.
Also, wobei, was ich halt nutzen kann, ist natürlich so Interpolation Color Spaces. Sowas.
Ich wollte's grad sagen. Also, weil ich meine, Ich hab einen Artikel hier ausgegraben von CSS-Tricks, wo auch erklärt wird, die gray dead zone von den Gradients, was ja das ist, was du vorhin erzählt hattest, wo die Gradientlinie dadurch geht, wo halt doof aussieht.
Davon könnte man ja schon profitieren, indem man einfach eine andere Geometrie wählt.
Ja, das stimmt.

[13:14] Ja, genau. Okay, weil das beantwortet nämlich auch die Frage, ob man da wirklich was von hat oder ob das wirklich nur die Leute mit den fenzigsten aller Devices ...
Die da was davon haben, und das scheint ja nicht der Fall zu sein.
Ja. Ich hatte auch mal mich ausgetauscht mit der Jen Simmons auf Mastodon, und die meinte, dass man in Safari auch simulieren kann, also, wer mit diesen Farben irgendwie rumspielt, dass man simulieren kann, wie die Seite aussieht, wenn man keinen High Dynamic Range Wide Gamut Monitor hat.
Und dennoch quasi diese Seite dann auf einen SDR-Monitor trifft, auf einen normal funktionierenden Monitor, dann kann man das eben, wenn man so einen Monitor selber nicht hat, sondern nur so einen supercoolen, dann kann man das wohl auch in den Safari-Dev-Tools simulieren.
Aha, aber dazu müsstest du erstens so einen haben und dich dann noch um die Nomis scheren. Ja, korrekt.
Hm, na gut, mag's ja geben.

[14:20] So, was haben wir denn noch? Wir haben hier noch die Relative Colors, die auf der Liste stehen.

Relative Colors

[14:27] Was machen die? Ich kann es mir denken.
Ich glaube, dass die Relative Colors, die, da kannst du quasi eben von einer Farbe kannst du, du kannst die sozusagen aufbrechen.
Also kannst du neue Farben erzeugen auf Basis einer vorhandenen Farbe, Indem du die Einzelteile aufbrichst und dann nur bestimmte Teile dieser Farben verwendest.

[14:58] Also eine gegebene Farbe nehmen und dann, keine Ahnung, bei HSL die Sättigung hochdrehen, obwohl mir das Ding gar nicht als irgendwie HSL-Wert vorliegt, wo ich direkt auf die Farben Zugriff habe, Das ist irgendwie eine CSS-Variable.
Ich kann trotzdem sagen, aus der CSS-Variable, die nehmen Untersättigkeit trotzdem noch 10 Prozent hoch.
Genau, also so eine Art Destructuring für Farben, wo du dann einzelne Werte eben übernehmen kannst in deiner neuen Farbe und andere vielleicht überhaupt nicht übernimmst oder eben modifiziert übernimmst.

[15:31] Genau, auch ziemlich praktisch, wenn man irgendwie so ein, ja, also Color Swatches für sein Designsystem bauen möchte oder vielleicht irgendwie so das, was man in SSS mit diesem Transparent Highs benutzt.
Also, wo man bestimmte Farben nimmt und dann transparente Versionen von denen ableitet.
Mhm.
Genau. Ja, das macht schon Sinn, dass es das gibt.

Ist CSS eine Programmiersprache?

[15:59] Sag mal, Chef. Mhm? Ist CSS eine Programmiersprache, was meinst du?
Nein! Natürlich nicht, Peter.
Nein. Tja, da scheiden sich die Geister. Deswegen frage ich.
Genau, also irgendeinen Test gab's letztens, der irgendwie bewiesen hat, dass CSS doch eine Programmiersprache ist.
Wie kann man das denn beweisen? Ich weiß es auch nicht mehr.
Kann man einen Turing-Test komplett irgendwie mit CSS machen? Weiß ich nicht.
Ja, aber das besteht vieles, und dann würde man ja sagen, Brainfuck ist eine Programmiersprache, was jetzt irgendwie offensichtlich korrekt zu sein scheint.
Aber ich würd mal behaupten, wenn sich's als Programmiersprache darstellt, aber niemand benutzt es als so was, sondern nur als Scherz, dann hat ja da die normative Kraft des Faktischen auch ein bisschen was zu melden.
Also, mit der Erklärung würde ich sagen ...
Keine mathematischen Sachen. Mit der Erklärung ist CSS vielleicht keine Programmiersprache.

[17:00] Also trotz das ja auch sowas wie. Du kannst ja im Prinzip so if else Sachen kannst du auch faken oder implementieren. Das geht ja alles.
Oder trigonometrische Funktionen gibt's ja auch.
Aber es ist ja nicht mein einfach so die User Experience. Also wenn ich mir jetzt gerade mal hier so diese relative, Color Syntax angucke, dann deklariere ich dahin irgendwie So Zeug bei dem Background Color ist jetzt dieser HSL-Wert.
Und das ist ja eine Funktion, HSL. Das ist ja mit drei Parametern oder vier Parametern versehene Funktion.
Dann stecke ich da rein eine andere, das Ergebnis einer anderen Funktion, von einer var-Funktion, wo dann auch irgendwelche Parameter reinkommen.
Also, ich schwöpsel ja Funktionen zusammen. Das ist ja tatsächlich schon, kommt dem ja schon relativ nahe.
Gerade wenn du es vergleichst mit irgendwie sowas wie einem Excel-Spreadsheet, wo ich ja sagen würde, das kommt ja auch dem Programmieren schon extrem nahe, was da drin vor sich geht.
Und hat eine ganz andere User-Experience als jetzt CSS. Da würde ich ja da eher so nahe rücken. Ja.

[18:04] Tja, ich finde, es ist auf jeden Fall nicht trivial. Und man kann super viel machen.
Am Ende ist es wohl egal, ob es eine Programmiersprache ist oder nicht.
Es ist halt einfach komplex, ne?
Man kann auch viele Dinge damit machen, vor allem, wenn man kreativ ist. Ja.
Ich denke, auch die Frage ist eigentlich ziemlicher Käse, aber ich dachte, ich stelle sie mal trotzdem.
Das sprang mich halt so an, dass das wirklich so ein Teil ist, von wegen, okay, da musst du mental die ganzen Funktionsausrufe nachvollziehen.
Ja. Am Ende weht, interessiert's.
Am Ende weht, interessiert's, ja. Ja, die grausigen Gatekeeper natürlich.
Genau. Naja, es gibt ja auch dieses ...
Quasi diesen ... Irgendwer hat das mal gesagt, CSS ist einerseits ...
Zu trivial, als dass die Leute sich damit befassen wollen und das als quasi Programmiersprache ansehen.
Genauso wie HTML übrigens.
Aber andererseits ist ihnen CSS viel zu kompliziert, und sie kriegen's halt nicht in den Griff und hassen's deswegen.
Also, es ist so, beides ist gleichzeitig. Es ist irgendwie ...
Es ist keine richtige Programmiersprache, darum irgendwie nix Vernünftiges und andererseits ist es aber zu kompliziert und darum auch nichts Vernünftiges.

[19:28] Ja, mein Gegenbeispiel wären so diverse PHP-Jockeys in wirklich Läden, die ich so gesehen habe.
Also PHP ist ja mittlerweile wirklich eine sehr, sehr schöne Programmiersprache, da bin ich ja der Erste, der das sagt, nachdem ich ja letztens, wie gesagt, auf Lacherwelle getreten bin und so dachte, ah, guck mal, ich schreibe drei Zeilen, dann habe ich eine Web-App, ist ja super.
Aber manche sagen, wir betreiben ja wirklich den grausigsten Code in Anführungszeichen richtigen Programmiersprachen.
Ja, geht schon. Ja, aber trotzdem, ich meine, das kann es ja irgendwie nicht sein, also das als nicht richtig verstehen. Also ich glaube, das erklärt das nicht ausreichend. Also vor allen Dingen, dass CSS nicht trivial ist, ist ja einfach jedem offensichtlich, der einfach nur in seiner ITI mal einen Buchstaben drückt, und dann Autokompetition.

[20:14] Also du siehst ja, dass das nicht trivial ist, dass das nicht simpel sein kann.
Ich glaube, es sind ja auch mittlerweile irgendwie 500 Eigenschaften, die man im Kopf halten muss oder könnte.
Es ist wahrscheinlich wesentlich mehr. Also ich habe, als ich letztes Mal gezählt habe und das ist Jahre her, war es wahrscheinlich auch schon was so in der Richtung.
Aber es sind ja Eigenschaften und du hast noch Add Property und Selektoren und Media Queries und was nicht alles.
Also Eigenschaften ist ja auch eine sehr fragwürdige Metrik.
Und Funktionen, ja. Ja, eben, genau.
Farbräume, also das Ganze, was sozusagen da somit dazugehört. Ja.

[20:49] Ja. Also ... Puh, keine Ahnung, was das ist. Ich glaub, irgendwie, das ist immer noch ...
Das sind vor allen Dingen irgendwelche Typen, die meinen, dieses ganze Grafikzeug ist ein weibischer Schrott, und damit hab ich mich nicht zu befassen.
Das ist meine Theorie, warum das keiner verfolgt. Na ja, es ist halt auch ...
Also, wenn man was schlecht redet, besteht eben ja auch keine Notwendigkeit, sich damit beschäftigen zu müssen, ne?
Das ist natürlich auch der Vorteil davon. Also, wenn du sagst so was wie, keine Ahnung, früher so, ah, Flash ist scheiße.
Und deswegen werd ich das auch nie lernen. So, und mit dieser Entscheidung kann ich gut leben, weil Flash ja scheiße ist.
Aber vielleicht war Flash ja auch so an bestimmten Belangen nicht so schlecht.
Also vielleicht ist das genau so ein Werkzeug im Baukasten gewesen früher, also jetzt ja nicht mehr, weil wird ja nirgends wo mehr unterstützt, wie SVG oder MathML oder keine Ahnung was, JavaScript.

[21:52] Ja, ich glaub, bei Flash hast du noch mehr so einen kollabierenden Faktor dabei, weil das ist ja auch, Flash würde ich ja eher als Hydra bezeichnen, weil es ist ja einerseits der Output, der am Ende in der Webseite eingebunden ist, aber ja auch die ganze Authoring Experience mit irgendwie dem eigenen ECMA-Skript-Dialekt und dem ganzen Tooling da drumherum.
Weil das ist ja generell das, wenn ich mich so durch die Kommentare im Internet lese, das ist ja das, was die Leute vermissen vor allen Dingen.
Dass du ja so relativ niederschwellig für Leute halt auch die Möglichkeit hast, wie ein Flash-Game oder ein lustiges Filmchen oder so, zusammenzuklicken, räudig zusammenzuskripten, das kannst du ja heute kaum noch machen.
Also, theoretisch könntest du mit JavaScript und CSS ein paar Diffs durch die Gegend fliegen lassen, aber das kommt dem ja von der Einfachheit her nicht im Ansatz so nah.
Du hast ja immer noch ... Es gibt ja Flash immer noch als Authoring-Werkzeug.
Und da kommt ja jetzt raus SVG oder Canvas wahlweise.
Ich glaube, HTML nicht.
Ähm ... Aber, also, der Output oder die Darreichungsform hat sich einfach verändert.

[22:58] Ja. Ich glaub, das waren halt einfach so die bestimmten Unzulänglichkeiten von Flash, wie es ist eben vielleicht nicht accessible aus verschiedenen Gründen.
Aber man hätte ja auch hin- Diese Webseiten auch nicht kommen.
Ja, genau. Also, man kann ja auch hingehen und sagen, okay, dann bin ich halt die Person, die Flash lernt und das mal irgendwie richtig macht und allen zeigt, wie man das machen muss.
Ich mach mal schöne Tutorials oder so.
Aber das haben halt die wenigsten gemacht, weil es eben auch einfacher ist, einfach das vom Fleck weg zu verdammen sozusagen.
Und auch jeden anders zu nehmen. Sowas wie, oh cool, da ist wieder eine Sicherheitslücke in Flash.
Hahaha, das ist total mies. Flash ist total doof.
Gut, dass ich das nicht lerne.

[23:48] Ja, und gut, dass mein Webbrowser keine Sicherheitslücken hat.
Niemals. Ja, ja, genau. Ja, damals in der Zeit noch mit IE.
Genau. Also, ich glaube, dass das so ... dass das möglicherweise so ähnlich gelagerte Ursachen hat, dass man einfach sich das argumentativ so zurechtlegt, um eben kein schlechtes Gewissen zu haben oder irgendwie keinen Druck zu verspüren.
Das lernen zu müssen.
Ja. Du kommst ja auch relativ weit, wenn du es nicht weißt. Weil du kannst ja immer noch den Selector länger machen und ein Import und hinten dran klatschen. Es funktioniert ja auch für gewisse Werte schon funktionieren.
Ja. Aber ich meine, wie repariert man das? Weil wenn du mich jetzt fragst, was das größte Problem an CSS ist, dann würde ich sagen, die größten Probleme sitzen vor den Monitoren.
Und nicht, dass da irgendwelche Features fehlen. Nee, aber ist das nicht vielleicht bei allen Programmier-Umgebungen vielleicht ähnlich gelagert?

[24:52] Weiß nicht. Die Frage ist ja immer, ob es ein Problembewusstsein gibt.
Also noch nie ist irgendwer zu mir gekommen und hat gesagt, Hilfe, Hilfe, meine Codebase ist außer Kontrolle, rette uns mal der Terror.
Und hat damit CSS gemeint.
Die kommen immer zu mir, obwohl mich ja einige da draußen immer noch für jemanden halten, der CSS...
Manchmal fragen sich die Leute auch irgendwie noch so, na hier, wie heißt denn das, XSLT und so Zeug, wo ich keine Ahnung von habe, aber das weiß man ja nicht.
Das müsste einfach durch Zufall schon mal jemand kommen und irgendwie sagen, hilf uns mal mit CSS, die sagen immer, unser JavaScript ist ein Eimer, dann denke ich so, okay, das ist ein bisschen altbacken, aber das ist doch völlig in Ordnung, was ist denn eigentlich mit der Index-CSS? Oh mein Gott!
Ja, ja, ja, genau. Ähm, ja, das ist irgendwie, da verortet man halt Probleme nicht, ne, das ist ja auch, ich weiß auch nicht, ob man das, vielleicht liegt's auch daran, dass die Probleme, die man da drin hat.

[25:44] Also zum einen nicht so offenbar werden, und man ja auch so leichter eine Strategie findet, die nämlich lautet, ich häng alles unten weiter dran und mach einfach immer ...
Schlag immer mit einer dickeren Spezifitätskeule drauf. Da lernt man zu leben damit.
Auf die Art und Weise. Und man weiß, vielleicht in zehn Jahren machen wir einen Relaunch, und dann müssen wir uns auch mal um das Thema CSS noch mal kümmern, und vielleicht kriegen wir's dann ja hin. Ich glaub nicht, dass das das Problem beschreibt so richtig.
Weil das scheint mir ja mehr so was von zu sein wie, eine bessere Welt ist ja gar nicht vorstellbar, als eine ich-hänge-hinten-was-dann-und-machen-important-Hinter.

[26:24] Die Annahme scheint ja zu sein, das ist der Zustand, wie er sein soll.
Während meine Java-Klasse ist irgendwie leicht zu optimal, sag uns mal, wie man die besser machen kann.
Da ist man ja immer auf der Suche nach einer besseren Lösung.
Und dem besseren Tool, dem besseren Ansatz. Und nimmt man jetzt dieses, jenes, solches Paradigma.
Und die einzigen Sachen, die jetzt so bei CSS tatsächlich irgendwie so ein bisschen so, Traktion bekommen. Da ist irgendwie so Mindshare und der sagte, das ist gut.
Das sind in meinen Augen immer so Dinge, die würde ich jetzt mehr so als so...

[26:54] CSS-Vermeidung, so Tailwind-CSS-mäßig einordnen. Mhm. Also, weil, ne?
Kann man jetzt überschreiten, ob das jetzt CSS ist oder nicht, aber der wichtigste Feature scheint mir vielen zu sein, ich muss halt nicht eine CSS-Datei aufmachen.

[27:10] Sondern ich komponiere mir das auf eine andere Art und Weise zusammen und bin damit happy.
Ja, du musst halt auch keine Spezifitätskriege führen. Und du weißt auch, was auch ein großer Vorteil von Tailwind ist, Du weißt, dass das, was du gerade an Styling hinzufügst, eben, dass du da mit dem Hintern nicht woanders Komponenten einreißt.
Da fehlt's auch einfach so ein bisschen. Also, es gibt ja Tools, um auch Layout zu testen.
Und ihr habt ja auch mal so an einem Projekt gearbeitet, wo ihr das machen wolltet.
Aber es ist halt alles irgendwie nicht so leicht wie vielleicht Unitests schreiben oder so.
Das ist richtig, aber normalerweise würde ich sagen, das ist doch genau das Ding, wo der gemeine Nerd sagt, ah, eine elendige Herausforderung angesichts maximaler Gegenwehr.
Das nehm ich mir doch jetzt mal vor, da fuchse ich mich rein.
Da häng ich jetzt mal mein billiges JavaScript, wo ich den ganzen Tag React-Komponenten runterschreibe wie so ein Automat, das häng ich jetzt an den Nagel und ich werde jetzt ein CSS-Nerd, das seh ich nicht.
Nee, also es ist schon eine kleine Community, die css fans sage ich jetzt mal die sich da auch irgendwie immer wieder gedanken machen wie kann ich irgendwie wie kann ich was entwickeln das skaliert und so wie wie gehe ich daran architektonisch warum warum ich verstehe das nicht weil ich weiß wenn du dir anschaust wie viele leute sich über typescript irgendwie begeistern.

[28:36] Also da gibt's halt die Leute, die TypeScript schreiben, es gibt die, die JavaScript schreiben.
Und ich würde behaupten, von denen, die eine Frontend-App bauen, sind einige von TypeScript betroffen, andere von JavaScript betroffen.
Aber ich kann dir zwei Technologien sagen, die sie beide betreffen.

[28:52] Und das sind HTML und CSS.
Und warum man ersteres noch ein bisschen beiseite schiebt, weil dann machen wir eh alles mit DIVs neu, okay, logisch.
Aber warum halt eben CSS diese komplette Verachtung entgegenfährt, obwohl das halt jeden betrifft?
Keine Ahnung. Das wird ein Geheimnis bleiben. Müsstest du am besten mal nachfragen, oder?
Also, der du ja in so Codebases reinschaust, und da kannst du ja sozusagen mal ganz dezent unterhand mal fragen, wie so deren Einstellung zu CSS ist.
Die Einstellung ist meistens ... Ich war das meistens bei riesigen Unternehmen.
Meistens ist keiner zuständig dafür. Mhm.
Du hast den Architekten fürs Frontend, du hast irgendwie die Backend-Crew und da gibt's halt irgendwie den Senior Master Architekt und so.
Und CSS muss halt irgendwie da die Praktikantin schreiben, wenn sie nicht bei drei offen Bäumen ist.
Aber das ist ja auch keine Erklärung, sondern ist ja auch nur eine Beschreibung, im Prinzip ein Ausfluss des Zustandes, den ich grade beschrieben habe. Irgendwo kommt das ja her.
Mhm. Na ja, in Grundumführung, da hast du ja dann so deine UI-UX-Teams, die dann gegebenenfalls auch ...

[30:03] Also, ich weiß zum Beispiel hier bei Trivago war das so, dass die eben Leute hatten, deren Aufgabe war eben sozusagen dieses ganze HTML und CSS.
Zu hegen zu pflegen zu kneten und beisammen zu halten und die waren.

[30:22] Sollten auch immer ist glaube ich nicht immer passiert, aber die sollten eben bei allen sozusagen neuen Entwicklungen mussten die auch dann an Bord geholt werden und einmal drüber schauen.
Haben aber eben also haben aber auch natürlich ganz viel zu Komponenten fertige geliefert.
Sodass eben die Nicht-Uiler gar nicht erst in Verlegenheit kamen, so viel HTML und CSS schreiben zu müssen.
Aber du hast dann eben eine Instanz in der Firma, die sich darum kümmert.
Und das hast du halt in jeder Firma, was das Java-Backend angeht.
Du hast irgendwie die Leute, die eher in-house JavaScript-Framework maintainen, die gibt's halt immer, und die gibt's bei CSS halt bei wenigen Ausnahmen.
Wenn du da beim durchschnittlichen Mittelständler einreitest bei irgendeiner Versicherung oder so, kann ich dir sagen, das sind lauter irgendwie Entwickler mit unterschiedlichsten Rollen, aber da ist keiner für CSS zuständig und dann passiert das halt eben und, das ist einfach nirgendwo auf den Trichter, jemand auf den Trichter kommt, dass man da was dran tun kann. Ist nicht so eine bessere Welt? Ja, das ist halt der Punkt, wo ich mich halt störe. Gibt ja nicht mein Problembewusstsein, sondern da hinten ist halt die Index CSS und die ist doof und wenn was kaputt geht, schreiben wir halt hinten noch mehr dran und das ist der akzeptierte Normalzustand.
Aber ich check das nicht, weil du ja auch, sagen wir mal, du hast ja so Sachen gesagt wie Spezifizitätskrieg und so.
Du kannst jedem irgendwie BAM in fünf Minuten erklären und das löst 80 Prozent des Problems.

[31:46] Ja, also vielleicht muss man so gesehen dann ja auch froh sein, dass die Leute Tailwind benutzen. Also, ähm, weil ...
Also, auch wenn man BAM relativ leicht erklären kann, finde ich, dass das oft auch gar nicht so ...
Äh, also so gut eingesetzt wird. Also, oder korrekt.
Also, es sind immer so BAM-Ansätze, und dann, ah, shit, jetzt ist aber hier an der Stelle wieder ...
Das war jetzt wieder nicht so gut. Habt ihr wieder Elementselektoren benutzt oder was weiß ich was.
Ja, okay, aber guck mal, BAM ist jetzt sozusagen im Vergleich zu, du musst jetzt deinen ganzen Code nicht aus einer einzigen großen Weilschleife mit Go-Tos machen.
Sondern eine strukturiertere Welt ist vorstellbar, in dem du halt irgendwie EFLs und Funktionen baust.
Das ist so meine Analogie, CSS Append Only versus BAM. Dass man einfach nur so sieht, aha, guck mal, da geht was.
Und dann kann man ja darauf aufbauen. Ja, könnte man machen.
Und das check ich halt nicht.
In ihren grausigsten, einfach irgendwie passierten DSLs sehen die Entwicklerinnen und Entwickler immer noch die Möglichkeit, das kann besser sein, und wenn ich Zeit hätte, wüsste ich, wie ich's machen würde.
Und da hinten ist die Index-CSS, da hänge ich halt manchmal was hinten dran.
Das ist, was mich irritiert. Keine Ahnung. Ja.

[33:09] Vielleicht haben unsere Hörerinnen und Hörer da auch Meinungen zu.
Wahrscheinlich so abschließen lässt sich das gar nicht sagen, aber wenn ihr da eine Meinung habt, warum das so ist, dann packt die doch bei uns in den Community-Draft Slack.
Hinein also ich kann mir vorstellen dass bei den leuten die da sind dürfte das also rege beteiligung auslösen so.

[33:36] Ich wäre auf jeden fall sehr interessiert.
Du scheinst auch sehr interessiert zu sein in accent color das hast du mich gerade noch hier reingeschmuggelt wie ich gesehen habe.

Accent-color

[33:45] Ja, das will ich nur empfehlen.
Also, ich mach ja ganz gerne mal so ein HTML-Interface für irgendwie so einfach ein privates Tool.
Und wenn man einfach nur will, dass es weniger augenkrebsig aussieht, ist so eine Action-Color, die man vergibt, ganz nett.
Willst du noch mal kurz sagen, was die macht? Oder dieses ... eine Property, ne?
Genau, ist eine Property, die kann man vergeben.
Und dann kann man im Prinzip eine Farbe wählen, die dann im UI verwendet wird für diverse Zwecke, wie zum Beispiel Hintergrund von einer angehakten Checkbox und so.

[34:15] Wo ansonsten irgendwie ein Systemdefault oder sowas herkommt.
Und das ist einfach so ein billiges Ding im Sinne von so einer 80-20-Geschichte.
Mein User Interface sieht nicht toll aus. Das soll's auch nicht. Das wird's auch nicht.
Es lohnt sich nicht, da große Energie reinzustecken.
Aber wo man halt eben so Dinge macht wie den Zeilenabstand justieren und eine andere Schriftart wählen als Times New Roman.
So im Rahmen von solchen Maßnahmen würde ich halt eine Accent Color immer auch setzen.
Ist einfach ein sehr billiges, nicht störendes Werkzeug, um es halt gleich ein bisschen netter zu machen.
Ich hab die noch nicht reingesetzt, tatsächlich. Also, aber das liegt daran, dass ich in so einer Komponentenbibliothek arbeite, wo halt alles durchgestylt ist, und dann brauche ich das nicht.
Deswegen meine naive Frage an dich, das setzt man dann auf das Root-Element?
Oder, ja, und dann vererbt sich das runter auf alle Inputs und Interfaces?
Genau, das heißt, man kann's auch dann wieder mit, ähm, na, entsprechenden Unset Values wieder zurücksetzen.
Mhm. Wenn man halt wirklich dann auch seine gestylten Komponenten hat.

[35:19] Die dann irgendwie da im ... ja, im ersten Stand bleiben sollen.
Okay. Ja. Ja, cool. Ja, vielleicht kann ich's auch noch mal irgendwo einsetzen.
Laut der Umfrage kennen das nicht viele.
Ja, komisch. Also, das war ja schon so ...
Haben sich schon viele damals drüber gefreut, als das kam.
War auch mein Eindruck. Ich bin etwas erstaunt darüber, dass das keiner weiß, und deswegen dachte ich, schieb ich noch diesen Werbeblock hier ein.
Ja, cool. Genau, dann sind wir mit den Colors durch. Und hätten als nächstes Chapter Interactions.

Chapter Interactions

[35:52] Oder Interactions. Und genau, das ist halt im Grunde ... Im Grunde ist das alles Scroll-Krempel, den wir uns hier rausgefischt haben.
Mhm.
Scroll-Snapping ist jetzt hier der erste Punkt.
Finde ich großartig benutze ich überall. Da musst du mir das erklären weil ich habe noch nie benutzt ich habe nur ich gehöre hier in die Kategorie 28% ich habe eine Ahnung was es ist aber benutzt habe ich es noch nicht.
Okay genau also das.
Das gibt's schon ziemlich lange, das Feature, das eingeführt hat das der IE10 damals.
Das war ja hier so im Zuge dessen, dass du für Windows, für dieses Metro-UI, konntest du dann ja auch mit Webtechnologien Interfaces bauen.

[36:40] Und dann brauchten die eben einfach so bestimmte Styling-Primitive, wie zum Beispiel Grid und Flex und so.
Das haben die damals alles schon quasi geschippt.
Und eben auch Scroll-Snapping. Und da geht's im Prinzip darum, dass du, wenn du vielleicht einen Scroller hast, mit darin irgendwie Bildern, die nebeneinander sind, also sagen wir mal, dass eine UL, die auf Display Flex gesetzt ist, ohne Wrapping, dann reihen sich ja die ganzen Bilder so horizontal aneinander.
Und dann kannst du eben das UL in der Breite begrenzen, scrollbar machen und kannst dann Scroll Snapping sowohl auf den Container aktivieren als auch auf den einzelnen Bildern.
Und dann sagst du, der Scroller soll quasi snappen oder in den Scroller soll immer eingeschnappt werden, wahlweise wenn ein Snap Target, was jetzt zum Beispiel ein Bild wäre, nah an der Kante ist und nur dann oder mandatory.
Also dass quasi immer irgendwas geschnappt, eingeschnappt werden muss.
Und genau den Bildern, denen gibst du wiederum den Gegenpart.
Da sagst du, du schnappst und wenn du irgendwann, wenn du in deinem Eltern also in dem Scrollsnap Container einschnappst.

[38:10] Schnappst du jetzt quasi an der am Start, also an der linken Kante oder an der rechten Kante ein, oder in der Mitte.

[38:20] Genau, und dann hast du noch so weitere Properties, die du nutzen kannst, wie zum Beispiel Scroll Snap Always.
Also, wenn jemand durch diesen Scroller durchgeht, dass ein Bild dann zum Beispiel nicht, einfach so durch genug Schwung überscrollt werden kann.
Also, dann sorgt das immer dafür, dass es, bevor es verschwindet, zwangseinschnappt, damit man das eben nicht überscrollen kann aus Versehen.
Und dann gibt's noch so Dinge, die da auch reinspielen, das ist Scroll Margin und Scroll Padding, die diese Einschnapppunkte sozusagen ein bisschen verschieben.
Analog dazu, wie man eben Margin und Padding auch so kennt im Layout.
Es gibt hier bei MDN eine sehr schöne interaktive Demo, wo man so die diversen Features auch aktivieren kann mit Checkboxen und Slidern und ähnlichem.

[39:20] Aber ja, ich kann verstehen, dass das ein sehr gutes Feature ist, weil das mit JavaScript nachzubauen, ist wahrscheinlich einfach nur die pure Hölle.
Ja, genau. Also, das ist so einer dieser Dinge ... Ich glaub, ich hab einmal so einen einschnappenden Slider gebaut.
Also selber. Und ansonsten immer Libraries benutzt, wie hier Flexslider. Und ...
Gab noch einen anderen, der relativ bekannt war.
Genau, aber die hatten natürlich auch alle so ein bisschen ein Problem, wenn die einmal gesetupt waren und du hast vielleicht, du hast einen responsiven Breakpoint gehabt auf einem Mobilgerät, wenn du das gekippt hast, also von Portrait auf Landscape oder so, und dann wolltest du vielleicht auf Landscape zwei Elemente im Slider sehen können gleichzeitig und im anderen Modus nur eins.
Musstest du bei Orientation Change, bei den JavaScript-Lösungen eben immer den Slider einmal wieder destroyen und dann wieder neu initialisieren, weil die einfach dann nicht responsiv waren.
Das ist halt, wenn du das nur mit CSS machst, dann ist das halt responsive out of the box sozusagen, weil du hier das ja an Media Queries koppeln kannst.
Ja.

[40:43] Genau. Was, ähm, also der Firefox hat noch so ein paar Scroll-Snap-Unzulänglichkeiten, leider.
Das ist ein bisschen schade.
Der Adam Argyle hat auch ziemlich viele coole Scroll-Snapping-Demos gemacht.
Hat auch einen coolen Talk auf dem CSS-Day gehalten.
O-Snap heißt der.
Letztes Jahr auf dem CSS-Day. Und bei uns auch am CSS-Café übrigens.
Genau, ein paar von diesen Demos funktionieren halt im Firefox nicht.
Zum Beispiel, was du mit Scrollsnapping auch cool machen kannst, ist dieser Gummiband-Effekt, dass wenn du quasi beim ersten Element schon angekommen bist und du versuchst es trotzdem noch mal weiter zu scrollen.

[41:32] Dann kannst du Before- und After-Pseudo-Elemente noch in diesen Slider mit reinsetzen, die nicht snappen.
Und dann erscheinen die eben kurz. Also dann ziehst du quasi den Slider länger, als er eigentlich sein darf.
Und dadurch, dass die aber nicht snappen, sondern die ganzen Slider-Elemente snappen, lässt du den los und dann schnappt das direkt wieder ein.
Also du hast echt einen ziemlich coolen Effekt. Und der Firefox, der hat zum Beispiel den Fehler oder den Bug, dass wenn du eine Seite lädst Du hast so ein Setup, dann startet der nicht auf dem ersten gesnappbaren Element.

[42:17] Sondern er startet quasi ganz links und dann merkt er, oh, ganz links geht ja nicht.
Ich muss ja snappen auf das erste, also nicht auf das bevor, sondern auf das erste echte Element.
Und dann macht er dann, dann zieht er, dann scrollen die schnell quasi an die richtige Stelle.
Und das sieht halt...

[42:38] Also es sieht gewöhnungsbedürftig aus, man könnte sagen es sieht cool aus, aber es wäre noch cooler, wenn man das eben, wenn man da, wenn man das selber in der Hand hätte.
Ja, genau. Und was mir jetzt auch gerade heute aufgefallen ist, ist, ich habe so, wenn Overlays aufgehen, dann möchte ich nicht, dass der, dass quasi das Dokument noch scrollen kann.
Also dann wird das so abgedunkelt, und dann soll das nicht mehr scrollbar sein.
Dafür kann man hier die nächste Property, die wir in der Liste haben, verwenden.
Das ist Overscroll Behavior, und da kann man dann quasi sagen, contain, das setzt man auf das Overlay drauf.
Und wenn man dann ans Ende des Overlays gescrollt ist, dann setzt sich das Scrollen nicht weiter unten im HTML-Dokument fort.
Und das wird dann aus Versehen gescrollt, obwohl das gar nicht gescrollt werden soll.
Das geht natürlich wieder in iOS nicht.

[43:39] Oder geht nicht. Ich muss es vielleicht jetzt nochmal testen. Es sind ja ein paar neue Versionen rausgekommen. Das heißt, du konntest es nur reparieren in iOS und indem du in dem Moment, wo das Model aufgeht, mit JavaScript das HTML-Element auf Position fix setzt, dann das Margin Top, so weit negativ machst, wie halt gerade das Dokument gescrollt war.
Und dann hast du es quasi fixiert an der Stelle. Und dann konnte es auch auf iOS nicht mehr gescrollt werden, wenn das Model sozusagen zu Ende gescrollt war.
Und genau heute ist mir aufgefallen, dass der Firefox in dem Fall auch diese Slider, die mit Scrollsnapping arbeiten, wieder an den Anfang zurückscrollt.

[44:24] Also wenn du schon ein bisschen weiter durchgescrollt bist Und jetzt stell dir halt so ein Builder-Slider vor, du kannst auf so ein Bild klicken, das geht dann in groß auf.
Cool, du machst dieses Model mit dem großen Bild wieder zu.
Oh, Slider ist nicht mehr an der Stelle, wo du warst. Du siehst quasi nicht mehr das Bild vor dir, was du angeklickt hast vorher noch.
Ja, ist fatal. Ja. Genau, jetzt muss ich mal gucken. Also, es liegt auf jeden Fall an diesem Position-fixed-Quatsch.

[44:54] Genau. Ja, aber ganz cool und es gibt noch so ein paar so Dinge, die fehlen im Scroll Snapping noch, da gibt es jetzt, da arbeiten die an Scroll Snap V2.

[45:09] Nämlich, was du momentan noch nicht so einfach machen kannst, ist, du kannst zum Scroll Snap Apparat noch nicht sowas sagen wie, äh, Snapple ins Nächste.
Snapple wieder ins Nächste. Also, es gibt keine, keine API dafür sozusagen.
Also, wenn du das programmatisch machen möchtest. Ähm, okay. Und das würde nicht funktionieren mit so was wie Scroll into View, wenn du manuell Bookkeeping darüber machst, was sozusagen das Letzte gewesen ist?
Das würde schon funktionieren, oder? Doch, doch, genau. Also, so mache ich das auch, aber es ist schon echt aufwendig.
Also, ich nutze so einen Intersection Observer, der guckt halt, welche meiner Elemente sind gerade quasi visible.
Und dann gucke ich halt, in welche Richtung klickt die Benutzerin oder der Benutzer.
Und dann hole ich mir quasi das Nächstbeste, was eben keine volle Visibility hat.
Und dann mache ich das eben mit Scroll Interview. Ja, okay. Das ist ja noch besser als das, was ich gerade vorgeschlagen habe, weil dann machst du ja tatsächlich keine Buchhaltung, sondern guckst per Intersection Observer, was ist denn, wenn jetzt sozusagen zum Nächsten gegangen werden muss, was ist denn der Ist-Zustand?
Ja, genau. Aber es wär halt schön, wenn's dafür eine Schnittstelle gäbe.
Und auch wenn's Events gäbe, wenn das grade snappt, das wär auch cool.

[46:33] Weil, ähm ... Du könntest natürlich mit irgendwie dem Scroll-Event arbeiten und dann sagen, okay, wenn das eben dann nicht mehr da ist, dann ist es wahrscheinlich gesnappt.
Aber das funktioniert halt auch nicht so richtig cool.
Also zu festzustellen, wann wurde gesnappt. Also das ist wahrscheinlich der Intersection Observer auch der bessere Kandidat.
Ich wollte gerade sagen, das mit dem Scroll Event ist ja mehr so ein indirekter Nachweis.
Mit Intersection Observer siehst du ja, was ist auf dem Bildschirm.
Ja.
Genau, das ist eben der Teil, der dann an dem gewerkelt wird wo vielleicht nochmal was kommt.

[47:18] Genau, also, Overscrollbehavior hat man ja grade gesagt. Ich glaube, da gibt's gar nicht so viel anderes als Contain und wahrscheinlich Auto oder so, ne?
Genau, das sind die beiden, die es gibt. Ich glaub, ich hab die auch schon mal benutzt für so eine wirklich übelst verschachtelte scrollbare Sachen in potenziell scrollbaren Sachen.
Wenn man so was baut, erstens sollte man's sein lassen, und zweitens, wenn man's trotzdem tut, ist das schon echt sinnvoll, das so kontrollieren zu können.

[47:44] Weil ... also ... Ich hatte halt zum Beispiel Codeditoren, in dem Ding, was potenziell scrollbar ist, wenn die Codes da drin ewig lang sind und wenn irgendwer da in dem Code-Editor rumbastelt und das ganz an die Seite reißt, dann ist klar, was gemeint ist, nämlich nur der.
Und dann hat das Bitteschön, contained zu bleiben und nicht die ganze Seite sich durch die Gegend zu bewegen.
Das ist schon sehr wichtig, dass man das setzt, da, wo halt so was relevant wird, was tendenziell eher nicht der Fall sein sollte. Aber manchmal ist halt der Platz auf dem Bildschirm endlich.
Ich glaub, ich hab das auch gesetzt, wenn ich nicht, weil es gibt Browser, die haben ja diese Shortcuts, also auch auf dem Desktop, dass wenn du quasi zu weit nach links oder so, also horizontal scrollst, dann sagt der, ah, du möchtest quasi Browser Back ausführen.

[48:31] Und genau, damit kannst du das dann eben auch verhindern, indem dann, wenn du das Dokument zu Ende gescrollt hast, sich das nicht mehr weiter runterfärbt dann ans Browserfenster, das dann wiederum denkt, du möchtest grade einen Browser-Back durchführen.
Also, es ist halt relevant, wenn du zum Beispiel, ähm, wenn du eben so horizontale Build-Scrollers oder so, da kann das dir schon mal passieren.
Oder auch in unserem GitLab-Board, da passiert mir das manchmal.
Ich scroll quasi auf dem Touchpad ans rechte Ende, und wenn ich dann, glaub ich, zu weit scrolle, oder wenn ich zu weit nach links scrolle quasi, dann springt der auch zurück.
Das ist dann ein bisschen nervig.
Also, er denkt dann, ich hätte quasi einen Shortcut ausgelöst.
Das ist schon arg lästig, ja.

[49:22] Genau. Vielleicht finden's Leute auch blöd, dass ich deren Shortcuts damit dann wegnehme.
Aber ich hab einfach an mir gemerkt, dass ich diesen Shortcut einfach zu oft auslöse aus Versehen.
Mhm. Deswegen hab ich das gemacht. Ich vermute, da gibt's keine richtige Antwort für.
Ja. so Shortcuts würde ich halt echt behaupten, da laufen da draußen noch ziemlich viele Menschen rum, die das nie bewusst auslösen.
Weil das ja schon irgendwie so advancede Interaktion ist versus ich badsche halt auf das Facebook-Icon drauf.
Ja. Hoffentlich. Genau. Ihr könnt mir ja mitteilen, ob ihr solche Shortcuts gerne nutzt oder ob sie euch auch eh auf den Keks gehen.
Ja, beziehungsweise ob das, was der Chef macht, eine gute Idee ist.
Man ist ja entweder davon genervt, dass man unabsichtlich einen Shortcut ausführt und dann landet man wo, wo man nicht sein wollte.
Oder der Shortcut funktioniert nicht.
Und ich meine, vermutlich ist Letzteres echt einfacher, weil ... ich meine, man ist ja tendenziell ...
Wenn im Computer was schiefgeht, ist ja sozusagen Sachen, die funktionieren sollten, aber nicht funktionieren, das, woran man noch am ehesten gewöhnt ist, dass man da rumworkaround versus wo bin ich denn jetzt gelandet.
Das ist ja immer der worst case.

[50:39] Ja. Vermutlich machst du das ganz richtig. Mal sehen. The final verdict ist ja noch nicht aus hier.
Ja, die haben alle keine Ahnung.
Okay, und letztes Ding, das wir noch haben, ist Scrollbar-Gutter.

Scrollbar-gutter

[50:55] Benutze ich eigentlich eher nicht.
Aber es ist... Kurz erwähnt, reserviert Platz für eine Scrollbar, die noch nicht da ist, aber kommen könnte, ne?
Genau, also wenn man... Man kennt das ja so von Seiten oder von Webpräsenzen, die Seiten mit wenig Text haben und Seiten mit viel Text.
Und wenn man dann von Seite zu Seite navigiert und landet dann eben mal auf einer Seite mit wenig Text und mal auf einer mit viel, dann hat man halt das Problem, dass sozusagen die Seite springt, quasi die Mittigkeit springt, weil eben im einen Fall eine Scrollbar da ist und Platz wegnimmt und im anderen Fall nicht.

[51:40] Und ich glaube, das ist einem ja auch erst so richtig aufgefallen seit die Browser dieses, ich weiß nicht, ich glaub, das nennen die Render Retainment, also das ist die quasi, irgendwann haben die ja umgeschaltet und nicht eine weiße Seite oder einen weißen Bildschirm gezeigt, wenn man von Seite zu Seite geklickt hat, sondern sie haben angefangen, angefangen, quasi einen Screenshot oder eine statische Darstellung der alten Seite noch so lange im Bildschirm zu behalten, bis sie in der Lage waren, die Neue zu rendern.
Und dazu dann auf einmal eben den direkten Vergleich. Genau. Und das hat die Leute dann immer genervt.
Und da war ja eigentlich die klassische Lösung, dass man zum Beispiel aufs HTML-Dokument ein Overflow-Y-Scroll gesetzt hat, sodass er im Prinzip ...
Also sich einen Scrollbalken erzwungen hat, selbst wenn man keinen brauchte.
Genau. Und er war dann eben einfach leer, wenn er nicht gebraucht wurde.
Und ansonsten gab's halt so einen Anfasser dann.
Hm.
Ja. Jetzt ist es halt nur die Leute, die es halt sehr genau nehmen mit dem Lineal.
Die sind natürlich dann davon genervt, dass die auf einer Seite etwas mehr Abstand haben als ...
... auf der anderen, ne? Ja, gibt keine richtig gute Lösung, glaube ich.

[53:03] Ja, und beim Scrollbar-Gutter, was du da auch unten natürlich machen kannst, ist, du kannst das auch noch mal auf der linken Seite drauf geben, sodass die Seite dann bei Scrollbars auf jeden Fall zentriert ist. Also falls dir das wichtig ist. Das ging, glaube ich, vorher ja nicht. Du kannst dann das Scrollbar entweder links oder rechts setzen.
Ich seh's grad, both edges. Genau.
Okay, dann ist das tatsächlich gar kein Problem. Genau, und das war unser Interactions Kapitel.
Warte, warte, wir müssen beim Scrollbar-Gutter noch auf den Safari einschlagen, der das nicht kann.
Ich glaub, der Bob, ja.
Genau, bei dem ist es aber auch nicht nötig. weil der hat ja so overlayte scrollbars und also.

[54:00] Ich weiß nicht, wie das ist, wenn man eine Maus anschließt, weil das ist ja bei den Macs so, oder wahrscheinlich auch bei den iOS-Devices, wenn du einen Pointer-Device anschließt, dann sind Scrollbars immer da.
Und ansonsten sind die eigentlich ja immer nur on demand da.
Aber ich glaube, dass die auch dann einfach nur drüberliegen und so halbtransparent sind, und dann springt ja nichts.
Die nehmen selber ja keinen Raum ein. Und darum haben die wahrscheinlich überhaupt keine Eile, oder generell überhaupt keinen Antrieb, Scrollbar-Gatter überhaupt umzusetzen.
Hm. Es ist halt auch die Frage, ob die Kompatibilitätstabelle uns jetzt sagt, das Feature fehlt denen, oder das Feature ist da, aber es hat keinen Effekt.
Ich denke, das Feature fehlt einfach. Aber aus...
Vertretbarem Grund, es passiert ja auch nichts. Eben. Gerade bei CSS ist der Unterschied ja nicht wirklich beobachtbar.
Ja. Also geht halt nichts kaputt.
Der Browser sagt halt einfach dann, Scrollbar-Gutter, keine Ahnung, kenn ich nicht, aber passiert ja nix Schlimmes.
Okay, dann hat Safari doch alles richtig gemacht.
Genau, dann haben wir jetzt Typografie. Jawoll. Dann haben wir als erstes Variable Fonts.

Typografie – Variable Fonts

[55:17] Hast du das reingetan?
Ich weiß es nicht, ich glaube nicht.

[55:23] In Seite 12 war es Vanessa, sie kann sich jetzt ja grad nicht wehren. Ach, sehr gut.
Aber ich meine, ich kann das, das kann man ja durchaus nennen als etwas sehr positives. Also Variable Fonts sind ja die Dinger, die haben keine verschiedenen Schnitte, keine verschiedenen Fontdateien für ihre Italics und Bolts und fast nicht alles, sondern das wohnt alles irgendwie in einer Datei drin und das skaliert sich da so zurecht, richtig?
Genau, das ist ja im Prinzip dann programmiert. Also du kannst ja dann weich überblenden, zum Beispiel in der Schriftstärke.
Ich glaube, das geht ja dann von 0 bis 1000 oder so was. Die Skalen, die möglichen.

[56:08] Bin ich 100% sicher, aber ich glaube, Und dann kannst du eben so von Ultra Thin bis Extra Bold kannst du quasi einfach den, entsprechenden Fettungsregler ziehen und der kann dann aber auch auf 237 stehen und nicht wie wir das halt bisher kennen immer auf irgendwelche 100er gerundet und die Schrift, die rechnet oder der Browser rechnet das dann einfach korrekt, wie dick die Schrift in dem Moment sein müsste.
Ja. Ich erspare mir die Frage, ob Fonts programmierspart sind.
Ja. Genau. Ich bin mir nicht sicher, was du so alles an Typografie und Trends...
...Type Settings so machen kannst.
Aber ich meine, das sind ja auch alle im Prinzip nur riesige Funktionen, je nachdem, welche Open Type Settings du wählst oder dein CSS-Fontding siehst, konstruierst.
Du hast ja auch riesige Rechenmaschinen, du kippst eine unfassbare Anzahl an Inputs da rein, und hinten kommt ein Ergebnis raus, das einigermaßen deterministisch ist.
Ja, das ist schon krass, eine Schriftart auch zu bauen, das ist unglaublich.
Also, Hut ab, wer das macht.

[57:27] Und, äh, ja.
Kann ich auch nur auf einen coolen Talk von der Ulrike Rausch verweisen, die bei der Bionteller-Rant gesprochen hatte.
Die so eine von denen ist, die so Sachen macht und das ist einfach nur Hammer.

[57:45] Ja, und es ist halt eben auch immer sinnvoll, sich bei diesen ganzen Font-Geschichten, gerade da, wenn man so nur am Rande CSS schreibt, ist ja was, was so meine Erfahrung ist, aber immer mal so gucken, was gibt's bei den Fonts eigentlich irgendwie so Neues, weil ich hab so das Gefühl, der Bereich der Unknown-Unknowns ist da noch mit der Größte.
Manchmal findest du so Sachen und denkst so, oh, mein Problem geht weg.
Das steht jetzt nicht im State of CSS drin, aber ich bin just Ende letzter Woche von Font Variant Numeric extrem entzückt gewesen.
Ist es das, wo man quasi Zahlen untereinander alignen kann? Jawoll!
Ja, also wie quasi, wenn man, wie nennt sich das, diese Even, also Programmiersprachen sind doch auch hier so Even Space, wie nennt man das nochmal?
Monospace. Monospace.
Also im Prinzip so ein Monospace-Effekt, ohne Monospace-Font nutzen zu müssen.
Genau, und das will man dann haben, wenn man, wie in meinem Use-Case, einfach die Uhrzeit anzeigt, und jede Sekunde steht eine andere Zahl ganz rechts.
Und wenn man dann Texte line-right hat, dann sieht das aus wie Grütze, weil es halt immer sich ein paar Pixel verschiebt.
Machst du Font-Variant-Numeric an, kannst du eine Schriftart behalten, und das sieht halt aus, wie es halt sein soll.

[59:09] Cool. Und weißt du denn, also ist das so was, was die meisten Schriften unterstützen, oder ist das, muss man da eben gucken, welche macht das und welche nicht?
Ähm, ich denke mal, Scroll...

[59:28] Hm, es sind wahrscheinlich ja immer irgendwelche Open-Type-Features.
Also wahrscheinlich muss die Schrift das auch unterstützen.
Zumal du halt auch so Sachen machen kannst, du hast halt also Font-Variant-Numeric-Normal ist halt normale Zahlen.
Und dann hast du Tabular-Nums, das ist, was wir gerade beschrieben haben, also fürs User-Interface quasi Monospace.
Aber du kannst halt zum Beispiel auch über das Ding die Old-Style-Nums, also die Medieval-Ziffern aktivieren, die halt so da besser im Flow sind, dass du halt irgendwie so was hast mit, na, mir fehlen grad die deutschen Wörter für den ganzen Krempel, aber dass du halt, ne, die 7 geht halt so weit runter wie ein kleines G und so Zeug.
Mhm.
Äh, ne, oder du kannst auch noch font-variant slash 0 machen, dann ist halt deine 0, die nicht einfach nur das, was aussieht wie ein O, sondern halt mit dem Dings drin.
Und das muss ja einfach auch schon allein wegen der vielen Anzahl an Möglichkeiten, die du hier anstellen kannst, das seh ich grad alleine nicht mal alle, das ist einfach nur wahrscheinlich auch eine Abstraktion, übersetzt manuell die ganzen Open Type Features.
Ja.
Aber ich wollte das bloß bewerben, weil letztens dachte ich so, meine Stopp-Roll sieht so schlecht aus. Meine Stopp-Roll sieht gar nicht schlecht aus, und ich muss da eine Zeile CSS schreiben.
Mhm. Ich überlege gerade, es gibt zwei coole Seiten, wo man auch so Fonts reinwerfen kann.
Eines ist FontDrop, und das andere ist.

[1:00:52] Ich glaube, VarGammaFondue. Ich gucke mal gerade. Also ganz bekloppter Name.
Ich wollte gerade sagen, Fondue kenne ich.
Aber Wagamama Fondue ist es nicht gewesen. Wagamama ist wiederum was anderes.
Naja, also auf jeden Fall sowas in der Art.
Ich mach mal hier, ich mach das mal anders. Ich mach mal Font.
Hahaha.
So, was kommt da? Aber was ist denn jetzt Fontdrop? Genau, Wagamama Fondue und Fontdrop sind beides so Seiten, die Schriftarten sozusagen dekompilieren und dir dann sagen, was da alles an Features drin steckt. Ah, okay, da kann ich also rausfinden, was ich alles an diesen ganzen Open Type Features aktivieren kann bei meiner gegebenen Schriftart. Genau, und welche Sprachen unterstützt sie und was weiß ich, was man sich da noch so alles vorstellen kann. Naja, okay, das ist wirklich ein sehr origineller Name und ein sehr originelles Webdesign. Das finde ich nicht schlecht.

[1:02:00] Okay, ja. Nee, aber das stimmt auch, dass bei den Fonts echt viel los ist.
Also, da gibt's total viel so Properties.
Und es gibt auch jetzt irgendwie noch so ein neues Ding, Fontmetrics, glaube ich.
Weiß aber gar nicht mehr, wofür das nochmal war.
Das konnte man, ich glaube, da konnte man dann auch, das war so eine Art Feature Query, die man nutzen konnte.
Fontmetric Feature Query, was ist das?
Textmetrics, nein. Hi, CSS-Font-Module Level 5, soweit sind wir schon.
Wir haben schon CSS 5, Chef. Krass.

[1:02:41] Krass, krass. Ach ja, genau, man konnte das, glaube ich. Ah ja, genau so.
Du kannst nämlich bei den Sources, kannst du nicht nur sagen, Hier ist die Datei, die benutzt folgendes Font-Format, sondern du kannst dann noch mittlerweile Tag mit reinstecken.
Und wenn der Browser dann sowas wie Colored Fonts unterstützt, dann nutzt er die Schrift.
Wenn er das nicht kann, dann nutzt er die quasi andere, die nicht auf Colored Fonts aufbaut.
Genau, da hast du also quasi einen, weiß nicht, wie man das nennt, das sind ja, im Font-Face-Deskriptor hast du dann eben, diese Tag-Geschichte noch mit drin.

[1:03:35] Value nennt sich das wohl wahnsinn wie war das noch mal von hate irgendwie dieser artikel. Welche artikel?
Irgendwer hat mal erzählt irgendwie so ich besuche jetzt nicht die most hated fonts danke google ne einfach nur mal irgendwer hatte mal in mehreren artikeln aufgeschrieben.
Was von Trendring tatsächlich für so ein undankbares Business ist, weil du ja diesen ganzen Krempel hast, dass wir hier da in Europa denken und so, ah ok, dann steht da halt eben ein A neben einem B, ist alles easy und dann kann ich halt auch irgendwie sowas sagen, wie der erste Buchstabe ist rot, der zweite ist grün und man denkt ja kaum drüber nach, was dann da so alles an Schwierigkeiten noch da so herkommt, wenn du Schriftsysteme hast, wie das, was wir in Korea haben oder du hast irgendwelchen arabischen Fu, wo irgendwie das auch so mit so der erste Buchstabe ist rot, und der zweite ist grün, ist ja eine unlösbare Aufgabe, wenn das so eine fancy Legatur wird.
Ja.

[1:04:35] Und was man dann halt alles so macht, wie so unterschiedliche Rendering-Engines halt eben auch sagen, man kann das nur falsch machen, und wir nehmen jetzt diesen Weg.
Ja.
War aber nicht der Florian Rivoile, oder? Zufällig?
Linebreaking and related properties?
Glaub ich nicht. Nee, der hatte mich auch ... Text rendering hates you, da haben wir's doch.
Finden wir in den Shownotes, äh, sehr schön, äh, das ist ...
Ich mein, das sind doch die Probleme, die find ich ja immer am spannendsten.
Wenn man eh keinen guten Ausweg hat, und da muss man halt den wenigsten Schlimmen nehmen.
Das ist für Textrendering sinnvoll. Und auch beim nächsten Horror-Slasher genau das Szenario, das man haben möchte, damit's spannend bleibt.
Sehr gut. Das Gegenteil von einem Horror-Slasher ist eine ganz neue Propertie namens Text-Wrap.

Text-wrap

[1:05:25] Die es jetzt ganz frisch mit dem Wert Balance gibt. Und bald soll es aber auch noch Pretty, glaube ich, geben.

[1:05:36] Kann ich auch ugly angeben? Ugly ist es ja bei Default. Da musst du gar nichts machen.
Ja, und da geht es im Prinzip darum, dass du, wenn du mehrzeiligen Text hast, dann hat man ja manchmal den Wunsch, dass eben, wenn er denn umbricht, er das dann doch bitte so machen würde, dass nicht die erste Zeile durchgeht bis hinten und die zweite möglicherweise nur noch ein Wort enthält oder sowas, weil das einfach doof aussieht, sondern dass man sagt, okay, Browser, wenn du umbrichst, dann bitte mach's aber auch so, dass du eine nennenswerte Anzahl Wörter in die zweite Zeile mitnimmst und nicht nur irgendwie das eine, was nicht mehr in die erste Zeile passt, damit das am Ende einigermaßen ausgewogen aussieht zwischen den Zeilen.
Und das ist eben, was Text Wrap Balance macht. Bei Pretty bin ich mir nicht so ganz sicher, aber ich glaube, ich würde die so charakterisieren, dass Textwrap Balance was ist für Überschriften und Textwrap Pretty ist eher was für Fließtexte.

[1:06:45] Genau, das wird aber, glaub ich, noch nicht unterstützt. Und Textwrap Balance hat halt so ein bisschen das Problem, dass so Layout, dass man Gefahren laufen könnte, so sehr komplizierte Relayouts durchzuführen, wenn man das macht.
Deswegen haben sich die Browser dagegen lange gesträubt.
Ich glaube, das war ursprünglich mal ein Proposal von Adobe, also auch schon zehn Jahre alt oder so.
Aber die haben dann einfach gesagt, okay, wisst ihr was, wir machen das, aber wir machen das nur für Texte, die bis zu drei Zeilen lang sind.
Und wenn die länger sind, dann macht Textract Balance einfach nichts, weil das ist so eine Länge, da können wir das vertreten, irgendwie mehrere Layout-Durchläufe machen.
Genau, und so ist es jetzt auch umgesetzt.

[1:07:37] Ich scrolle jetzt mal gerade in Spezifikationen danach, wie das umgesetzt ist, weil es ist ja schon mehr als jetzt so ein triviales Typografie-Fehler-Vermeidungs-Ding, wie so non-breaking space zwischen die beiden letzten Wörter. Es macht ja schon mehr als das. Es soll ja schon mehr erreichen als einfach nur das Vermeiden von diesen Fehlern, wo mir wieder gerade die Worte fehlen.
Ich weiß nicht mehr, wie sie heißen. Aber die Frage, die ich mir natürlich jetzt stelle, ist, wie kann ich das kaputt trollen? Weil ich stelle mir jetzt natürlich vor, ich baue was, was irgendwie so dann umbricht und zwei Zeilen braucht.
Aber ich mache halt ein Wort irgendwie auf Schriftgröße 9001.

[1:08:20] Also, was ist der Balancieralgorithmus und weiß der, wie groß die Schrift ist?
Und wenn ich dann eine andere Schriftart reinsetze, die irgendwie superbreit ist? Verstehst du, wie ich meine?
Ja, also ich glaube, dass du es auf jeden Fall kaputt spielen kannst, Das ist ein kandidat ich habe das ja mal geschafft mit mit dem mit der first line pseudo klasse weil je nachdem was du da machst ist halt die first line auf einmal doch nicht mehr die first line.
Also, weißt du, wenn du die… Naja, wenn du einen Text hast und dann schnappst du dir die Firstline und gibst dann der Firstline zum Beispiel eine größere Schriftgröße.
Dann ist die ursprüngliche Firstline ja auf einmal nicht mehr die Firstline, weil die ganzen Wörter viel weiter laufen, das heißt, auf einmal rückt ein Teil der ursprünglichen Firstline in die Secondline und damit kannst du einen Browser auch aus dem Tritt kriegen.
Die haben so wie so quasi Rücklaufventile drin.
Das heißt, irgendwann lassen die das dann sein.
Und quasi loopen nicht mehr weiter, um das alles zu korrigieren.
Und dann kannst du solche Momente erleben, also wenn du gegen dieses Rücklaufventil sozusagen kommst, wo der Browser in so einem State ist, wo er es eben nicht korrekt gerendert hat.

[1:09:47] Ja. Na ja, und du kannst natürlich auch diese Rücklaufventile wahrscheinlich mit so Intersection-Observern und ähnlichen Späßchen auch ganz gut umgehen.

[1:09:57] Mh, nee, wie würde man das umgehen? Weiß nicht, aber du kannst dann ja auf jeden Fall das Layout verschieben. Also du machst irgendwie die Firstline, wobei, nee, stimmt gar nicht.
Du meinst den Resize Observer, oder?
Den Resize Observer meinte ich ganz genau, natürlich, danke.
Ja, genau, der hat ja auch so ein Rücklaufventil, bei dem ist es ja so, dass du das quasi, dass man immer nur, glaube ich, von oben nach unten sich durchs DOM arbeiten kann.
Also, man kann im gleichen Rendering-Durchlauf kann was, was weiter oben ist, nicht mehr quasi korrigiert werden.
Oder es löst nicht noch mal den Resize-Observer aus.
Okay, das macht ja auch Sinn.
Genau, um auch eben diese Endless-Loops dann zu verhindern.

[1:10:47] Ja, am Ende des Tages ist es bei so Layout-Geschichten auch ein, man kann es halt nicht final beantworten.
Man muss halt an einem gewissen Punkt einfach sagen, ist jetzt gut genug.
Ja. Ich glaube, wir hatten, hatten wir über diese Igalia-Podcast-Episode gesprochen, hatten wir doch, oder? Irgendwann letztens.
Ich meine schon. Wo so ein Browser-Engineer da war von Chromium und eben, genau, du hast das, genau, das war Dieses First-Person-Scroller hieß der Titel.
Genau, da ist auch relativ viel über so eben Text-Layout gesprochen worden.
Und es war sehr hörenswert.
Falls die Hörerinnen und Hörer sich die Folge noch nicht zu Gemüte geführt haben, bei unserer letzten Empfehlung würde ich die jetzt hier einfach noch mal ausholen.
Hm. Ja, es ist schon toll, Das Text-Layout, also wirklich so die älteste Kulturtechnik, also, na gut, nicht die älteste, aber auf jeden Fall eine steinalte.
Aber du kriegst es halt einfach nicht hinautomatisiert. Du kannst ja den Künstler einfach nicht rausholen, weil zu kompliziert einfach.
Das kannst du nicht vercomputerisieren, komplett.

[1:12:02] So, dann haben wir noch Accessibility. Da haben wir im Grunde nur Focus Visible drin.

Accessibility & focus-visible

[1:12:08] Das ist ja jetzt nicht so ganz neu.
Da würde ich aber tatsächlich auch nochmal auf ein Igalia-Podcast-Folge verweisen, wo zwei Engineers zu Gast waren, die das in Chrome implementiert haben.

[1:12:25] Und das kam zusammen mit inert irgendwie in die Browser aus irgendwelchen Gründen und das ist auch gar nicht so trivial gewesen, sozusagen diese dieses Regelwerk festzulegen, wann Fokus ein fokussiertes Element eben mit einer sichtbaren Fokus Ausleihen Outline versehen werden soll und wann nicht, weil genau das macht halt also das kann man machen mit Fokus visible, dass man eben sagt Hey, der Chef, der beschwert sich immer, wenn irgendwelche Buttons und Links, wenn die dann quasi so eine Outline haben, wenn man die klickt, da will die immer weg haben. Aber Menschen, die eine Tastatur bedienen, die brauchen es halt.
Deswegen ist es eine gute Lösung, einfach Outline nun zu machen überall. Also geht man eben hin und sagt, okay, die Outline, die ist sichtbar, wenn ein Element fokussiert wird und eben dieses Fokus gerade angesagt ist, weil der Browser festgestellt hat, dass du die Tastatur benutzt oder so.
Genau, und da gibt es eben so verschiedene Heuristiken, die dann, die der Browser da anwendet und auf Basis derer entscheidet, wann Focus Visible eben zutreffend ist.

[1:13:42] Ja, immer noch, wenn nicht immer noch, ist irgendwie so eine Art Boss-Key im CSS irgendwie ganz sinnvoll.
Ich meine, wenn offensichtlich ablösen gefordert wird, Das Einzige Richtige zu sagen, äh, if Manager, wenn, äh, machst du das CSS, wie er haben will und der Rest, so kriegt er's mit.
Klicken Sie hier, wenn Sie der Chef sind.
Vielen Dank. Oh, ich bin, ich bin immer der Chef. Ja, genau.
Also ich benutze das auf jeden Fall, äh, gerne und, äh, find das eine sehr, ein sehr guter Kompromiss, so für alle Seiten.
Okay, also, hm.
Mich stört der Fokusring eigentlich nie.

[1:14:22] Also, ich will den eigentlich immer haben, und ich find das toll, wenn der da ist, damit ich orientiert bin.
Einfach nur für so Szenarien wie, ich hab wo draufgeklickt, und dann geh ich zurück, Moment, bis wohin bin ich gekommen, mit diesem Textmonster.
Ja, also für uns Entwicklerinnen und Entwickler ist es natürlich auch cool, wenn man ein Fokusring hat, um einfach zu sehen, ob man sein Fokusmanagement im Griff hat.
Vielleicht, wenn man auch so Overlays öffnet und wieder schließt, wandert der Fokus dann wieder auf das letzte Element, und ist dann wieder irgendwie auf dem Document Route oder so.
Nee, ich mein halt tatsächlich auch so aus so Nutzerperspektive. Mhm.
Also, wenn ich jetzt irgendwie so ECMA-Script-Spezifikationen, wirklich irgendwie so Gazillionen Seiten mit Gazillionen Links drin.
Und dann klickst du wohin und springst du durch die Gegend. Und bis wohin bin ich jetzt eigentlich im Algorithmus, den ich drei Schritte vorher eigentlich durcharbeiten wollte, wie weit war ich eigentlich gekommen, um den durchzuarbeiten.
Einen noch wieder in die Scrollposition zu bringen, das ist ja nice.
Dann ist es im Idealfall so, dass die Links auch ein Visitors-Teil haben, was möglicherweise nichts hilft, weil's ein riesiges Dokument ist, aber so ein Fokusring, das find ich schon nett.
Und man kann die ja auch hübsch machen.
Das würde ja schon reichen bei dir, ne? Das müsste ja gar nicht bei Teams sein, sondern bei Active.
Der müsste dann ja wahrscheinlich Active sein, oder?
Wenn ich zurückgekommen bin von dem Ding, wo ich gewesen war?
Ich weiß es nicht. Ich auch nicht. Macht's doch einfach schön, dann stört's auch keinen.

[1:15:50] Mhm. Ja, genau. Aber es ist halt nicht immer kollegenkompatibel und chefetagenkompatibel und auftraggeberkompatibel, der die Kohle rausrücken soll, ne?
Ja, aber die sollen sich halt nicht veranstalten.
Heilige Güte.
Genau, das war jetzt der Accessibility-Abschnitt, der kleine.

Other

[1:16:11] Dann haben wir noch other.
Das ist sozusagen die MISC, wo man alles reinschiebt, was man nicht zuordnen kann.
Add Property haben wir da drin.

[1:16:23] Ich glaube, damit hast du in letzter Zeit rumgewurschtelt auch, ne?
Ja, nee, ich hab festgestellt, das geht im Firefox nicht, und von daher ist mir das egal.
Ist dir das egal, dass der Firefox das nicht unterstützt, oder AdProperty ist dir egal?
AdProperty ist egal, dass der Firefox nicht kann.
Weil, also, die Idee ist ja ganz nett, also, kann man eine eigene CSS-Property definieren und halt da auch drin festlegen, dass das Ding, äh, ja, Eigenschaften hat, wie zum Beispiel, dass es, äh, ne, na, ein Prozentwert ist, da mit Transitions stattfinden können und so Zeug, das ist ja das Wichtigste.
Ich meine, im Prinzip kann ich mir ja eine eigene Property definieren, einfach mit Custom Properties, aber da ist das dann halt eben mit den Transitions nicht so gegeben. Und das ist ja eigentlich ganz nett, weil ich kann mir ja eigene CSS, äh, Quatsch, äh, ich kann mir ja eigene, HTML-Text bauen, wäre ja nur sinnvoll, wenn ich mir halt eben auch eigene CSS-Properties bauen kann, und zwar bitte schön vollwertige und nicht nur diese Variablen, Platzhalter mit den zwei Strichen davor.

[1:17:18] Ja, das ist ja ein bisschen Typing, ne, oder Typisierung von Kassenfraktions.
Genau, er hat ja immer noch diese zwei Striche davor.
Normalerweise ist es ja so, CSS-Variablen sind einfach nur String Replacement und damit kann man halt eben sagen, das da bedeutet jetzt aber eine Zahl und da kann man nicht alles reinschreiben, sondern das ist halt eben ein Prozentwert oder eine Längenangabe, eine Farbe, sowas in der Richtung.
Und das ist halt vor allen Dingen für den Fall, dass da irgendwie was interpoliert werden soll, extrem wichtig, kann man nicht drauf verzichten, muss man aber, weil im Moment ist es in Firefox bloß im Nightly drin. Schade.
Bist aber Teil der Interop 2023 Agenda und idealerweise musst du nur bis maximal 31.12.2023 warten, bis das auch im Firefox drin ist.

[1:18:08] Das wäre ja nicht ganz verkehrt. Die Frage, die sich da natürlich stellt, ist, sollte man eigentlich, also ich hab das jetzt, die Idee kam mir buchstäblich heute und ich hab ungefähr 30 Sekunden danach gegoogelt, aber vielleicht weißt du ja mehr.
Eine Möglichkeit, sich eigene CSS-Selektoren zu konstruieren, so im Standard, gibt's noch nicht, oder?
Nee, gibt es nicht. Gab aber doch mal, also es sollte mal gehen.
Aber frag mich nicht mehr, wie das gedacht war.
Weil, was ich ja ganz cool fände, wäre, dass ich mir so eine, im Prinzip eigene Pseudoklasse bauen kann.
Und ich programmatisch per JavaScript-API, so ähnlich wie bei App-Property, definieren kann, was die so meint.
Also, jetzt nicht so nur als Shortcut, sondern im spezifischen Fall bei mir dachte ich halt eben, ich hab einen Haufen Custom Elements.
Und in diesen Custom Elements gibt es mehrere, die einfach so Varianten voneinander sind.
Die sollen aber alle irgendwie einheitlich selektierbar sein.
Und ich möchte halt ungern das alles in meinem Dokument verteilen, dass immer, wenn ich alle diese drei meine, ich dann jedes Mal die drei auflisten muss.
Einfach so eine Pseudoklasse hätte irgendwie Customs, so was fände ich halt ganz praktisch.

[1:19:22] Ja, es gab ja mal hier Teil von CSS Houdini. Da gab es ja auch irgendwie diese Custom Selectors.
Ich gucke mal, ob ich da noch irgendwas ausgraben kann. CSS Parser API.
Ja. Ich glaube, da gab es mal was, ja, aber das ist äh.

[1:19:49] Glaub ich. Ja, da ist wohl nix custom, äh, true, custom functions.
Ja, Custom Selectors sollte auch gehen. Ich gucke mal kurz, ob ich da was finde.
CSS Custom Selectors.
Ah ja, hier. CSS Level 4. Genau, wir können ja einfach mal hier...
...was verlinken und uns das selber nochmal zu Gemüte führen nach dieser Aufnahme.

[1:20:21] Ja, den Artikel hatte ich auch gefunden, aber so wie ich den verstanden habe, ist der bloß ein Post-CSS-Plugin.
Ah, okay. Das ist natürlich Käse.
Okay. Wir können ja trotzdem verlinken, weil jetzt haben wir ihn ja schon hier angeteasert.
Genau, ansonsten ... Custom-Selectors mal suchen. Ja, also, so was wäre schon ganz sinnvoll, würde ich finden.
Oder, ich meine, keine Ahnung, gibt's ja nicht so wirklich. Oder eine Pseudoklasse, die einfach nur ein Überbegriff ist für drei verschiedene HTML-Tags.
Aber kannst du das Custom-Elements nicht irgendwie über die Defined-Pseudo-Klasse irgendwie regeln?
Ich will ja nicht alle Custom-Elements selektieren, sondern ich will...
In meinem Szenario, in meiner App, habe ich halt irgendwie eine ganze Menge Custom-Elements, aber es gibt halt drei, die so extrem austauschbare Use-Cases haben, und die immer gleich formatiert werden müssen, aber die halt, weil sie unterschiedliche APIs und Fähigkeiten und Rendering-Fu machen, unterschiedliche Elemente sind.
Das macht auch Sinn.

[1:21:26] Und die will ich halt dann gleich selektieren. Im Moment muss ich denen alle die gleiche Klasse geben, was ja bescheuert ist, weil die ja, das kann ja auch einfach irgendwie klar sein und definiert sein, dass die drei zu einem Team gehören.
Ja. Verstehe. Ja, das wär cool. Aber ich glaube, alles, was so Houdini angeht, da passiert jetzt nicht mehr so viel. Also, AdProperty kommt ja auch aus diesem Houdini-Dunstkreis.
Aber so, ich glaub, neue Dinge schiebt da keiner mehr an jetzt.

[1:21:55] Ja, es ist ja auch nur so ein Marketing-Begriff gewesen für einen, so ein Push halt.
Mhm. Ja, genau. Aber ich glaub, da war schon großer Enthusiasmus da.
So aller Orten.
Ähm, aber jetzt mit, äh, nachdem Sörma dann bei Google weg ist, der hat ja noch relativ viel sich damit beschäftigt, ist dann, ist es dann auch eingeschlafen.
Ja. Na ja, und es ist ja auch okay. So ist es ja kein gescheitertes Projekt in dem Sinne, Das ist halt einfach so eine Aktion gewesen und in dem Rahmen der Aktion hat was funktioniert und was nicht.
Und, mei, kann ja später noch kommen.
Ja, wir sehen ja an den Web Components, wie schwierig das ist, sowas sozusagen nachträglich in die Plattform zu bringen.
Also so primitive, auf denen zwar die Plattform irgendwie aufbaut, aber was, was im Grunde nie designed wurde, um es freizulegen.
Es ist ja einfach auch völlig Banane, erst die Applikation zu schreiben und hinterher das Framework. Und das ist genau, was passiert. Ja.

[1:23:03] Genau. Apropos Framework, Überleitung allerhands. Tools haben wir noch.

Tools: Pre- & Post-Processors

[1:23:09] Pre- und Postprozessor.
Wie hältst du das? Also, was nutzt du da?
Oder nutzt du das? Nix. Also, ich hab irgendein Tool in meinem Parcel drin, dass das minimiert am Ende, und das reicht mir auch.
Aber so, da ist auch nix mehr mit Auto-Prefixing oder irgendwie, nutzt du irgendwie syntaktischen Zucker, also so was wie vielleicht Nesting oder so was?
Nee, also syntaktischen Zucker, da bin ich jetzt gebranntes Kind, das nutze ich nicht mehr, weil wenn ich weiß, Wenn ich weiß, dass eins passiert, ist, dass das halt irgendwann die Tools gehen kaputt, das wird inkompatibel.
Oder natürlich, das Beste ist, CSS rüstet ein Feature nach, das ungefähr genauso funktioniert, aber halt dann doch komplett anders ist.
Mhm.
Also es ist ja so, wie du irgendwie SAS-Variablen und CSS-Variablen einfach nicht in den gleichen Topf werfen kannst, weil die einfach komplett unterschiedliche Eigenschaften haben. Ja.
Äh, ich find mich einfach mit dem ab, was da ist.
Also ich benutze nix außer halt so Kompressoren. Also, im Vergleich dazu, wie ich mein JavaScript durch den Wolf drehe, mit Alpscript und Babel und Zeug, oder wie ich teilweise mit Post-HTML, was ein super Tool ist, mit meinem HTML umgehe, mein CSS fasse ich im Prinzip nicht an.
Das ist gut, wie es ist.

[1:24:27] Ja, da kann man ja auch mit Minifiren gar nicht so wahnsinnig viel rausholen, also nicht so viel im Vergleich zu JavaScript.
Nee, gar nicht, weil mit JavaScript kannst du ja wenigstens irgendwie noch so, keine Ahnung, variablen Namen einkürzen und Blattkeks, aber ich meine CSS ist ja per Definition ein endlich großes Dictionary und dann geht ja eh der Kompressionsalgorithmus hin und denkt sich, das ist ja alles easy.
Ja. Ja, genau. Also vielleicht könnte man mit Custom-Selektoren, dann könnte das Optimierungstool bestimmte Selektoren, die häufig auftreten, durch einen Custom-Selektor, der nur einen Buchstaben hat, ersetzen.
Das müsste eigentlich gehen, solange da nicht rein folgenmäßig irgendwas durcheinander kommt oder so.
Ja, genau. Aber da das ja global ist, wer weiß, ob nicht noch irgendwo eine andere CSS-Datei eingebunden wird, die das dann auch benutzt und dann ping.
Brauchst du CSS-Scoping? Dann ist das kein Problem.

[1:25:28] Wahrscheinlich schon, ja. Genau. Was man alles an Problemen aus der Welt schaffen könnte, wenn man da dieses Add-Scope oder was das war, das jetzt wiederbelebt werden soll?
Ja, das kommt auf jeden Fall.
Und das Schöne ist ja, das Add-Scope auch, das kann ja auch ein Ende haben. Das heißt, du kannst, kannst ab einem gewissen Element anfangen zu scopen, aber du kannst dann auch sagen, das, was jetzt wiederum hier reinverschachtelt wird, da hört bitte mein eigener Scope wieder auf.
Und ich erfasse dann eben diese Kind-Elemente ab der Ebene eben nicht mehr.
Das ist cool.

[1:26:10] Ja, ich meine, das ist irgendwie total offensichtlich, dass das seit Jahrzehnten gebraucht wird.
Jetzt kriegen wir's endlich mal. Dann kann man hoffentlich die ganzen Shadowdome-Use-Cases, die wohl schon bei Shadowdome einfach die völlig unpassende Schiffsartillerie ist, für das kleine Küken, auf das man da schießen möchte, Adapter legen.
Dann nehmen wir einfach ...
Ja, das weiß nicht, wenn die einzige Möglichkeit ist, dass du jemals am Abzug eines Schiffartillerie Geschützes stehst.
Also wirklich so eine Bismarckartige Kanone, die eine einzigartige Gelegenheit für dich.

[1:26:44] Ja, und ich muss auf so ein Hühnchen anschießen oder was? Das ist die einzige Möglichkeit für dich, jemals dieses Ding abfeuern zu können.
Tja, das ist offen, ja genau.
Frage am Rande, Ad Layer ist ja auch neu, also hast du das schon benutzt?

@layer

[1:27:05] Ja, ich hatte eine Kundschaft, die komplettes CSS-Drama hatte.
Länger schon Zuhörende erinnern sich vielleicht an den Anfang dieses Podcasts.
Das Ding ist halt eben super komplizierte Applikationen und generell ist das so im Maintenance-Mode Keiner will das anfassen, weil das so eine JSF-artige Monster-Konstruktion ist.
Ganz, ganz grauselig, aber man muss es halt eben maintainen, weil ansonsten die Firma zusammenklappt.
Und das CSS ist halt eben komplett kaputt, unter anderem, weil die einen supertollen Build-Prozess am Start haben, der das macht, was unser hypothetisches Add-Selector-Ding nicht macht.

[1:27:44] Also, da versuchen sie auch irgendwie zu komprimieren, aber halt tatsächlich, indem sie sagen, hey, diese beiden CSS-Regeln haben den gleichen Deklarationsblock über unterschiedliche Selektoren.
Lass mal einen Deklarationsblock draus machen, indem wir den Selector aus dem zweiten an den ersten dranhängen.
Ja, okay, also das Problem, was man sich mit Extents auch eintritt in SCSS, dass man quasi die ... dass die Kaskade verändert wird, je nachdem.
Genau, und die wird halt verändert. Also, bei Extents ist es ja noch irgendwie so einigermaßen bewusst.
Also, ich schreib das Extents irgendwo dran.
Ja, aber auch nicht so ganz. Also, weil man ja denkt, man macht so was wie Mixins.
Und wir wirklich nebeneffektfrei sind also im Sinne des kaputt machen also in der Datei größe nicht nebeneffektfrei aber.

[1:28:33] Bei Extend, da passiert das schon mal eher, ja. Okay, also da gibt's dann einen Unterschied.
Genau, bei Extend, da hängst du quasi auch, da sagst du, ich hab hier einen Platzhalter, also einen Extend, der hat folgende Werte, und du kannst aber auch einen, du musst auch keinen Platzhalter Extend nehmen, du kannst auch, also, du kannst entweder diesen Platzhalter nehmen, oder eben einen bestehenden Selektor, und dann kannst du, Andere Elemente können das dann einfach extenden und dann wird die Selector Chain einfach erweitert um die und dadurch änderst du sortierst du die natürlich in der Kaskade auch um.
Okay, aber trotzdem würde ich sagen, weil du da syntaktisch dich dafür entscheidest, ist das immer noch besser als ich schreibe einfach eine Zeile in diesem Deklarationsblock rein und denke an nichts Böses und das sorgt dann dafür, dass der Bildprozess das ganze Ding umbaut.
Ja, nee, das ist eine ganz schlechte Idee.
Da gibt's ja ... Das ist aber eine Regel bei so Tools wie CSS Nano und so ja nicht per Default aktiviert, aus gutem Grund.
Nee. Das ist aber auch nicht CSS Nano, was die da verwenden, das ist CSS Faustkeil. Das ist ein ganz, ganz ...
Das ist halt ... Also, der Letzte, der wusste, wie das System funktioniert, ist schon ... UI-Kompressor, oder? Der konnte doch damals JavaScript und CSS komprimieren.
Ich glaub, das System ist älter als dieser ganze Krempel. Echt? Ja.

[1:29:58] So, und deswegen so meine Idee, okay, wie kommen wir da so nochmal raus?
Naja, nehmt halt irgendwie so Web Component und ersetzt es so Stück für Stück für Stück.
Und euer CSS kriegen wir wie folgt in den Griff.
Wir nehmen einfach euer Legacy CSS und importen das in einen Layer. Mhm.
Und dann ist das halt eben da. Und das wird nicht mehr angefasst.
Aber dann hat man das ja kaskadenmäßig sozusagen en bloc in eine bestimmte, sagen wir mal, Hierarchie-Ebene geschoben. Mhm.
Und kann dann sein anderes CSS einfach dranschreiben.
Genau, weil da in der Layer ist es schwächer in der Kaskade als eben alles, was du nicht in eine Layer packst.
So sieht's aus, ne? Und das ist sozusagen das Nächste, dass du einem Greenfield-Project-CSS-seitig kommen kannst.
Mhm. Es ist ja quasi, als wäre dein bisheriger Style, den du bisher geschrieben hast in den letzten 30 Jahren, wo dieses Projekt existierte, so, das wird jetzt contained.
Wir auch nicht mehr an, weil das halt eben einfach hier wie Dragons ist. Aber zumindest können wir jetzt ohne 700 Importance und ohne elendig lange Selektoren das gezielt überschreiben.

[1:31:06] Und da hab ich Layer für verwendet. Nachdem ich gezeigt hab, guck mal, so wird eure Welt besser, dann hat das auch niemand jemals wieder verwendet.
Das ist komplett hinten runtergefallen. Aber so kann man's machen. Ja, cool. Sehr geil.
Ansonsten find ich Layering irgendwie nicht ... Es ist halt irgendwie nicht so mein CSS-Herangehensweisen-Teil.
Also, ich bin da ja mehr so komponentenbasiert unterwegs.
Und dieses Layering-System passt mir da nicht wirklich rein.
Das gibt mir nichts, ist mein Gefühl.
Ja, ich glaube, du kannst es halt vielleicht für Komponenten so als dein Serviervorschlag CSS kannst du so verpacken und dann kann, die Benutzer oder der Benutzer deiner Komponenten, wenn sie denn zum Weiterbenutzen gedacht sind, leichter eigene Styles draufpacken, weil man eben auch nicht keine Selektor- oder Spezifitätskriege anfangen muss.
Muss, wenn du da eigenes Zeugs in der Layer packst.
Das ist halt eben unter der Annahme, dass man nicht ohnehin mit Shadow DOM unterwegs ist, wo das ja implizit der Fall wäre.

[1:32:16] Und unter der Annahme, dass man außerhalb von Shadow DOM unterwegs ist, aber nicht von einer dieser ganzen garstigen CSS- und JavaScript-Lösungen geplagt ist.
Ja.
Ich meine, das Problem, wo du jetzt gerade Layer als Lösungsvorschlag gesehen hast, das wird ja auch schon anderweitig gelöst, eben durch Shadow DOM oder durch JavaScript-Lösungen.
Ja, oder IS und WHERE und so. So was.
Aber ich meine, es ist auf jeden Fall ein sehr CSS-iges Feature-Layer.
Also das will ich dem mal zugestehen. Weil es ja wirklich so Kaskaden-Fallenkontrolle ist.
Und das passt ja eigentlich ganz gut, wenn man der Meinung ist, das wäre ein Feature, das zu embracen gilt.

[1:32:52] Und wo man nicht irgendwie gegen einen arbeiten muss mit BAM. Ja. Ja.
Aber zumindest für so Legacy-Code-Containment in einer Welt, wo sich die Leute um ihr CSS scheren, wär das, glaub ich, ne echt super Sache.
Ja, ich muss mal gucken, wann ich da ... Also, ich hab noch keinen Anwendungsfall dafür.
Mir ist es auch noch ein ganz Ticken zu frisch. Also es wird zwar von allen Browsern unterstützt, aber eben den aktuellen.
Und dann gibt's ja eben doch immer noch so ein paar Leute, die auf älteren iOS-Versionen festhängen und so.
Da gibt's ja keine guten Fallbacks für Layer, wobei es wahrscheinlich gibt's noch einen Polyfill dafür. Aber, genau.
Also, da will ich das eben noch nicht benutzen. So wie CSS-Nesting, das ja, glaube ich, auch mittlerweile alle Browser unterstützen.
Aber das ist so, da geht halt einiges kaputt, wenn man, Der fliegt einem alles um die Uhren, besser gesagt, wenn man einen Browser trifft, der das eben nicht kann.
Hm. Ich bin mal gespannt, ob ich CSS-Nesting haben will.

[1:33:55] Tja, also ich nutze es halt in Pre-Prozessoren, um mir Tipparbeit zu sparen.
Ich mach dann immer hier so kaufmännisches Und und dann... Also meine BEM-Selektoren, also die Element-Modifier, die hänge ich dann immer an das Block-Ding, was quasi in dem Kaufmann schon unten steckt.
Hm.

[1:34:20] Ja, sonst hält sich das in Grenzen. Du würdest es nicht benutzen, wenn du nicht durch BAM gezwungen wärst, elaboriertere Selektoren zu produzieren.
Genau, generell ist es ja eh so, dass man versucht, seine Selektorenkette kurz zu halten.
Das heißt, eigentlich, ich nutze es halt nicht für Verschachtelung, für das echte Nesting, oder nur ganz wenig.
Deswegen, ich könnte mir vorstellen, dass wenn man eben viel Nesting benutzt, dann könnte man sein CSS-File auch deutlich kleiner bekommen, indem man eben dann überall kaufmännische Uns benutzt und das so ineinander schachtelt.
Je nachdem kann man da schon wahrscheinlich relativ viele Charakter sparen, aber dafür muss man eben jemand sein, die oder der eben sehr viel und gerne nestet in CSS.
Naja, plus würde ich auch sagen, was du, sagen wir so, das klingt halt irgendwie auch so alles um so ein bisschen nach, den Features, die wir haben, damit wir nicht Scope haben müssen.
Weil wenn du das hättest und du einfach sagen könntest, du kannst eh kurze Selektoren verwenden und du weißt, dass die keine Nebenwirkungen haben außerhalb deines eben Wirkungsbereiches, den du intendierst.

[1:35:39] Tja, keine Ahnung. Also ich wurde halt vom CSS-Nesting, ich hab halt eben damals, als ich so noch jung und naiv war, gedacht so, ah, das ist meine HTML-Struktur, ach, guck mal hier, ich hab hier CSS-Bread-Prozessoren, da kann ich das ja eins zu eins nachbauen.
Und dann hab ich das geschrieben und dann war das eine ziemliche Katastrophe. Mhm.
Und dann hab ich's halt so eingelassen und dann hab ich's halt seither auch nicht wirklich vermisst und deswegen, das meinte ich mit, ich bin gespannt, wie ich das haben möchte. Ja.
Ja, da bin ich auch gespannt drauf. Genau, aber wir können ja auch hier noch mal das Zepter weiterreichen an unsere Hörerinnen und Hörer.
Ihr könnt ja mal erzählen, ob ihr Add Layer und Nesting und vielleicht sogar schon Add Scope benutzt.
Ich glaube, das kannst du ja in Chrome benutzen schon, ne?
Das weiß ich nicht. Es gibt auch Polyfills und Workarounds. Ich hab mir seinerzeit ja auch ein Custom Element geschrieben, das nachgerüstet hat, indem es einen zufälligen CSS-Namen generiert hat.
Okay. Das zählt ja wahrscheinlich auch, weil obwohl es die Implementierung nicht ist, ist es ja zumindest die gleiche Idee.
Aber das ist halt eben auch alles so ein, ja...
Ich glaub, das ist halt eben das, was auch viele Probleme lösen würde, mehr noch als Layering und Nesting und Ähnliches. Ja, das denke ich wohl auch.

[1:37:02] Jo, und dann haben wir es eigentlich so, was so die tatsächlichen Properties angeht.
Genau, können wir jetzt ganz zum Schluss einen kleinen Blick noch in CSS Usage reingucken. Also,

CSS Usage

[1:37:19] da gibt es zum Beispiel die Die Abfrage, wofür benutzt man CSS am meisten?
Da ist irgendwie so ganz, ganz weit vorne, mit großem Abstand, irgendwie bauen Menschen, die zumindest hier geantwortet haben, Web-Apps, keine normalen Seiten, genau. Und relativ viele bauen Design-Systeme.
Ganz wenige sogar Printed Documents. Ganz wenige, ne? Mhm.
Also, und ich muss heute noch sagen, Printed Documents fast halb so viele wie CSS Art and Illustration.
Mhm.

[1:37:57] Ja, das ist ja das, womit ich ein bisschen zu tun hatte, als ich so meinen animierten Code-Generator gebaut habe.
Und da merkt man halt eben auch so, CSS programmieren ist halt auch immer noch eine ziemliche Qual.
Also so das CSS Object Model ist halt einfach so limitiert und umständlich, dass der einfachste Weg immer noch darin besteht, einfach einen Haufen String zu erzeugen und das zu konkatenieren.
Das ist immer noch der beste Weg, der da zum Erfolg führt.
Und so richtig gute Tools, so richtig gute JavaScript-APIs zum CSS-Programmieren gibt's nicht.
Und wenn's Libraries gäbe, die das irgendwie machen, also jetzt nicht so sehr im Sinne von, die das dann irgendwie zu Laufzeit interpretieren, sondern mehr so eine Art Query-Builder aber für CSS.
Mhm.
Ne, die halt zum Beispiel auch so Sachen wie Scoping ja bequem ausdrücken könnten, indem man dann sagt, es gibt hier irgendwie so eine Scope-Klasse, und dann gibt's da drin diese ganzen Untermembers, und dann wird das automatisch zu Selektoren verglust.
Und dann muss man halt nur gucken, dass man sein HTML so baut, dass das dazu passt.
Also kostenlose Open-Source-Projekt-Idee des Tages wäre das so ein Query-Builder für CSS.
Der würde, glaube ich, seine Anwender finden, weil, ich meine, um einfach nur eine Vektorgrafik irgendwo hinzumalen, CSS ist eine Option, es muss nicht SVG sein.
Ja, aber...
Ja, weder das eine noch das andere ist... einfach.

[1:39:16] Die eierlegende Wollmichsau ist keins von beidem. Man wird feststellen, das Feature aus SVG wär jetzt gut, und dieses Verhaltensweiser aus CSS würde mir jetzt in SVG sehr gut tun.
Mhm. Ja, die reagieren ja schon ein bisschen. Oder konvergieren besser gesagt, nicht divergieren. Falsches Wort.
Da schwappt ja das eine zum anderen über. Und du kannst ja sehr viel CSS in SVG benutzen. Genau. Ja.
Aber dennoch, am Ende ist es dann eben nicht deckungsgleich.
Nee, echt nicht. Und ich finde auch, dass das mentale Modell und das generelle Herangehen dann doch schon arg unterschiedlich ist.
Also, es fühlt sich nach dem größeren Delta an, als es am Ende ist.
Aber dass es nicht so groß ist, bringt einem nicht viel, wenn man aus seinem Kopf nicht raus kann.
Ja.

[1:40:09] Genau. Dann haben wir hier noch Browser Incompatibilities. Also quasi Dinge, die Leute noch nicht anfassen möchten,

Browser Incompatibilities

[1:40:17] weil sie Angst haben, dass Browser sie nicht alle gleich gut oder vielleicht auch manche gar nicht unterstützen.
Genau, das haben ganz, ganz viele oder die meisten Has gesagt.
Was dann an Firefox liegt wahrscheinlich. CSS-Nesting, also da glaube ich, dass das alle, hatte ich ja gesagt, mittlerweile können, aber... Oder vielleicht ist es auch erst der nächste, Safari, Snow Tag Preview.
Genau, aber es gibt eben dann auch einfach noch ein paar ältere Browser und da ist halt echt das Problem, ich meine, wenn so ein Hast Selector mal nicht geht, dann ist es wahrscheinlich nicht ganz so dramatisch, aber wenn das Nesting gar nicht geht, dann hat man gar keinen CSS im Zweifelsfall mehr.
Ja, ein Hast Selector kannst du zumindest so einsetzen, dass, wenn es nicht geht, es nicht eine Vollkatastrophe wird.
Nesting, schwierig. Ja, genau, Container-Querys, ich glaub, das ist auch Firefox, oder?
Der hat die jetzt aber, oder? Aber der war auf jeden Fall länger, ging das noch nicht bei dem...

[1:41:25] Was hatten wir in der letzten, in Teil 1 hatten wir das schon rausgefunden, dass das mittlerweile alle können, und der Firefox einfach nur später dran war.
Ja, ja, der ist ja mit seiner Versionsnummer dem Chrome etwas hinterher, ne?
Ne, ich glaube, die sind mittlerweile gleich auf.
Okay, dann können sie es nämlich beide gleich, weil beide haben ihr grünes Häkchen bei 105. Okay.

[1:41:52] Beziehungsweise bei 111, bei Style Queries for Custom Properties.
Ja, da kannst du quasi, also kannst jetzt ja, du kannst mit den Style Queries derzeit aber nur Custom Properties des Eltern-Elements abfragen.
Und darauf basierend dann sozusagen einen FL-Switch schreiben.
So was wie, weiß nicht, if bin-strich-background-color gleich schwarz, dann color white.

[1:42:37] Wenn du halt nicht weißt, in welchen parent-container du geworfen wirst und du den eben dann abfragen möchtest, was er denn für eine Hintergrundfarbe hat, und du dann eben eine helle oder eine dunkle Schriftfarbe nimmst oder so.
Finde ich eigentlich ganz gut. Und dann gibt's ja auch bald auch hier State Queries.
Und die erste, die sie implementieren, ist Sticky. Also der Sticky State. Wenn du Position Sticky hast, und dann du eben Dinge tun willst, wenn dieses Ding Sticky wird.
Das haben sich ja die Leute auch schon ganz lange gewünscht.
Hm. Ja, stimmt. Das macht auch Sinn, dass man das hat.
Ja, aber da ist noch ist noch einiges zu tun.
Ja, langweilig wird's nicht. Es wird halt immer umfangreicher. Das CSS. Ja.

[1:43:33] Ja. Ich würde sagen. Könnten könnten es jetzt könnten hier den Sack zumachen.
Ich wollte gerade sagen, also wir könnten jetzt noch die letzte Frage so stellen, so irgendwie so.
Was so deine Zufriedenheit mit CSS angeht.
Also wir haben ja hier von Very Unhappy bis Very Happy zu No Answer, was ich jetzt in diesem Fall einfach mal nicht erlauben würde.
Antwortmöglichkeiten.
Der Zustand von CSS-Shape, was sagst du?
Also ich bin damit schon sehr zufrieden. Also mindestens happy, vielleicht auch very happy.
Ich glaub, ich denke immer, ich bin very happy.
Und dann kommt noch irgendein neues Feature, wo ich denke, oh, äh, das ist ja mal cool.
So was wie scroll-driven animations oder so was.

[1:44:28] Dann denk ich, vielleicht war ich vorher auch doch nicht very happy, sondern nur happy, weil jetzt bin ich ja very happy.
Weil wenn ich vorher schon very happy gewesen wäre, was bin ich denn dann jetzt?
Hyper happy?
Genau, aber im Großen und Ganzen, ähm, doch bin ich schon ziemlich, ziemlich zufrieden damit.
Ja, mich würde das unterschreiben. Also, sicher gibt's immer was, immer ein neues Gadget.
Da wird immer etwas Neues um die Ecke kommen. Das ist in CSS so, das ist in anderen Lebensbereichen auch so.
Und das ist auch okay. Aber wenn ich jetzt so denke, ich will irgendwie so meine bescheidenen Ideen irgendwie umsetzen, dann findet das Leben ja wirklich meist einen Weg.
Und wenn irgendwie was nicht geht, ist es ja schon so, also geht's mir zumindest so, das sind dann halt wirklich irgendwelche Nice-to-haves, die mir jetzt persönlich fehlen, wie irgendwie der Custom-Selector oder irgendwelche Dinge, mit denen ich da meine Animationsfantasien irgendwie genauer ausleben kann.
Selbst ad-property würde ich sagen, es wäre echt sehr schön, wenn's das gäbe, aber ist das strikt notwendig, bin ich unglücklich, weil's nicht da ist, lässt sich ganz klar mit Nein beantworten.
Und oft ist es so, dass es dann irgendwelche krassen Menschen gibt, die die Features eben völlig unorthodox einsetzen und damit eben sozusagen das möglich machen, von dem man dachte, dass das eben nicht geht.

[1:45:55] Da ist zum Beispiel auch hier einer, der nutzt diese scroll-driven animations.
Da kannst du ja quasi auch eine Animation steuern auf Basis der Sichtbarkeit von Dingen.
Und der benutzt das zum Beispiel um...

[1:46:16] Also, der hat einen Container, in dem ist Schrift drin, und dann animiert er die Schriftgröße so lange, wie sie eben nicht zu 100 Prozent sichtbar ist.
Indem er eine scroll-driven-Animation an den Elterncontainer koppelt.
Und wenn die Schrift zu groß ist, dann hat der auf einmal einen Scroll bei der Container.
Mhm. Weil sie zu weit läuft.
Und die Sichtbarkeit der Schrift ist dann eben, sagen wir mal, mal 95 Prozent nur noch, fünf Prozent sind eben dann zu viel.
Und diese Sichtbarkeit, die wiederum koppelt er an die Font-Size, sodass dann quasi in der Loop wiederum die Font-Size, die ja an den, quasi an diese Sichtbarkeit gekoppelt ist, auf 95 Prozent schrumpft. Dadurch ist das Ganze aber wieder voll sichtbar.
Und er kann quasi die Schrift damit auch genau Auch genauso breit skalieren immer wieder Elterncontainer.
Ja.
Ohne Containerqueries zu benutzen.

[1:47:24] Ja, einfach nur mit intelligenter Anwendung der vorhandenen Technologien. Ja.
Aber das... Man muss ja auch sagen, zum State of CSS gehört ja mittlerweile auch so die Spezifikationsqualität.
Da muss ich jetzt leider wieder mal den Speck nur ein bisschen raushängen lassen.
Aber das Tolle ist ja wirklich, dass man erstens so was machen kann.
Und wenn man sowas nicht machen kann, weil es in irgendeinem Browser nicht funktioniert, ist es ja mittlerweile wirklich total trivial festzunageln, das sollte gehen.
Hier ist das Dokument, wo festgeschrieben ist, das müsste funktionieren.
Hier sind die anderen Browser, an denen ich ganz bequem in so Online-Sandboxes mir eine Demo bauen kann und zeigen kann, die anderen können das.
Der Spezifikationstext sagt, das sollte gehen.
Euer Browser macht das nicht. Repariert mal. Ja, und das ist halt für die dann auch gut zu fixen.
Also weil die einfach genau wissen, gegen was sie testen müssen.

[1:48:15] Ja, also mein persönlicher Feldzug für irgendwelche Transition-in-Keyframes-Kram oder so, ich versteh ja nichts von dem, was die dann da schreiben, so unter sich die Developer, von wegen, ja, da muss man irgendwie diesen Struct irgendwie anpassen und C++ BlankX.
Also die Browser-Reality ist noch mal größer und komplizierter als das, was wir jetzt in den Spezifikationen lesen.
Ziemlich Zielklar, zumindest wir aus unserer Perspektive können sagen, so soll es aussehen.
Und das gehörte halt auch zu. Und das war ja früher auch nicht der Fall.
So CSS2 irgendwie sowas? Ja. Ups, CSS2.1.
Ist das ein Fortschritt? So mittel.
Ja. Die Zeiten sind vorbei. Das ist alles schon sehr, sehr gut, da wo es angekommen ist. Und das kommt, glaube ich, ganz gut auch mit seiner Legacylast klar und schreitet klar voran.

[1:49:05] Passt schon. Good times ahead. So sieht's mal aus.
Und good times auch jetzt schon, würd ich sagen. Ja, auf jeden Fall.
Cool. Ja, hat auf jeden Fall, äh, Spaß gemacht, hier durchzugucken. Durch die ...
Es ist vor allen Dingen sehr erhellend, was ich auch noch alles hier so neben den Shownotes notiert habe.

[1:49:29] Dafür muss ich mir noch mal angucken. Ja. Das ist schon ... ja.
Ich weiß ich mach jetzt quasi die sache rund und verweise drittes mal auf den egalia podcast da war nämlich der andreas kling da das ist der typ der hat, der früher mal für apple gearbeitet und jetzt sein eigenes betriebssystem.
Geschrieben einfach wie man das so macht aber natürlich ohne irgendwelche Teile von irgendwo zu verwenden sondern hat alles selber geschrieben also nicht alleine aber das ist das Lady Bird Ding genau und der hat auch diesen den Lady Bird Browser rausgebracht der auch ein neuer Engine ist und der hat nämlich also sind auch wieder Das ist ein super spannender Typ und eine tolle Folge.
Und der hat aber auch gesagt, was du gesagt hast, nämlich, dass CSS, also, dass ein Browser CSS beibringen, einfach einem, in Anführungszeichen, sehr leicht gemacht wird, durch die hohe Qualität des Specs und eben die große Anzahl Tests, die es für alle Features in CSS gibt mittlerweile.
Ja, gibt ja die offiziellen Test-Repositories und sowas alles, Das ist schon echt viel wert.
Ja.

[1:50:48] Ja, wunderbar. Dann, genau, laden wir euch noch mal ein, gebt uns Feedback zu den Themen, die wir besprochen haben, zu den strittigen Fragen.
Erzählt mal, was eure Meinung ist, oder was euch vielleicht auch interessiert.
Und das alles könnt ihr uns natürlich gerne twittern, Xen, Tuten, aber am allercoolsten ist es, wenn ihr einfach mal bei uns im Community Slack vorbeischaut.
Und all das findet ihr verlinkt auf unserer Webseite.

[1:51:21] Die übrigens nur mit Element-Selektoren gestylt wird, glaub ich.
Ja, sehr gut. Und die jetzt demnächst, ich glaube, den Show-Note-Längenrekord bricht, wenn dieser Podcast hier verschriftlicht ist.
Oh Gott. Ja, das brauchen wir.
Wir brauchen auch mal so einen Worst-Case-Test.
Also nicht jeder Content ist immer hier Wunschkonzert.
Ja, wir können nämlich ja die ganzen Links hier droppen und dann irgendwie sagen, ja, findet selbst in den ganzen Igalia-Podcast-Folgen den raus, den wir meinen, das geht doch nicht.
Ja, viel Spaß. Oder scrollt durch das Transkript.
Ja, das kann man natürlich auch machen. Das ist überraschend gut, das finde ich. Ja, finde ich auch.
Also selbst wenn wir da Leute haben, die irgendwie, sagen wir mal, etwas deutlichere Akzente an den Tag legen, ist das überhaupt gar kein Problem für die.
Macht ja voll gut.
Ja, du meinst so diese rheinische Düsseldorfer Singsang, ne?
Ja, ganz genau. Also, ja, Düsseldorf ist ja super. Das ist ja quasi Hochdeutsch. Aber weißt du, so was die Kölner so von sich geben?
Puh, schlimm. Ja. Oder die Hesse.
Ja, das ist ja schon quasi...

[1:52:34] Das ist ja schon Ausland. Also, weißt du, für mich fängt ja eh Bayern irgendwo ab Hamburg an und wenn wir dann über Hessen reden, dann ist es gleich ganz vorbei.
Alles Süddeutschland da unten.
Das schneiden wir raus. Nein, machen wir nicht. Also, dann bedanke ich mich bei dir.
Ich habe zu danken. Es war wieder ein großes Vergnügen und extrem viel Input hab ich mitgenommen.
Ja, hat Spaß gemacht. Dir einen schönen Abend. Darauf noch ein Cidre und ein kleines Altbier.
So machen wir das. Danke fürs Zuhören. Tschüssi. Tschüss.

[1:53:06] Music.