Revision 500: Yolo

2023, Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner und Christian Schaefer
Working Draft
https://workingdraft.de/

Edit Transcript Remove Highlighting Add Audio File
Export... ?

Transcript


[0:00] Aber die Nächste, die für mich grundlegend meinen CSS-Schreibstil geändert hat, waren eben die Custom Properties.
Oh Gott, ist das verwirrend, wenn man das versucht zu sagen, als zu schreiben.
Nimm ein Element, das auf ein Element folgt, das auf ein anderes Element folgt, das auf ein anderes Element folgt. Und so kannst du eigentlich unendlich im Dom davor und zurückgehen.
Wobei man das auch ganz gut mit deinem Cursortrick von deiner Lighthouse-Seite machen könnte.
Das stimmt. Der Böck Offset, der berühmte. Ja, genau.

[0:30] Music.

[0:55] Revision 568, Diese Revision von Working Draft wird euch präsentiert von Midwald.
Midwald ist der Hoster für Agenturen und Freelancer.
Solltet ihr mehr als ein einzelnes Webprojekt zu betreuen haben, dann könnte Midwald euer Gamechanger sein. Ich erinnere mich am mit Grausen an meine eigene Freelancer-Vergangenheit, als ich für 10 Kunden bei 20 verschiedenen Hostern mit 30 Logins zu jonglieren hatte.
Bei Midwald hingegen ein Login für alle Projekte.

[1:24] Wahlweise für den besucherbasierten Agenturserver oder den nerdig selbstkonfigurierten Spaceserver.
Mit allen Features, die ihr euch nur wünschen könnt. Vom Shop-System-Installer über SSL-Zertifikate, bis hin zum ausgefuchsten Rechte- und Rollensystem. Ihr wisst schon, für das Management eurer zahllosen Projekte unter einem Dach. CO2-neutral und DSGVO-konform. Und sollte es mal haken und, ihr den Support anrufen, dann kriegt ihr echte Nerds ans Rohr. 24-7 an 365 Tagen im Jahr.
Das alles könnt ihr haben, wenn ihr auf mitwald.de.workingdraft vorbeischaut.
Das schreibt sich mittwald.de.workingdraft.
Alle Infos zu mitwald findet ihr natürlich auch in den Shownotes zu dieser Revision.
Wir danken mitwald für die Unterstützung von dieser Revision von Working Draft.
Wir sind heute zu dritt. Aus dem Team hätten wir da einmal die Vanessa. Hallo!

Revision 568: 100 Days Of More Or Less Modern CSS

https://workingdraft.de/568/


[2:17] Ich bin der Chep und das bedeutet, dass wir mal wieder einen Gast haben und zwar den Manuel, den Manuel Matusowitsch. Hallo!
Manuel Matusowitsch Hallo! Servus!
Ja, du warst schon mindestens einmal bei uns zu Gast, eventuell sogar öfter. Das letzte Mal war ungefähr vor einem Jahr.
Genau, ich denke mal, unsere Hörerinnen und Hörer erinnern sich womöglich an dich, aber für die, die jetzt irgendwie neu eingestiegen sind, Vielleicht magst du nochmal sagen, wer du bist und was dich so umtreibt und vielleicht auch, was sich seit letztem Jahr geändert hat.

[2:49] Ja, mein Name ist Manuel Matusowitsch und ich bin Frontend-Developer, Accessibility-Auditor und Consultant.
Das ist ein fürchterliches Wort, aber Unternehmensberater ist noch viel schlimmer.
Aber sowas mache ich halt ein bisschen. Und ich bin ursprünglich aus Wien, lebe in Graz und beim letzten Mal, weil ich bin schon das dritte Mal zu Gast, beim letzten Mal habe ich gesagt, das ist so lang her, dass ich nicht mehr weiß, was ich damals erzählt habe und mich auch nicht trau, nachzuhören, weil es sicher ganz fürchterlich ist.
Die letzte Folge habe ich jetzt teilweise nachgehört. Da haben hauptsächlich die Vanessa und ich über HTML und HTML-Validierung gesprochen, weil das war nämlich kurz nach der Beyond-Telerant letztes Jahr.

[3:35] Ja. Genau. Was mache ich so? Ich bin, ja, Frontend-Developer hauptsächlich, aber mache auch so Kunden-Workshops und eben auch Beratung, Hauptsächlich rund um das Thema Barrierefreiheit und manchmal auch rund um das Thema CSS und CSS-Architektur und solche Dinge.
Aber hauptsächlich sitze ich seit fünf, sechs Jahren circa auf der Barrierefreiheit.
Ja, das ist ja auch nicht schlecht. Also da kann man ja auch nicht genug Experten haben eigentlich.
Da hatte die EIC kürzlich eine sehr schöne Folge mit Svenja von Accenture.
Ja, stimmt. Genau, vor sechs Wochen.
Nee, die war auch super. Genau. Da konnte man auch noch mal ein paar Sachen so fragen, die man immer mal wissen wollte.
Voll. Genau, also die verlinken wir natürlich auch und geben noch mal eine Höherempfehlung ab.

[4:30] Genau, ich wollte nur sagen zu dem Consultant, genau, ich heiß ja auch so, also ich nenn mich ja auch so, das ist immer so ein bisschen nebulös.
Das hilft auch hier beim Finanzamt, um sozusagen weiter Freiberufler sein zu können, weil du ja im Prinzip als Consultant, dann bist du ja jemand, der sagt, was man machen muss, so fühlt sich das auf jeden Fall an.
So, das und das und das ist falsch, das müssen wir so machen und so.
Und ah, okay, das ist freie Arbeit, das ist nicht fremdbestimmt, so, alles klar, du bist Freiberufler, passt. Passt. So.
Ja, das Problem, das ich noch hab mit dem Begriff, ist, wenn man vorher Developerin war oder ist, noch immer irgendwie, und dann sagt, ich bin jetzt Konsultant, dann ist es so, als hätt ich das T-Shirt gegen das Hemd ausgetauscht.
So, als würd ich jetzt irgendwie, keine Ahnung, mit dem Koffer irgendwo hingehen und sagen, so, jetzt reden wir über Code.
Also McKenzie-mäßig kommst du dann zur Tür rein, ne? Ja, genau, genau.
Ja. Ja ich meine das andere wäre Experte, das klingt irgendwie auch ein bisschen komisch, also auch wenn es irgendwie stimmt.
Schönen guten Tag Manuel Matusowitsch, Experte.
Und was natürlich auch immer geht, so werde ich ja manchmal geschimpft, du könntest auch der Accessibility-Papst sein.

[5:49] Uh, Papst, ja, das ist mir ein bisschen zu nah am PHP-Ninja.
Ja, okay. Ja, points given.
Oder Frontend-Ninja-PHP-Artisan hat man ja eine Zeit lang gesagt, so wie Lavelle großgeworden ist.
Ja. Vielleicht auch ein Accessibility-Affinitiado.
Wäre ja auch eine Möglichkeit. Mhm. Sehr gut. Genau, aber heute wollen wir gar nicht so viel, glaub ich, da über Accessibility reden.
Also machen wir natürlich auch, wo sich's anbietet.

[6:18] Unser aufhänger ist eine blog post serie die du irgendwann letztes jahr mal sozusagen losgetreten hast und dich selbst glaube ich damit auch ein bisschen gefoltert hast nämlich du hast gesagt hey ich blogge jetzt jeden tag und schreibe jeweils ein post zu irgendwas coolen in css.
Genau, noch ein bisschen konkreter, nicht nur irgendwas coolen, sondern irgendwas neuem coolen.
Also, oder fast. Also ich würde sagen so 95% sind, oder 90% sind der heißeste neue Scheiß und die restlichen 10% sind nicht so heiß, aber halt Dinge, die ich dann nicht gewusst habe oder nicht so richtig gewusst habe.

[7:05] Und der Hintergrund ist der, dass ich damals, als ich noch nicht suspended war auf Twitter, noch Zugang hatte, als man mich nicht wegen meiner unglaublichen, kritischen Hot-Takes gesperrt hat.
Da habe ich irgendwie so durch die Timeline gescrollt und habe dauernd so Leute wie den Brahmus gesehen und die Stephanie Eccles und den Ahmad Jadid und die Michelle Barker und die Youna und mehr noch immer, die ständig irgendwie so CSS posten, dass ich nicht kannte.
Also ich habe das angeschaut und habe gedacht, was zur Hölle, wovon redet ihr da?
Also ich schreibe diese Sprache seit 15 Jahren und ich kenne mich echt gut aus, würde ich sagen, aber ich habe keine scheiß Ahnung von, worüber ich spreche. Da habe ich einfach draufgekommen, dass ich das ganze neue Zeug voll verpasst habe. Und deswegen habe ich gedacht, okay gut, damit ich das irgendwie ein bisschen forciere und mich selber unter Druck setze, mache ich das öffentlich und der große fehler oder weiß nichts oder die Der große Gewinn beides irgendwie, so in der Richtung, war einfach die Idee, dann einen Blogpost zu schreiben jeden Tag, was halt relativ viel ist.
Wenn ich mir nur so einen Kod-Schnipsel raushau, dann geht's, oder wenn ich mich, weiß nicht, in einer halben Stunde hinsetze und was durchles, dann ist es nicht so wild.
Aber der Blogpost, der dauert dann schon ein bisschen.
Gleichzeitig ist aber der Output dann halt extrem gut. Einerseits für die Leute, die das lesen, und andererseits aber auch für mich der Input und Output, ja.

[8:31] Du gibt ja viele, die bloggen ja auch, um selber nochmal nachzulesen in der Zukunft.
Also sozusagen für das zukünftige Selbst.

[8:43] Ja, total gut. Ich blogge meistens nur, wenn ich irgendwas nicht kann.
Okay. Also ich blogge meistens nur, wenn ich irgendwas nicht weiß.
Das ist meistens wirklich Lernen. Also ich tu dann so, ich bin ja Konsultant, ich bin Experte.
Ich tu dann so, als wüsste ich die Dinge. Aber tatsächlich lerne ich einfach beim Schreiben.
Aber natürlich halt mit sehr viel Recherche, Eigenrecherche.
Ja. Ja, super. Also, ich wollte sagen, ich blogge ja total wenig. Also, ich könnte theoretisch, ich habe ja auch eine Webseite und tralala, aber ey, bloggen oder… Ja, aber wenn, dann ist es so ein Lesedauer-45-Minuten-Ding wie dieses… Was war das letzte Mal über die Browser, über den EA irgendwas? Was war das?
Ja, deswegen mache ich das ja nur alle zehn Jahre dann.
Ja, genau. Also, es muss immer ein Browser dafür kaputt gemacht werden.
Ja, aber es fällt mir halt nicht so leicht, darum bin ich auch wahrscheinlich mehr hier in diesem Audio-Medium unterwegs.
Genauso die Schreiberei, das ist anstrengend. Ja, ganz viel. Ich tu mir auch schwer. Ich tu mir vor allem mit dem Englischen schwer.
Und es hat nur deswegen funktioniert, weil ich es einfach kurz gehalten habe.
Also einfach jeder Post ist jetzt nicht irgendwie, also keine Ahnung, ein Artikel über Container-Querys, sondern ein Artikel über, weiß nichts, was sind Container-Querys, fertig, ohne jetzt irgendwie im Detail darauf einzugehen, wie sich der Browser verhält oder, keine Ahnung, nur eine einzelne Eigenschaft und nicht gleich alle Eigenschaften, weil sonst hätte es eh nicht funktioniert.
Ich habe das Gefühl, ich muss euch daran erinnern, dass es Chachipiti gibt.

[10:11] Was kann man damit machen? Ach so. Naja, du kannst da durchaus, das ist ja die große eine Frage, die hatten wir ja auch mit Hans und Peter besprochen, wie gefährlich das jetzt sein kann, was jetzt gerade auch Plagiate und sowas angeht, also jetzt nicht unbedingt nur in die Code-Richtung, sondern auch irgendwie eine Thesis zu schreiben, die Masterarbeit, Bachelorarbeit, eine Doktorarbeit abzugeben und aber vor allem auch Blogartikel.
Weil, was ich schon ausprobiert hab, ist, dass ich Stichpunkte reingeschrieben hab und gesagt hab, mach mal das zu einem professionell klingenden Artikel draus.
Der ist nirgends veröffentlicht, ich hab's nur so ausprobiert.
Ich hab ziemlich schnell festgestellt, welche Schwächen es durchaus alles gibt.
Also, gerade das Hauptmerkmal, worauf ich richtig hinaus wollte, kam nicht so ganz raus. Das war viel Lagi-Fari-Text, so wie ungefähr, wenn ich halt auch durch zehn Stack-Overflow-Artikel oder, keine Ahnung, DevTO-Artikel klicken würde, wo ich mir auch denke, das kommt noch nicht richtig raus.
Aber man hat ja schon, das ist ja gerade das Ding von ChattyPetitee, mit dem Dialogverfahren, dass ich sagen kann, nee, mach das mal klarer, stell das mal mehr raus.
Das ganze Vorgedöns brauchst du nicht, das weiß eh schon jeder.

[11:18] Und dann kann was Gutes rauskommen. Allerdings kann man natürlich auch sagen, hier ist mein Text, schreib das mal in schönes Englisch, so machst du dich zumindest für E-Mails.
Also, wenn ich jetzt auch eine E-Mail bekomme, keine Ahnung, bewirbt sich jemand bei uns auf iOS.
Ich so, wir haben gar keine iOS-Stelle, da schreibe ich nicht mehr selber drauf.
Da sage ich, Chativity, schreibt mal kurz, dass wir die Stelle gar nicht erst haben, in schönem Englisch. Dankeschön, kopiere ich, schreibe meinen Namen drunter, dann fertig.

[11:44] Ja. Gegenargument wäre, dass jemand, der auf eine Website geht, jemand, der RSS liest, also der so, oder auf Social Media ist, dort zu einem Link kommt, der so Inhalte konsumiert, der will von der Person das lesen, würde ich vermuten.
Weil wenn das jetzt nicht so der Fall wäre, wenn ich jetzt nur die Information haben möchte, dann könnte ich einfach auch, Chat, GPT oder was auch immer, irgendeine ERA-Geschichte fragen, wie funktioniert das?
Und der sagt mir das dann.

[12:16] Also ich glaube, dass diese, dass die weitere Entwicklung des Menschlichen noch mehr herausstreichen wird, dass es eher in die andere Richtung geht, dass man noch bewusster, vielleicht ohne die Maschinen schreibt, Damit es halt einfach irgendwie klar ist, es kommt jetzt von den Menschen und nicht eben so ein Mischmasch aus, wie du sagst, Stack Overflow und sonstigen was.
Aber natürlich, es würde natürlich funktionieren und ich glaube, dass so AI relativ viel von dem geschafft hätte.
Nur wozu dann das Ganze? Also wozu mache ich das dann?
Also es geht nicht darum, dass ich publiziere, weil ich habe keine Werbung auf meiner Website, also ich generiere damit keine Kohle.
Ganz im Gegenteil, ich habe jetzt Netlify Geld überweisen müssen, weil ich zu viele Anfragen hatte.
Dann ist halt die Frage, wozu das Ganze?

[13:07] Also der Lerneffekt ist größer beim Schreiben, das wollte ich damit sagen.
Das ist korrekt, das wollte ich gerade noch dazu einwerfen.
Wenn es jetzt aber natürlich darum geht, man schreibt die Sachen auf, um sich vielleicht gar nicht für andere, sondern um das für sich selber dann festzuhalten und nachzulesen, das geht natürlich wahrscheinlich verloren, wenn man es nicht selber schreibt.
Klar, ich denke, dieses Englische, check mal kurz das Englische ab, hat man jetzt gut, das hat man auch mit Grammarly und anderen Tools.
Aber ist vielleicht noch ganz nett. Ich würde aber gleich mal zu deinem Tag 1 einsteigen jetzt.
Das war Custom Properties und ihre Fallbacks.
Und die Syntax, die du da auch schön vorstellst. Und ich glaube, Chachi Pitti hatte übrigens diese Seite überhaupt nicht so schön hinbekommen mit diesen Code-Beispielen und Vorschau-Demos.
Aber dein Beispiel ist hier, du hast die Background-Color.
Bestimmt mit dem VAR war für die Custom Property und eine Custom Property, die dann nicht gesetzt ist und hat als Fallback einen Hexcode für eine schwarze Farbe.
Ich würde gerne mal kurz nachfragen nach einem, ob du einen Use Case für uns hast, wann ich zum Beispiel Fallbacks hätte. Wann kann es denn passieren, dass diese Custom Property jetzt tatsächlich fehlt?

[14:24] Also, ich würde es nicht unbedingt empfehlen, aber ich werde ganz kurz nochmal wiederholen, was da im ersten Beispiel zu sehen ist, also es ist einfach ein Div und da ist seine Background Color und da ist diese var Function, der erste Parameter ist eben eine Custom Property, die es nicht gibt und der zweite ist die schwarze Hintergrundfarbe.
Und es kann sein, dass du das genau dasselbe gerade gesagt hast, nur ich habe schon begonnen nachzudenken, deswegen habe ich nicht fertig zugehört, sorry.
Und die Möglichkeit wäre jetzt, ich könnte jetzt ein Media Query haben oder ein Container oder was auch immer und dann könnte ich sagen, ab einer Mindestbreite von 400 Pixel wird die Variable gesetzt mit dem Wert rot. Das heißt, wenn ich unter 400 Pixel bin, nimmt also das schwarze und wenn ich über 400 Pixel bilden, dann würde ich sozusagen die Variable befüllen.

[15:07] Das wäre eine Möglichkeit und ich habe das teilweise auch schon, ich habe das mal in einem Artikel gemacht, weil ich klug wirken wollte, weil ich das eben für WebDev geschrieben habe und da bin ich draufgekommen, dass das irgendwie gar nicht so lesbar ist.
Also im Nachhinein würde ich das wieder ändern. So wie ich es jetzt meistens mache, ist es, dass ich einfach sage, BackgroundColor ist, var minus minus bg zum Beispiel und dann setze ich die Variable einmal und dann im Image Query überschreibe ich sie nochmal.
Also es ist einfach wirklich einmal explizit Sets, also es ist mehr Geschriebenes irgendwie, also eine Zeile mehr, aber es ist für mich viel lesbarer.
Ja, also ich dachte, das wäre für mich hier niemals gekommen.
Es schaut sehr smart aus.
Ich glaube, was ich bei uns gemacht habe, ist, dass wir vorgearbeitet haben, falls Kunden Kundinnen, das ihren eigenen Farbstil haben möchten.
Sozusagen dann auch über Custom Properties gesetzt, und wenn die Custom Property halt nicht gesetzt ist, das fällt mir aber jetzt erst auf, wäre das smart gewesen, dass man das so hätte machen können, aber ich hab natürlich alle Fallback Colors, hatte ich ja eh schon da stehen, weil die hatte ich ja schon mal alle definiert, und die habe ich natürlich auch irgendwie mit einer, mit einem Custom Property Namen, ich hoffe, ich habe mir die richtigen Begriffe genannt, aber, stimmt, hätte ich damit auch machen können, weil man kann die auch verschachteln, wie du auch in dem Blog-Artikel beschrieben hast, also ich kann irgendwie die erste var-Funktion und der fallback ist auch wieder eine var-Funktion mit Dungeon in dem fallback.

[16:35] Genau. Also, das hätte ich jetzt auch das Beispiel gebracht, theming wäre eben genauso ein Beispiel und es könnte auch sein, dass die Variable über JavaScript gesetzt wird oder sonst irgendwie, das könnte auch mal eine andere Demo sein.
Ja, gut, dann weiß man nie, was passiert. Voll. Oder es kann genauso auch sein, dass du zum Beispiel, du hast eine, weiß ich nicht, zum Beispiel einen Web-Component Und die hat ihre eigenen Styles und das ist alles im Shadowdom und du kannst nichts ändern und bla bla.
Aber was halt schon geht, ist, dass du von außen hin die Variablen, die Custom-Properties innerhalb einer Web-Component veränderst.
Und so könntest du sozusagen einen Platzhalter schaffen für eine Custom-Property, die dann von außen befüllt werden kann oder verändert werden kann.
Das habe ich jetzt relativ viel gemacht, weil wir bei einem alten Arbeitgeber, bei einer alten Arbeitgeberin, bei der Stadt Wien, setzen wir jetzt auf Web Components und machen eine White Label Lösung, die dann einfach gestylt werden kann über Custom Properties.
Das heißt, wir geben eine CSS API frei.
Das ist einfach nur ein fancy Ausdruck für ein paar Custom Properties, die man verändern kann, aber verkauft sich besser. Und so erlauben wir es dann, diese White Label Lösung zu themen.
Das ist wahrscheinlich der Unterschied zwischen Developer und Consultant.
Richtig. Ich hatte irgendwelche Begrifflichkeiten rumgestutzt.
Wir waren da so Custom Properties, ganz einfach, so kann man ändern.
Ich werde mir jetzt merken, die CSS-API.

[18:00] Genau, genau, genau, genau. Wobei, ähm, ja, eigentlich müssten wir jetzt irgendwas mit AI machen.
Also, es ist eigentlich, ähm, CSS-AI.
Nicht mehr eine API. API ist veraltet.
Immer AI, so wie damals bei TurboPack, wo man alles in Turbo geprefixed hat.
Einfach pauschal jetzt AI hinten ranhängen.

[18:22] Sehr gut, ja. API-AI. Wie schreibst du es selber? Mal schauen, was passiert.
Ja, also mir fällt zu dem Thema Custom Properties so einfach noch ein, dass die Lea Verou da auch einen schönen Talk irgendwann mal rausgehauen hat.
Also wer da Lust hat, auch richtig steil zu gehen, gedanklich.
Also das ist das nicht steil gehen, das ist einfach nur verzweifeln.
Ja, Wahnsinn. Also das ist der Talk vom letzten CSSD, den findet man auch auf YouTube. Also, es ist... die sind Wahnsinn. Ich hab wirklich... ich hab einfach ein paar Sekunden geschaut, dann hab ich auf Pause drücken müssen, um zu verstehen, was er da gerade gesagt hat, dann nochmal und das geht die ganze Zeit. Also, diesen 45-Minuten-Talk, da hab ich, glaub ich, drei Stunden gebraucht, um mich daran zu schauen. Die ist ganz abgefahren.
Dieses Jahr macht er immer so super coole Talks, genau. Und der ist halt dann eben wirklich nur nur rumnerden über Custom-Properties.
Genau, und sie hat auch beklagt, dass die wenigsten Leute eben ...
Oder viel zu wenig Custom-Properties in Custom-Properties hineinverschachtelt würden.
Und man da irgendwie noch viel mehr rausholen könnte, wenn man das tut.
Genau, dann hat man's halt mit so Konstrukten zu tun, wie du sie da in deinem Post beschrieben hast.

[19:46] Mhm, das ist ja voll spannend auch. Also, ich denke da grad ganz viel drüber nach, weil ich jetzt auch dieses Jahr beim CSS Day einen Talk halten darf, was ich unglaublich furchteinflößend finde.
Man muss sich nur das Line-Up anschauen, weil da alles spricht, das ist ganz, ganz abgefahren. Und bei mir geht es irgendwie, also der Titel von meinem Talk ist, That's not how I wrote CSS three years ago.
Und da geht es darum, dass sich einfach die Art und Weise, wie ich CSS schreibe, grundlegend verändert hat und wie es sich noch verändern wird.
Und eben darauf bin ich draufgekommen, durch das Schreiben von diesem Blogpost.
Also, es gibt ein paar Dinge, die jetzt neu sind oder kommen werden, die die Art und Weise, wie wir CSS schreiben, grundlegend verändern.
Also, wenn ich dir ein paar Beispiele geben darf, so in meiner Karriere, also die ersten Websites, die ich gemacht habe, die waren auch ohne CSS.
Also, da gab es den Font-Tag zum Beispiel oder das BG-Color-Attribut auf dem Body oder das Link-Attribut und ALink und so weiter.
Also, so sehr visuelle Attribute und Elemente. Und dann kam CSS, dann habe ich mir CSS geschrieben und halt irgendwas, irgendwelche Selektoren irgendwie geschachtelt und auf gar nichts geschaut und.

[20:56] Dann kamen dann die Media Theories und das war das erste Mal, dass sich bei mir was grundlegend verändert hat.
Also wenn man dann plötzlich doppelt deklariert hat, beziehungsweise dann auch darauf achten musste, dass man irgendwie nicht zu spezifisch wird, dass man mit den Selektoren ein bisschen besser umgeht, weil es einfach sehr, sehr kompliziert wird, wenn man dann Property-Werte überschreiben muss.
Und dann ist dann irgendwie BAM gekommen und mit BAM hat sich dann wieder alles grundlegend verändert.
Und das war eine super Überleitung von dir, weil ich glaube, die nächste Sache, also ich habe jetzt an ein paar Sachen gesprungen, also es gibt noch mehr Sachen, aber die nächste, die für mich grundlegend meinen CSS-Schreibstil geändert hat, waren eben die Custom Properties.
Also, das CSS schaut jetzt einfach ganz, ganz anders aus. Ich habe es eh vorher erwähnt, dieses Deklarationen von Eigenschaften wiederholen, mache ich eigentlich relativ selten nur noch.
Also, es gibt einmal die Deklaration und dann ändere ich auch nicht nur noch den Variablenwert in einem Media Query oder als Container Query oder wie auch immer und eben auch viel mit diesen, oder nicht viel, aber halt auch teilweise dieser Fallback-Geschichten und das, was ich eben vorher angesprochen habe mit der CSS API, also das CSS schaut bei mir jetzt wirklich sehr, sehr anders aus.
Ist bei vielen Leuten wahrscheinlich schon früher passiert, nur aufgrund der Tatsache, dass ich einfach bei der Stadt gearbeitet habe und wir bis vor, weiß nicht, drei Jahren noch 10% IRL-Fuser hatten, haben wir einfach noch nicht so viel mit Custom Properties gearbeitet und ich habe erst vor kurzem damit angefangen, so richtig.

[22:22] Ja, aber ist bei mir auch tatsächlich so, dass ich die eher spärlich einsetze.
Also, genau, also, ich hatte, hatte, war ja davor auch bei der Rheinischen Post.
Die haben auch noch so, sagen wir mal so, viele Bürgermeister und Ämter, die dann die Zeitung lesen und die dann eben entsprechend auch mit IE noch unterwegs waren.
Genau, mittlerweile ist das nicht mehr der Fall. Also, die haben auch wieder einen Relaunch gemacht und da gibt's keinen IE-Support mehr.
Aber ansonsten ist es, ich bin eigentlich immer relativ konservativ und ich benutze ja auch weiterhin sehr gerne SCSS.
Und dann fackele ich darüber relativ viel ab. Da gibt es ja auch die Möglichkeit, Variablen mit diesem Ausruhrzeichen default zu versehen, also ähnlich wie das bei important ist, nur dass es im SCSS-Umfeld eben bedeutet, also Das ist im Prinzip der Fallback, den du auch bei den Custom-Properties beschrieben hast.
Mhm. Nur eben in SCSS-Land.

[23:24] Ja. Ja, was, ähm ... Wo es halt voll praktisch ist, hab ich gemerkt, weil bei Farb ...
Wenn ich Farben definier, bei Farbdefinitionen, also, wenn ich jetzt nicht grad Text verwende, sondern vielleicht HSL, H-S-L, oder Ähnliches, oder vielleicht irgendwas von dem neueren Scheiß, LAB und LCH, LARP und LCH, dann ist es schon praktisch, wenn ich mit Custom Properties arbeite, weil dann kann ich für jeden einzelnen Wert, für jeden einzelnen Parameter eine eigene Custom Property verwenden und die dann z.B. bei HSL könnte ich dann nur die Leitnisse irgendwie dann verändern.

[24:03] Ich würde kurz gerne einspringen, weil für Freunde frage ich mal kurz nach, was dieses LCH, für die Hörer und Hörer, dann frage ich doch jetzt Vorsichtshörer nach, was ist LCH, was habe ich verpasst?
Das sind so neue Farbfunktionen, ich, das wäre taktisch.
Aber ist HSL nicht mehr das neue coole?
Nein, überhaupt nicht. Das ist sowas von alt veraltet. Also das ist, dass wir jetzt niemand mehr, buh.
Nein, also ich verwende Heizer auf jeden Fall aktuell noch, nur das Problem ist bei LCH oder, LAB oder OK LCH oder OK LAB.

[24:46] Dass die, die sind so heiß, dass sie noch nicht in allen Browsern unterstützt werden.
Und da ist der Schmäh, dass sie nicht den sRGB-Farbraum verwenden, sondern einen, der alle Farben, die irgendwie das menschliche Auge wahrnehmen kann, abbilden.
Und die Bildschirme, die wir haben, die können das jetzt auch schon langsam, deswegen werden die jetzt interessant.
Das heißt, die haben einfach noch mehr Farben, noch sattere Farben.
Aber das ist alles sehr schön beschrieben eben in Tag 93 und in Tag 98.
Der Grund, warum es nicht nur LCH gibt und LAB, sondern dasselbe mit OK davor, ist, dass die anderen beiden nicht OK sind. Also es gibt irgendeinen Fehler beim Blau.
Das Blau driftet ab ins Lila, an einem bestimmten Punkt. Und das OK Lab und das OK LCH, die sind einfach nur eine gefixte Variante davon.
Genau, da heißt es, dass es dann keine Abkürzung, sondern das das meint wirklich dann okay sozusagen. Ja, nicht broken. Das ist großartig, ja, ja, aber dann Tag 98 ist hast du ja ein super Beispiel davon drin von LCH und LCH.

[25:57] Genau, das habe ich von André Sidnik gestohlen, von evilmartians.com, der hat einen sehr, sehr guten Artikel darüber geschrieben.
Es ist noch viel tiefer ins Detail gehend, da habe ich auch die Hälfte wieder nicht verstanden, aber ich glaube, die Grafik war schön, die habe ich kopiert und das Wichtigste rausgenommen.
Und genau, also eben immer beim Blau trifft es ein bisschen ins Lilane ab oder in dieses Violette.

[26:20] Und das ist die okaye Variante. Aber wie gesagt, Browser Support ist jetzt noch nicht so wirklich da, deswegen ist HSL immer noch cool.
Wenn der Browser Support nicht da ist, was passiert denn dann, wenn ich LCH benutze und kann ich dann vielleicht auch einen Fallback angeben? Also, dass ich die dann zuerst oder als zweites benenne, dann die HSL-Lösung?
Ja, so wie man es, weiß nicht, früher bei RGBA auch gemacht hat.
Ich glaube, oder? War das so? Ja. Ja, dass man einfach die Eigenschaft zweimal definiert.
Und das, was man nicht kann, das lasst man einfach und nimmt das Erste.

[26:57] Okay. Ich glaube, die neuen Farbräume, die sind jetzt entweder mit dem aktuellen Chrome oder mit dem, der jetzt Beta ist, kommende Jahr.
Also ... Ja, sehr gut. Genau, Apple kann ja schon seit 2016 hier diesen P3-Farbraum.
Aber der ist auf jeden Fall noch nicht so ...
Der ist noch nicht ganz so krass. Also der ist schon krass, aber nicht so krass wie die eben beschriebenen, genau.
Und was da eben zum einen der Fall ist, ist die Farbmodelle, die die sind dann meistens irgendwie auf eine gewisse Art und Weise gemappt und, Gerade wenn man dann so Farbverläufe macht, dann sieht man die Unzulänglichkeiten der Mappings teilweise, je nachdem, von welcher Farbe zu welcher Farbe man geht, zum Beispiel der HSL-Farbraum, der ist ja so quasi in einem, das ist ja ein Rad oder ein Zylinder und RGB ist ein Würfel.
Und wenn man je nachdem also wenn man die gleichen Farben nimmt und Farbverläufe macht, dann dann laufen die halt durch eine farblose Zone teilweise in der Mitte, weil eben das einen Zylinder ist und das andere ein Kugel.

[28:07] Und da hilft es auch manchmal tatsächlich beim Farbverlauf den Farbraum zu wechseln, um zu schauen, ob der Farbverlauf nicht vielleicht cooler aussieht in dem anderen Farbraum.
Und das hast du bei den Dingern dann einfach nicht mehr, also die haben dann nicht mehr solche doofen Mappings, sondern gute.
Und was halt auch cool ist, ist, dass die quasi nicht nur die Farben mathematisch versuchen zu berechnen, sondern die sagen halt, Gelb wirkt immer viel zu hell.
Und wenn man aber eigentlich auf einem mittleren Helligkeitslevel ist, dann müsste das Gelb eigentlich auch, dürfte das nicht so rausknallen.
Und dann korrigieren die das so ein bisschen für unser menschliches Auge.
Sodass du dann quasi, wenn du durch den ganzen Regenbogen durchgehen würdest, würdest du bei einem Farbverlauf in RGB zum Beispiel, da werden bestimmte Farben relativ dunkel, so blau, und andere wie Pink und Gelb knallen halt total raus.
Und in diesen neuen Farbräumen wäre das quasi alles gleichermaßen entweder hell oder eben dunkel oder eben so mittelmäßig hell.

[29:22] Mir kommt vor, dass du jetzt gerade ein bisschen erklärt hast, den Effekt in Tag 95, wenn ihr mitschauen möchtet. Da gibt es nämlich die Color Mix Function, die es einem erlaubt, zwei Farben zu mischen.
Also ich kann sagen in dieser Color Mix Function 95 kann ich sagen, nimm bitte blau und weiß und vermisch die im sRGB Farbraum oder im HSL oder in Lab. Jetzt habe ich es auf drei verschiedene Varianten ausgesprochen. Sehr gut, vielleicht schaffe ich noch zwei andere. Aber man muss sich das so anschauen, was am Ende rauskommt. Ich habe in jeder Variante, also einmal sRGB, dann eben HWB oder HSL habe ich diese Farben vermischt und schon eigentlich fast immer komplett anders aus.

[30:10] Ja, genau, das müsste eigentlich, genau, das ist ein Effekt des Mappings, ja.
Da sollte sich mal einer auskennen. Ich habe mir gedacht, passt, also das war so ein Beispiel, wo ich mir gedacht habe, okay, ich habe das jetzt gelesen, da hat Adam Argyle so ein Artikel geschrieben, okay, passt, Color Mix, ich sage in welcher Funktion, zwei Farben, zack, habe ich es sofort erklärt, halbe Stunde, perfekt. Und dann bin ich da gesessen und habe mir gedacht, warum schauen die so unterschiedlich aus, die Farben? Ich checke es irgendwie nicht, dann habe ich das gelesen und habe es nicht verstanden, habe es nochmal gelesen und dann habe ich es einfach gelassen und habe das Bild von ihm kopiert und gesagt, passt.
Aber das erklärt es schon ein bisschen genauer, warum das so ist. Aber das ist ein super Beispiel für ein Artikel, wo ich mir gedacht habe, ja, ich habe eigentlich verstanden grundsätzlich, worum es geht und was am Ende rauskommt, war einfach zu komplex, weil dieses Farbthema ist echt nicht so easy.
Super schwierig.
Ganz. Also ich hab immer gesagt, die Typografen und Typografinnen sind die ärgsten Nerds.
Also wenn man sich mal so einen Talk anschaut, so einen Typografie-Talk, die sind ja extrem heftig.
Aber ich glaube, ich würde jetzt eher sagen, dass die Farbmenschen noch ärger sind.
Ja, auf jeden Fall. Da gibt es auch einen Talk, ich glaube auch vom CSS Day wahrscheinlich, von dem Chris Lilley über Farbe. Ja, den würde ich aber empfehlen.
Und da haut's dir auch echt die Socken weg.

[31:30] Ja, da hab ich auch was von ihm gesehen, nicht vom CSSD. Der ist zu Hause gesessen, aber der war super.
Da hab ich wirklich jetzt ...
Da hab ich auch die Geschichte mit Lab und OKLab verstanden.
Dann immer besser verstanden, worum's geht.
Sehr viele Formeln und so was hab ich nicht verstanden, aber zumindest das Grundlegende, warum's das jetzt braucht und was es macht, also der ist super.

[31:54] Ist kein Zufall, dass die beiden verheiratet sind. Lea Verou und Chris Liddy, ja.
Stimmt. Oder zusammen, weil sie nicht mehr verheiratet sind.
Die haben auch zusammen an dieser Color Spec gearbeitet.
Dann zusammen mit dem Adam Argyle, den du schon erwähnt hattest, und der Una. Ja.
Sehr cool. Ich würd noch gern, wenn wir schon beim Thema sind ...
Ihr habt sicher echt das schwierigste Thema ausgesucht, wo ich am meisten imitiere.
Aber was mir extrem gut gefällt, ist Tag 92.
Der Relative Color Syntax. Das ist super cool, darauf freue ich mich wirklich sehr, weil das, was ich vorher erwähnt habe, man könnte diese HSL Function irgendwie nehmen und dann einzelne Werte in Variablen speichern und dann kann man schön damit arbeiten. Das ist dann nicht mehr notwendig, weil da kann ich einfach hergehen und sagen, nimm dir einen Hexwert und da nimm dir bitte aus dem Hexwert dann den RGB-Wert und dividier den durch 50 oder nur den B-Wert durch 50 oder nimm dir bitte aus diesem hexwert und mach draus lab oder keine ahnung also das ist wirklich sehr cool oder ich könnte sagen nimm diesen srgb, nein rgb wert und mach draus hsl und beim l zieh bitte zehn prozent ab oder statt dem h verwend zehn oder was auch immer also ich kann wirklich jeden ich kann sozusagen einen wert nehmen den einen anderen umwandeln und dann auch nochmal abändern. Das ist schon sehr, sehr cool.

[33:21] Das sind ja auch so, also diese Farben und die Farbfunktionen, das erschließt ja so eine ganz neue Welt, weil eigentlich haben sich ja die Farben, also bis auf den Alpha Channel, so, uh, Alpha Channel, wir haben Transparenz. Das war ja so eigentlich das Einzige, wo wir, was so als Neuerung kam. Ich meine, irgendwann ganz früh gab es mal Ich glaube, das lag aber einfach, ich weiß nicht mehr, woran das lag, lag es an den Bildschirmen, lag es an den Browsern, man weiß es nicht.
Beides vermutlich.
Ja genau, und jetzt, also was da abgeht, also es ist auch total spannend.
Also wie kannst du das überhaupt testen?
Also was macht man da? Also du brauchst ja theoretisch verschiedene HDR-Monitore, dann brauchst du vielleicht noch einen Monitor, der nicht HDR hat, damit du irgendwie gucken kannst.
Sieht's dann irgendwie ganz schlimm aus bei Leuten, die keinen High Dynamic Range haben.
Und auch so Accessibility-Geschichten wie Vordergrund, Hintergrund, Kontrast und sowas, Die müssten ja dann eigentlich auch alle wieder neu infrage gestellt sein, theoretisch.

[34:31] Das stimmt, ja. Also, wie testet man das? Also, in Wien würde man sagen, wird schon passen.
Nein, du hast schon recht, es ist schwer zu testen, ja. Aber es ist super spannend, weil ich habe, ganz ehrlich, ich habe bis jetzt einfach immer HEX oder RGB verwendet, weil, keine Ahnung, habe mich einfach nicht interessiert, warum soll ich dieses andere Zeug verwenden.
Und jetzt, wo ich drüber geschrieben habe, merke ich einfach, es ist schon wirklich einfach intuitiver, mit diesen Funktionen zu arbeiten, wenn man sich ein bisschen damit beschäftigt hat Und je öfter man's verwendet hat, desto mehr Sinn macht's irgendwie auch.
Also, das ist schon sehr cool.
Ja. Genau, also ich glaub, dieses LCH ist ja im Grunde genommen ein ähnliches Setup wie HSL.

[35:14] Nur dass die Komponenten gedreht sind. Deswegen ist das L halt nicht hinten, sondern vorne.
Genau, so Lightness und dann Chroma sozusagen, die Vibrance, die quasi Sättigung der Farbe.
Und dann H, so wo auf dem Farbrad ist jetzt diese Farbe.
Und bei dem Lab ist es so, dass L wieder Lightness ist. Und dann scheint, also ist es wohl so, dass wir Menschen, also wir können quasi entweder blau wahrnehmen oder gelb.
Und dann grün oder rot. Und genau, das sind halt quasi die A, B-Achsen, wo man sagen kann, entweder eine Farbe hat Rotanteil, dann hat die aber keine grünen Teile.
Oder umgekehrt. Und dann das Gleiche noch mal mit der blau-gelben Achse.
Ich glaube, wenn man sich diese Sachen merkt, dann kann man irgendwann wirklich aus dem Kopf wahrscheinlich Farben, also nicht hundertprozentig genau, aber so einigermaßen gut auch runterschreiben.
Zumindest viel besser als mit Hex.
Also, schwarz kann ich, weiß kann ich, rot, grün, blau kann ich auch, hellgrau kann ich auch, das war's.
Und ich weiß, dass 1, 2, 3, 4, 5, 6 ist so ein dunkelblau, aber das war's auch schon.
Und ich glaube, bei diesen neuen Funktionen, die man sich ein bisschen damit beschäftigt hat und dann mal eine Weile verwendet hat, wenn es so weit geht, dann geht es auf jeden Fall deutlich besser.

[36:44] Sehe ich auch so von. Auf jeden Fall juckt es mich da schon, mit zu spielen.
Ja, ihr merkt mir schon, das ist sehr, sehr viel Ahnung.
Wenn man einfach einen sanften Einstieg will, dann kann ich eben die Tage empfehlen, die 98, 93 und ich habe sogar auch, eben weil ich gesagt habe, gewisse Sachen weiß ich aber gar nicht, habe ich auch so Dinge wie die Tage 30, die Hue, Whiteness, Blackness, glaube ich, oder? HWB-Funktion und LabColorFunction ist 23. Ja, genau. Ja, ich bin gespannt. Wir können ja auch mal hier direkt die Frage an die Zuhörenden platzieren, ob ihr diese neuen Farben schon benutzt und ob ihr irgendwelche coolen Sachen und damit gebaut habt, die ihr uns vielleicht mal schicken könnt.
Genau. Das ist ein super Punkt, weil das, was wir jetzt noch haben, oder ganz viel haben mit all diesen neuen Sachen, nicht nur mit den Farben, sondern auch mit den Cascade-Layers oder mit den Container-Queries, ist, dass momentan noch sehr viel theoretisch ist.
Es gibt schon ein paar Leute, die schon aus der Praxis berichten können, aber es ist alles noch sehr, sehr neu.
Alles, was irgendwie so ein bisschen Praxishintergrund hat, ist spannend.
Vielen Dank für's Zuschauen.

[38:04] Ja, genau, also alles, was ihr mit neuem, modernen CSS macht, bitte schickt's uns gerne zu.
Ähm, genau bei den Cascade-Layers, da ist es bei mir so, die rühre ich erst mal noch nicht an.
Das muss erst mal überall supported sein, bevor ich mich damit beschäftigen möchte.
Ich schon. Und zwar versuche ich jetzt ... Ich mach's eh noch nicht so lang.
Ich versuch's erst seit drei oder vier Jahren, Und jetzt habe ich beschlossen, jetzt ziehe ich es durch.
Ich bin jetzt auf Kirby umgestiegen, auf ein PHP-basiertes CMS.
Schon eine Weile her, dass ich mit PHP gearbeitet habe, aber es geht ganz gut.
Und da werde ich all diese neuen Sachen verwenden, weil da ist es mir egal.
Da weiß ich, dass die Zielgruppe ist hauptsächlich Leute, die relativ freshe Browser haben.
Und wenn nicht, dann habe ich sehr schönes HTML geschrieben, und dann wird die Seite halt einfach nur mit HTML dargestellt und wird trotzdem funktionieren.
Ja, das geht natürlich immer beim eigenen Projekt. Genau, beim eigenen Projekt, ja. Soll ich dir noch was Cooles erzählen?
Gerne.
Weil du, Vanessa, hast ja gesagt, du bist da nicht so voll drinnen bei dem neuen heißen Scheiß und CSS. Dann zeig ich dir was ganz, ganz Cooles. Und zwar 75.

[39:29] Ja! Was ist das? Font Palettes. Und zwar ist es so, also das ist das Erste, was ich nicht gewusst habe. Es gibt Color Fonts, das heißt Fonts, die von Haus aus schon mal mehrere Farben darstellen können. Das heißt, du gehst jetzt nicht mit der Color Eigenschaft her und färbst die ein, sondern die können halt drei, vier, fünf, sechs, sieben Farben. Das ist schon mal ganz cool. Und was die auch noch können ist, dass sie mit verschiedenen Farbpaletten daherkommen können, also zum Beispiel das, was man da sieht, dieses Beispiel, das sind so in einem orange, gelb und braun Tönen gehalten, aber es gibt dann auch noch versteckt in der Schrift, unterschiedliche Farbpaletten, zum Beispiel in pink Tönen oder in grün Tönen oder in grau Tönen und da gibt es die Base Palette Eigenschaft beziehungsweise auch noch mal die Font Palette Eigenschaft oder die Font-Palette-Values-Add-Rule, mit der ich sagen kann, bitte verwend nicht Die erste Farbe, die Standfarbe, die dritte, vierte, fünfte oder wie auch immer.

[40:31] Das ist unglaublich. Und ich glaube, das Wort War, das du dafür gewählt hast, für die Demo, ich muss mal kurz alle Möglichkeiten in meinem Kopf durchgehen, was ich jetzt alles damit machen kann.
Was ich damit alles anstellen kann.
Da macht das Web ja wieder richtig Spaß. Ja, vor allem, du kannst auf Tag 76 weiterschauen.
Also einfach unten weiterklicken. Da geht's nämlich weiter. Man kann nämlich diese Paletten überschreiben. Es gibt nämlich die Eigenschaft, die heißt Override Colors. Und da kann ich mit Null-Index basierend sagen, verändere Farbe 0 oder verändere Farbe 3, wie auch immer. Das heißt, du kannst einzelne Farben aus dieser Palette dann überschreiben oder einfach alle überschreiben.
Das heißt, du kannst auch deine eigene Farbpalette definieren. Also mir wäre überhaupt nicht eingefallen, wie man diesen Effekt bekommen könnte, außer man bastelt halt ein SVG, man vielleicht ein Canvas. Aber das ist ja mega.
Ja, oder so wie früher, wie hat denn das geheißen? SFR oder LSFR oder sowas?
Ja. Wo man irgendwie einfach Text hingeschrieben hat und dann gab es irgendein PHP-Skript, das dann daraus ein Bild generiert hat. Oder wie ist denn das? Das funktioniert eigentlich schon eine Weile her.
Ziemlich eklig, ja. Genau, es gab doch erst die Flash-Variante.
Ja, genau. Dann später gab's eine Variante, die hat das mit SVG, glaub ich, so dynamisch dann ...

[41:59] Genau. Aber war natürlich ... hat furchtbar CPU gefressen. Und ... wir sind froh, dass wir das nicht mehr machen müssen.
Ja.
Eine Sache muss ich nur sagen, das ist auch alles relativ neu.
Und was mir und auch LeserInnen aufgefallen ist, ist, dass der Safari manchmal abstürzt bei den Blockartikeln.
Also irgendwie ganz so geil funktioniert's nicht. Dann nimmt man halt was anderes her.
Kurze Frage, ist das der Safari, ist das nur der iOS-Safari, der abstutzt?
Oder ist das auch der Mac-Safari?
Mac. MacOS. Ich hab's auf iOS gar nicht probiert, ich hab kein iPhone.
Da war's irgendwie so, sobald ich versucht hab, den Text zu markieren, irgendwie zu selektieren, genau.
Abgestützt hat's dann.
Bei mir hält's.
Okay. Kann sein, dass es einfach... Also, ich hab das... Man hab ihn geschrieben im Jänner.
Vielleicht gibt's schon eine neue Version, wo es im Jänner nicht passiert, aber manchmal ist es passiert.
Ich komme auch bald zur Fireweiss.

[43:07] Ach so, vielleicht kannst du uns in der Zwischenzeit was anderes über Farben erzählen, was nicht speziell mit Farben zu tun hat, aber mit Hintergrundfarben.
Ich habe gesehen, den Backdrop für Dialoge hilfreich.
In irgendeinem Talk.
Im Tag 22. Ja, Backdrop-Soldo-Element.
Das ist ganz cool, weil, also, es ist immer super cool, dass ich überhaupt, dass wir jetzt dieses Dialog-Element haben, mit dem man einfach Model-Windows machen kann und das funktioniert super.
Also ich hab das jetzt auch zufälligerweise hart dran gearbeitet. Geht alles tip-top und mit dem Backdrop-Pseudo-Element kann ich steuern, wie die Hintergrundfarbe oder der Hintergrund sozusagen hinter dem Model dargestellt wird.
Also oft ist es ein klassisches transparentes, schwarz-transparentes, wie auch immer, aber ich könnte auch eine deckende Farbe verwenden oder vielleicht irgendein Gradient oder ähnliches.
Was aber ganz spannend ist, und das steht da jetzt nicht drinnen, aber Kilian Walkoff hat einen Artikel geschrieben, Backdrop erbt keine Custom-Properties, das heißt, wenn ich auf dem HTML-Element oder wenn ich Root verwende und dort eine Custom Property definiere, dann existiert sie im Backdrop nicht. Oder wenn ich sie im Dialog oder sonst irgendeinem Elternelement definiert, dann wird die da nicht weitergegeben.

[44:30] Das ist spannend für Design-Systeme und so, also wenn ich Design-Tokens habe und ich definiere die nur vom Root, dann sind die da nicht drin.
Und ich hab natürlich vergessen, warum.
Aber der Shep weiß das wahrscheinlich. Nee, den eigentlichen Grund weiß ich nicht, also ich hab da nur so Theorien, genau, aber es steht glaube ich in der Spectrum, also es ist kein Bug oder sowas, also es scheint eine Implementations-Hürde zu sein, dass das irgendwie nicht geht.
Ich glaube, aber ich bin mir nicht sicher, dass dieses Backdrop-Element oder dieser Dialog, die wandern ...

[45:04] Die wandern ja ... Nee, das kann er nicht. Aber der steht quasi parallel zum Dokument.
Auch in deinem DOM-Inspektor, glaub ich.
Und der ist nicht in das HTML reinverschachtelt. Und da macht das dann irgendwie Sinn.
Aber was dagegen spricht, ist, dass andere Elemente Ähnliches tun und da das, also das da funktioniert, glaube ich, und darum ist das irgendwie tatsächlich merkwürdig. Ja, aber es wäre mal ganz cool, das so aus reiner Nördigkeit heraus mal rauszufinden.
Wie gesagt, Kilian Varkov hat in seinem persönlichen Blog oder was, der Polypain, nein, ich glaube, in seinem persönlichen Blog hat er drüber geschrieben, oder Polypain, bin mir grad nicht sicher, man wird's finden.
Ja, wir packen das für die Show Notes.
Ah ja, super. Was ich auch nicht gewusst habe, ist, dass man Backdrop auch bei Elementen im Fullscreen-Mode verwenden kann. Das heißt, wenn ich ein Bild in Fullscreen, sorry, ein Video zum Beispiel in Fullscreen setze, kann ich dort auch mit Backdrop den Hintergrund ändern.
Aber auch da sehe ich bei Can I Use, es dürfte das Backdrop-Dialog-Element sein, bei Safari wieder erst ab 15.04.

[46:17] Ja, weil bei Chromium-Browsers sieht das ungefähr aus wie fast schon seit immer.
Aber nicht beim Safari. Wenn ich jetzt das Richtige angeschaut ...
Moment, den CSS-Selector gibt's noch.
Aber der ist auch 15.4.
Ja, ja, das ist alles relativ neu. Voll. Obwohl Safari hat ja letztens ein Update, glaub ich, rausgebracht, wo eigentlich so eine lange Liste war, wo ich total begeistert war.
Aber jetzt bräuchte ich das auch.
Bisschen Backdrop hier.
Ja, also seit einem Jahr, zirka. Ziemlich genau seit einem Jahr gibt es Dialog-Element im Safari und dementsprechend auch Backdrop. Aber wie Backdrop... Achso, nein, okay. Wir haben ein bisschen weiter runter scrollt. Okay, ich nehme alles zurück. Backdrop für Fullscreen geht nur im Firefox und im IE11. Echt? Hm. Okay, also anscheinend wäre es theoretisch möglich, praktisch wahrscheinlich nicht so.
Aber es geht ja mittlerweile mit Has, könnte man dann sagen, wenn du ein Element im Fullscreen-Mode hast, was man ja über diese Pseudoklasse Fullscreen rauskriegt, dann könntest du quasi dir einen Backdrop per Pseudo-Element am Body oder so bauen, das dann quasi automatisch über der Seite liegt.
Ja, nur dass das Video schon mit dem Backdrop-Comp da ist.

[47:43] Okay. Ja, es wär also technisch nicht das Gleiche, aber wenn's dir nur darum geht, tatsächlich irgendwas zu haben, womit du ...
Ja, stimmt, wir müssen uns zusammenhacken, ja.
Genau. Ja, aber schon ein bisschen fies, muss man sagen. Also, Hacken ist schon der richtige Begriff.
Ja. Was hast du bei Haze noch rausgekriegt? Also, Haze hast du einmal an Tag 36.
Und dann hast du aber später, an Tag 50, noch Has mit Not verschachtelt und Not mit Has verschachtelt.
Das sieht auf jeden Fall interessant aus.
Ja, und zwar war es so, dass ich dann drauf gekommen bin, dass has not und not has nicht dasselbe ist.
Ja, dass irgendwie einen Unterschied macht.
Und ich habe es mir natürlich nicht gemerkt, aber man kann es sich durchlesen.
Okay, aber es war ein guter Teaser auf jeden Fall.
Genau.

[48:37] Genau, und zwar ist es so, wenn ich jetzt sagen würde, nimm ein Element und da has not image, Dann würde es heißen, nimm ein Element, das irgendein Element hat, das kein Image ist.
Und wenn ich aber hingegen sagen würde, nimm... Nein, ich werde das jetzt nicht einfach weitermachen, das ist einfach fürchterlich, über diese Sektoren zu sprechen.
Das muss ich nicht durchlesen, das bringt einfach nichts, wenn ich da jetzt not hase.
Also, es ist schon mal nicht leserlich, aber dann das Ganze auch noch zu hören, vergiss das.
Also, lest euch durch, durch Tag 50. Da habe ich, glaube ich, ganz gut den Unterschied zwischen hase, not und not hase erklärt.
In Wahrheit, das eine spricht einfach nur an, sagt, nimm alle Elemente, die nicht ein bestimmtes sind und das andere sagt, nimm das Element, wenn es ein bestimmtes nicht hat.
Was ja viel spannender ist.
Ich wäre bei beiden Cases, ich wäre bei beiden vom letzten ausgegangen.
Nimm das, was nicht das noch mit hat.

[49:35] Voll. Das könnte man Che Che Petit fragen, ob er das erklären kann.
Vielleicht hat er es gehofft, wäre spannend.
Was ich auch viel, viel spannender finde, ist Tag 91. Da geht es auch um Heiß. Und zwar ist da das Thema, dass Heiß, ja, also man sagt ja, Heiß ist ja der Parent Selector. Also ich kann sagen, nimm ein Element und wenn das ein bestimmtes Kindelement hat, dann macht dies das bei dem Kindelement oder beim Elterntelement. Aber es ist ja mehr als das. Ich kann mit Heiß auch sagen, Selektier bitte ein Element, wenn es ein Folge-Element hat, auf derselben Ebene, also es ist kein Kind-Element, sondern sie sind beide auf derselben Ebene und es ist gefolgt von einem anderen Element.
Und da sind wir jetzt auch wieder bei Herumhäckerei, aber theoretisch könnt ihr dann einfach sagen, nimm ein Element und wenn ich da zum Beispiel drüber habe, dann nimm das, das auf dieses Element folgt.
Oder, wenn ich spannende Selektoren verwende, könnte ich sagen, nimm ein Element, das davor ist, also ein Element, das...
Warte mal, wie war das nochmal? Ja, du kannst quasi was mit dem vorangegangenen Element machen.
Genau, genau.
Ja. unmöglich wahrzumachen.

[50:52] Super cool. Genau, das heißt, nimm ein Element, das folgt auf ein anderes Element oder du kannst so weit gehen und sagen, nimm ein Element, das auf ein Element folgt, das auf ein anderes Element folgt, das auf ein anderes Element folgt und so kannst du eigentlich unendlich im DOM nach vor und zurück gehen und da sind ein paar Demos, also zum Beispiel habe ich da so ein Grid mit 20 Buttons und ich fahre über einen drüber und der wird skaliert und gleichzeitig wird der drüber, der drunter, der links und der rechts auch nochmal mit skaliert. Oder viel spannender, Da gibt's noch eine Demo, ich weiß leider nicht von wem gerade, so eine klassische Paginierung, man sieht jetzt irgendwie die Seiten 1 bis 12.
Und ich habe über eine Zahl, die wird größer und verfärbt sich, und die vorherige und die nächste, die werden ein bisschen kleiner, aber auch größer als der Rest und haben auch eine andere Farbe.
Also das ist schon ganz spannend.
Wobei man das auch ganz gut mit deinem Cursor-Trick von deiner Lighthouse-Seite machen könnte.

[51:49] Da hast du doch den hast du doch der berühmte max der berg aufsetzt genau weil der der berg aufsetzt ist quasi das man den cursor den kann man nicht per css auch austauschen durch ein bild und dieses bild in diesem bild ist halt der pfeil einfach versetzt und dadurch ist quasi die klickzone nicht da wo der pfeil über die pfeilspitze ist Genau.
Da find ich das mit Haze dann tatsächlich ein bisschen eleganter, so zwei Prozent eleganter.
Ja. Wobei ich sagen muss, ich hab das gepostet, und, ähm, wer ist der, der Alex Russell, der bei Chrome war, ganz lang, der hat gesagt, ja, eh cool, aber bitte Performance, Performance, Performance.
Also, man muss da ein bisschen aufpassen.
Es kann sein, wenn man da zu smart wird, dass es dann von der Performance her ein bisschen problematisch werden könnte.
So easy sein für den Browser. Muss man dann testen. Also man darf da glaube ich nicht zu crazy werden.

[52:51] Genau das da hatten wir ich glaube das hatten wir eventuell schon mal in einem der letzten podcast das und das passt ja auch dass der edge der legte ist das jetzt quasi offen in seinen dev tools da kannst du so ein selector profiling machen.
Und wirklich ja ja das ganz cool genau dann sieht man auch tatsächlich als das Has einfach länger braucht, weil die eben, also die haben schon, also der Knoten ist ja geplatzt, also warum wir das haben, ist ja schon, weil die einen Weg gefunden haben, das performant zu machen. Es ist aber halt eben näher an dem, wie andere Selektoren arbeiten, aber eben einfach trotzdem nicht so performant.
Ist auch nicht schlimm, also man kann es benutzen, nur wenn man halt einen riesen Dombaum hat, weil der quasi ja jedes Element dagegen dann fällt das dann doch vielleicht ins Gewicht.
Das kann man mit diesen Edge-Dev-Tools ganz gut profilen mittlerweile.
Coole Sache.

[53:54] Ja, und ansonsten, Tag 99, natives Nesting. Find ich jetzt ein bisschen langweilig, aber ist eh cool.
Ich glaub, sehr viele Leute freuen sich drüber, dass man jetzt so ähnlich wie bei Sass oder Less oder für die Hipster bei Stylus nesten kann. Ich weiß gar nicht, ob man es schon im normalen Safari, aber zumindest im Technology Preview kann man schon mal testen.
Und ich glaube, in Chrome auch mittlerweile. Die Frage ist nur, wenn man jetzt schon irgendwo SASS drin hat und vor allem fürs Nesting, lohnt sich das dann, SASS rauszuwerfen?
Muss man für sich selber entscheiden. Also so wie ich SASS verwendet habe, also das ist wirklich nur ganz persönlich, war einfach hauptsächlich Variablen, Nesting teilweise, aber ich wäre auch ohne ausgekommen und Mixins.
Das war so schon. Das meiste habe ich eigentlich sonst wirklich nicht verwendet.
Also für mich ist Sass jetzt nicht tot.
Also wenn ich Sinn sehe dahinter, würde ich es nochmal verwenden.
Oder wenn es irgendein bestehendes Projekt gibt, würde ich jetzt nicht sagen, nein, bitte lass mal Sass. Aber tatsächlich jetzt beim neuen Projekt verwende ich es eigentlich nicht mehr.
Ja, ich habe zum Beispiel seit jetzt wirklich langer, langer, langer, langer Zeit keine Variablen mehr im Einsatz und keine Mixins, sondern eigentlich, wenn überhaupt, nur fürs Nesting.

[55:18] Dann mache ich es aber auch oft so, dass ich mich zwar mal frage, ob ich das jetzt wirklich nesten muss, also ich weiß, manchmal ist es noch so von früher gewohnt, war es bei mir noch so default, ich neste das jetzt, weil ich kann.
Mittlerweile ist es so, ja, was bringt es mir eigentlich, dass ich es gerne auch manchmal flach halte.
Ist dann teilweise immer ein bisschen nervig, finde ich, zum Beispiel, wenn man von Codes Handbox oder von irgendwo Codeschnipsel übernehmen möchte, die von Haus aus das benutzen, und ich habe es bei mir nicht drin, Da muss ich das wieder alles umschreiben. Wahrscheinlich gäb's irgendwelche coolen Tools, die das automatisch machen.
Ähm, mal kurz selber. Und deswegen, ähm, ich hab nämlich von, auch von Native Nesting vor einiger Zeit schon mal gehört und mich gefragt, ob's jetzt gerade so bei nem Vue-Projekt, wo man ja eh seinen Scope CSS hat, das ist da sowieso nicht viel genestet, ob sich das da irgendwie rentieren würde für irgendeine Performance, irgendwie Kilobyte-Größen von irgendwas, irgendeinen Bildprozess schneller machen, wenn man das jetzt refactoren würde oder rausrefactoren würde.

[56:17] Wie gesagt, du hast einen ganz wichtigen Punkt angesprochen.
Also, sobald man in diesem Komponentending arbeitet und das CSS lebt dann auch bei den Komponenten und irgendwie sehr nah am HTML und am JavaScript von eben der Komponente dran, dann macht es immer weniger Sinn, weil ich habe es auch sehr gern verwendet, einfach nur, um Komponenten abzukapseln in einem großen CSS-Dokument.
Und das fällt dann damit auch ein bisschen weg. Und ansonsten, ob sich das wirklich auszahlt, ich weiß nicht.
Ich hab an Projekten gearbeitet, wo der Build irgendwie 15 Minuten dauert.
Also da macht alles Sinn, was man wegoptimieren kann.
Und ich glaube, es kommt auch darauf an, welche Version von Sass, ob es jetzt Start, Sass, Not Sass oder Deletier-Hits oder wieder.
Es gibt ja auch Performance-Unterschiede. Also ich hätte es jetzt nicht gespürt bei den Sachen, an denen ich gearbeitet habe.
Aber die sind auch meistens sehr nah an Standards dran, da passiert nicht so richtig viel.

[57:11] Ich würde da jetzt kurz noch mal gerne einhaken, weil du hast gerade Dartsas und Notesas erwähnt.
Könntest du beschreiben, was das eine, was das andere ist, was sollte man verwenden?
Nein, das war so schreibsicher. Ich habe es mir nicht gemerkt.
Ich habe es mir vor kurzem nicht mehr gehört. Nein, die Frage war natürlich an dich gerichtet. Du hast schon so lange nicht mehr gesprochen.
Es ist nur die Technologie dahinter. Das eine ist, glaube ich, in Not geschrieben, das andere in Dart.
Und eins von beiden ist schneller. Ich glaube, die Dart-Variante, weil die ist wiederum geschrieben in irgendwas anderes.
Ich bin kein Chef, weißt du das hier?
Also, ob die schneller ist, weiß ich nicht. Aber die ist halt grade so die Geschmacksrichtung du jour.
Also, die entwickeln das halt in Dart.
Genau, vielleicht, weil sie es dann auch nach JavaScript irgendwie kompilieren können.

[58:00] Genau, also, Sass oder Dart-Sass ist jetzt so das Hauptding von den Sass-Leuten.
Ja, also ich hab ungefähr genau das gleiche Wissen wie ihr dann.
Bei mir war es dann irgendwann, ich wollte was mixen.
Ich bin mir nicht mehr hundertprozentig sicher, was es war. Also nagelt mich bitte nicht auf das Beispiel fest.
Aber es war so in die Richtung, dass ich sowas machen wollte wie Max.
So in die Richtung von Marv Max.
Und das eine war halt sowas wie 100% und das andere war was wie 30VH View Height.
Irgendwie sowas. Und das war in Node.js nicht möglich, weil ich das nicht mixen durfte.
Durfte und dann musste ich doch mal einfach schnell auf Dartslass umstellen.
Dann habe ich auch kurz gelesen, worum geht es hier eigentlich und so, achso, ist ein Dart geschrieben, ist irgendein Performant, das sollte man eh verwenden.
Das war dann auch meine Research wieder und dann war ich auch fertig und das Mixen von irgendwelchen Einheiten hat dann funktioniert.

[58:54] Ja, ich glaube auch an einer gewissen Größe spürt man es, aber ich habe nie so komplexe Konstrukte gehabt, dass ich da jetzt wirklich irgendwelche Performance-Unterschiede großartig gemerkt habe.
Ja, ich glaube, wichtig ist einfach nur nicht mehr das, aber das geht wahrscheinlich gar nicht mehr, das Ursaß, das, glaube ich, in RWBY geschrieben war, das war halt einfach langsam.
Ja, bei mir ging's auch nicht um Performance, sondern einfach, dass ich quasi da up-to-date sein will, weil ich dann befürchte, vielleicht ist NoteSass dann tatsächlich mal deprecated.
Und ich will das halt nicht mal in fünf bis zehn Jahren alles umändern müssen, sondern das versuch ich dann schon immer recht zügig up-to-daten.
Wir hatten jetzt bei den, ähm, One Hundred Days eine Rubrik grad noch gar nicht benannt, die ich aber eigentlich sehr viel gehört habe.
Ähm, und das sind ganz viele Margin-Sachen. Und ich pick mir da gleich mal jetzt einfach, obwohl das ist ja eigentlich gar kein Margin, aber so im Sinne von Stadtmargin, ähm, pick mir jetzt gleich mal Day 2 wieder raus, den Tag Nummer 2 mit Logical Properties.
Ich hab sehr viel davon gehört.
Und vielleicht könntest du mir noch mal erklären, was dieses Right to Left, Left to Right.

[1:00:10] Macht und warum man's verwenden sollte.

[1:00:14] Oder auch nicht. Ja, auf jeden Fall. Also, wir haben hier Sprachen, die von links nach rechts gelesen werden, und welche, die von rechts, also von links nach rechts, und andere, die von rechts nach links gelesen werden.
Und wenn wir in CSS irgendwo margin-right verwenden, dann ist es immer margin-right, ganz unabhängig von der Leserichtung.

[1:00:34] Und ich hab da ein Beispiel, wo ich einfach so quasi wie, also eh gleich unter der ersten Überschrift Physical Properties, wenn man jetzt sowas nimmt, wie zum Beispiel eine horizontale Navigation und sagen wir mal, ich verwende da kein Gap, sondern ich verwende da Margin zwischen den einzelnen Elementen und ich sage, jedes Li in meiner Liste hat eine Margin Right, dann wäre das bei beiden Leserichtungen gleich, nur man sieht bei der Right to Left, dass da eben der Margin nach rechts geht und nicht nach links geht in die andere Richtung, also müsste sozusagen gespiegelt sein und das funktioniert eben mit diesen physikalischen Eigenschaften nicht mit Left und Right. Und so ähnlich ist es auch bei Flexbox zum Beispiel, da hast du ja auch Flex End und Flex Start, also da wurde bewusst drauf verzichtet, Left und Right zu verwenden, sondern sozusagen Start und End. Und die reagieren aber auf die Leserichtung, das heißt, die können das schon. Und weil es eben diese alten Eigenschaften wie eben Margin, aber auch die Höhe und die Breite oder Border, alles, wo es irgendwo um Umrichtungen geht um Seiten, weil die das nicht können, gibt es die neuen Varianten davon, die Logical Properties.

[1:01:44] Left ist margin-inline-start und right ist margin-inline-end.
Das heißt, inline ist die horizontale Achse und die vertikale ist block.
Das heißt, wenn ich sagen möchte margin-top, würde ich sagen margin-block-start.
Oder wenn ich sagen möchte position-absolut-top, dann würde ich nicht top verwenden, sondern insert-block-start.
Gibt es denn überhaupt noch einen Grund, top und bottom zu verwenden?
Wahrscheinlich schon.
Aber wenn ich jetzt immer nur an Fleece-Text denke oder an Navigationen?

[1:02:20] Vermutlich gibt es den Grund schon und da sind wir jetzt wieder an diesem praktischen Nutzen, an diesem praktischen Beispiel.
Die gibt es noch nicht so viel und es macht auch wirklich tatsächlich nur dann Sinn, wenn ich auch eben eine Website habe, die auch diese Sprachen dann irgendwie kann, diese unterschiedlichen Sprachen, die von rechts nach links oder da mal von oben nach unten oder sonst irgendwie gelesen werden.
Und ähm, das heißt aber nicht, dass man es nicht verwenden kann.
Also man kann es einfach so, wie es ist, ab jetzt verwenden. Und passt auch.
Man muss sich ein bisschen umdenken, man muss sich das einfach merken mit Inline und Block.
Und ich mach das jetzt schon seit ein paar Wochen und ich tu mir immer noch schwer, weil es einfach so anders ist.
Ähm, wo es noch so ein bisschen Schwierigkeiten gibt, ich glaub Transform, also Translate X, Translate Y, kann das noch nicht so richtig.
Und bei Gradients, weil bei Gradients habe ich ja auch diese Schreibweisen, wo ich sagen kann, from left to right, so in die Richtung.
Und die sind, glaube ich, auch noch nicht, die gibt es auch noch nicht, das Logical Variante, oder zumindest nicht zu dem Zeitpunkt, wo ich geschrieben habe.
Genau. Tatsächlich warte ich jetzt noch ein bisschen, bis so die, bis jetzt so wirklich einige Artikel kommen, die auch wirklich echte Hands-on-Beispiele haben, weil ich persönlich habe sie nicht. Also ich habe einfach diese Rechts-nach-Links-Sprachen nicht gehabt.
Also wenn sie jemand von euch hatte oder in Ihrem Artikel hat, dann gern.
Ich weiß, der Ahmad Jadid, der hat eine eigene Website, wo es genau um das Thema geht.
RightLeftLanguages.
Blättert er noch ein bisschen was.

[1:03:45] Ich weiß gar nicht, wie die gerade heißt. Die heißt wahrscheinlich so was wie righttoleft.dev oder so in der Richtung.
Genau.
Ist das beschränkt auf Margin oder gäbe es die gleiche Logik dann auch bei Padding?
Oh, also Margin, Padding, Border, Height, Width, Max Height.
Also alles, was so Top-Right-Blablabla hat?
Ja, ja. Ah, ja. Ja, auch eben die Top-Left, Bottom-Right. Mhm. Ähm ...
Ja, bei den Farben genauso. Alles, was irgendwie irgendwas mit Dimensionen zu tun hat. Und Wave von Height eben auch, weil es nicht nur um die X-Achse geht, sondern auch um die Y-Achse, also beide Achsen. Und eben nicht nur um die Leserichtung von links nach rechts oder rechts nach links, sondern oben nach unten und nach oben. Und da steige ich ein bisschen aus, weil ich einfach diese Website nicht gemacht habe. Meine Websites sind eigentlich immer Deutsch oder Englisch. Da habe ich einfach weniger Erfahrung, deswegen weiß ich nicht, wie es wirklich auswirkt und ob ich dann wirklich Punkte habe, wo ich dann sage, na, ich verwende dann doch lieber die physical properties, weil ich dann nicht möchte, dass sich etwas ändert, sondern es soll fix bleiben.

[1:04:56] Das ist wahrscheinlich so ein ähnliches Thema wie, was ich ganz oft gefragt werde, soll ich RAM verwenden, wenn ich Border definier oder Boxshader oder ähnlich, oder soll ich da Pixel verwenden lieber?
Ja, kommt halt drauf an, muss man sich anschauen. Also einfach mal hochskalieren und schauen, was passiert.
Wenn's zu dick wird und zu unübersichtlich, verwende ich doch lieber Pixel, vielleicht funktioniert das besser.
Vielleicht will ich, dass ich was mitskaliert, und da wird's wahrscheinlich auch so ähnlich sein.
Das ist doch nicht etwa eine Überleitung, oder? Überleitung? Worauf? Tag 4 und 5.
4 und 5. Achso, ich wollte eigentlich danach noch zum March & Trim springen, aber dann schauen wir mal zu Tag 4.
Bevor wir die Logical Properties verpassen, ich wollte nur sagen, also ich finde halt, die kann man halt, oder die können wir nicht so gut testen.
Also so REM kannst du ja noch testen, da gehst du halt einfach hin und skalierst so deine US-Font hoch oder so und dann funktioniert das oder funktioniert das nicht, aber wenn ich mir, also wenn ich jetzt meine Seite auf Arabisch übersetze und Google Translate, dann weiß ich ja, also weil ich halt kein Arabisch kann und auch kein Hebräisch und Chinesisch und Japanisch, ich weiß ja überhaupt gar nicht, also technisch sehe ich dann, dass sich Dinge ändern, aber ob das so richtig ist, das weiß ich halt auch nicht.

[1:06:19] Also, ob ich jemandem dann einen Gefallen getan hab oder halt irgendwie so ein bisschen wie mit ARIA-Roles überall drankleben, ob man dann nicht irgendwie sogar ...
Das für die schwieriger gemacht hat. Keine Ahnung, weiß ich nicht.
Ja, also, da würd ich halt sagen, wenn du an einer Website arbeitest, wo diese Sprachen supported werden, dann musst du das sowieso testen.
Wenn du an einer Website arbeitest, wo sie nicht supported werden merken, weil es einfach die Sprache nicht gibt für die Seite dementsprechend.

[1:06:50] Ja, wobei wir haben im aktuellen, also bei meinem aktuellen Kunden, da haben wir Content Security Policy ausgerollt.
Auch ein mega anstrengendes Thema, aber also hat sehr lange gebraucht und Sentry war immer voll.
Aber mittlerweile haben wir dann sozusagen alle Verstöße und alle Sachen so, die haben wir im Griff.
Und man kriegt halt immer so die Errors angezeigt, die Verstöße gegen Content Security Policy.
Man findet total häufig, dass Leute eben was mit Google Translate, also quasi Skripte und so Zeugs injekten.
Das heißt also, es gibt Leute, die eben Seiten besuchen und die, die dann, wo der Browser die vielleicht vollautomatisch immer übersetzt, wenn's gibt's ja bei Chrome, glaub ich, der fragt ja dann so, diese Seite ist auf Englisch, möchtest du englische Seiten immer auf Deutsch übersetzen?
Und das sind halt wirklich teilweise viel mehr Leute, als man denkt, Und dann, die profitieren halt schon davon, wenn man Logical Properties verwendet hat.
Auch wenn man selber eigentlich nie die Absicht hatte, seine Seite zu lokalisieren.

[1:07:56] Aber ist es so, dass Google Translate und sonstige Tools, dass die auch die Direction ändern, beziehungsweise den Writing Mode, dann entsprechend die Sprache anpassen?
Also ich hatte es jetzt gerade mal mit unserer Seite getestet und da haben die es tatsächlich nicht gemacht.
Ich weiß nicht, ob es da andere Tools gibt, die das anders machen.
Ja. Weil das muss man sich ja nicht anschauen, weil das sind ja nämlich zwei Sachen.
Das eine ist ja die Sprache und die Zeichen, die verwendet werden, und dann die Übersetzung davon.
Und das andere ist wirklich auch, dass man sozusagen sagt, die Leserichtung ist anders oder halt eben diese Writing Mode Eigenschaft.

[1:08:28] Aber ja, eh sicher, das ist eh, du bestätigst ja nicht immer das, was ich vorher gesagt habe, dass man einfach ein bisschen diese Erfahrungswerte hat, braucht und es gibt auch ganz viele Leute, die sagen, ja, dann lieber nicht verwenden, weil wer weiß, was man damit anrichtet oder es bringt eh nichts, weil mir ist es eigentlich eh wurscht, ich sehe alles nur auf Englisch, das sehe ich nicht ganz so, aber ja, man muss, ich glaube, man muss noch ein bisschen Erfahrungswerte abwarten, es ist auch alles noch relativ neu, zwar nicht so ganz neu wie jetzt Nesting oder ähnliches oder die Farbgeschichten, Aber ja, ich glaube, da ist noch viel zu kommen.
Ich glaube, was halt so vielleicht ein Goodie ist, das zu benutzen ist, dass du ja manche so Shorthands dazu bekommst, die man früher eben nicht hatte, so wie Margin, Inline oder sowas.
Also da gibt's ja keine quasi Oldschool, keine Physical Repräsentation davon.
Also wo man quasi mit einem Wert sowohl links als auch rechts setzen kann.
Kann. Also jetzt zumindest in unserer Sprache. Oder bei Inset.
War's Inset? Ja, genau. Das ist ja dann quasi, alle top right, bottom left auf einmal zu setzen. Das ist auch cool.
Genau. Also MarginInline vielleicht zur Erklärung macht Left und Right gleichzeitig und das wäre quasi ein Ersatz für dieses klassische MarginNullAuto. Da könnte man nur noch sagen MarginInlineAuto.

[1:09:49] Oder bei so Utility CSS Frameworks wie jetzt Y und X. Also, da verwechsel ich es immer, gell?
Ich weiß immer, was X und Y ist, aber ich weiß auch immer nicht, was horizontal und vertikal ist. Ich weiß auch immer nicht, was eine Spalte und eine Zeile ist, Row und Column.
Ich habe gesehen, dass es tatsächlich eine geniale Überleitung zu Tag 4 und 5 mit Min und Max gewesen wäre.
Aber kurz zu dem, was ich jetzt auch gerade Callum und Raul gesagt hatten, das March and Trim.

[1:10:26] Wofür ist das da? Was mache ich damit? Wir sind hier gerade bei Tag 96.
Ja, da ist es so, dass ich das am Anfang Februar geschrieben habe und da konnte es tatsächlich nur der Safari Technology Preview hinter einer Flag oder so. Also es war so richtig super neu, quasi frisch aus dem Ofen. Und zwar geht es darum, ganz klassisches Beispiel, eine Liste und da sind ein paar LIs und jedes Li hat Margin Block End, also Margin Bottom quasi, ein Margin nach unten, weil ich Abstand zwischen denen haben möchte. Jetzt könnte es aber sein, dass ich den Margin nicht bei allen LIs haben möchte, sondern nur bei allen außer dem letzten, weil ich will nur zwischen LIs einen Margin haben, aber nicht beim allerletzten. Und was wir bis jetzt gemacht haben, war, dass man dann sagt Li Last Child Margin Block End 0 oder dass man gesagt hat, le not last child margin block end, was ich ein bisschen schwierig finde, oder man hat vom Hayden Pickering geprägte lobotomized owl verwendet, wo man sagt, selektiere alle direkten Kind-Elemente, die auf ein anderes folgen, und nur die bekommen einen Margin Block Start in dem Fall.
Das heißt, so unterschiedliche Workarounds, mehr oder weniger Workarounds, dafür, dass man einfach allen Elementen außer dem letzten immer einen Margin gibt.
Das ist jetzt quasi standardisiert mit margin-trim, d.h. ich kann einfach sagen, alle LIs haben eine Margin nach unten.

[1:11:53] Und auf dem Eltern-Element, also auf der UL, sage ich margin-trim block end, dann schneidet die einfach am Ende den Margin weg.
Oder ich kann sagen margin-trim block, dann schneidet sie es oben und unten weg, den Margin.
Margin. Oder Inline, dann schneidet ihr das ältere Element einfach links und rechts den Margin weg.

[1:12:13] Bei deinem Blogartikel fehlt ein Workaround, da fehlt mein Workaround.
Welcher? Ja, pass auf.
Ich hab mal gehört, dass man sowas wie Margins heutzutage eigentlich gar nicht mehr braucht.
Und mein Workaround ist, dass ich der ul ein Display flex gebe.
Und zwar mit der flex direction, und deswegen bin ich grad draufgekommen, die andere flex direction als die normale. Das ist jetzt entweder Row oder Column, halt die Unnormale.
Und dann kann ich der ganzen Sache nämlich einen Gap geben.
Gap dachte ich vor 5, 3 Jahren noch, das wäre eigentlich nur bei Grid CSS, aber Gap geht ja auch bei Flexbox.
Und kann quasi dann den List-Items einen Gap geben von einem RAM.
Und dann habe ich dieses ganze Margin-Button oder Margin-Start oder vielleicht auch Margin-Collapse, sind diese ganzen Problemchen nicht mehr.
Und ich frage mich die ganze Zeit, ob ich einen Anti-Pattern mache, dass ich da einfach einen Display-Flex mache und die Reihenfolge oder die Direction auf quasi das Andere erstelle, aber es läuft hervorragend.
Also, gerade auch, wenn ich an Dinge denke, wie die sich dann responsive vielleicht umstellen.

[1:13:27] Diese typische Situation, wie ich hab zwei Buttons nebeneinander und hab damals naiverweise dem Linken den Margin Right gegeben oder dem Rechten, andersrum, oh Gott, ist das verwirrend, wenn man das versucht zu sagen als zu schreiben, Auf jeden Fall so, dass eine Lücke dazwischen entsteht, aber dann bricht sie es um auf dem Responsive und hast du plötzlich den einen Button, der da irgendwie so ein komisches Pseudomargin hat, das du jetzt bei zwei Zähler gar nicht brauchst.
Und da ist natürlich auch der Scap ziemlich hervorragend und man kann den Scap auch hier auf horizontale und vertikal verschieden setzen.
Ja, funktioniert ganz oft, aber man muss sich einfach bewusst sein, was das Flex macht.
Das Flex macht jetzt nicht nur, störe die beiden nebeneinander oder untereinander und dann kann ich halt ein bisschen Gap verwenden.
E, so verwende ich es auch, nur muss einfach klar sein, dass dann auch noch JustifyContent mitspielt und AlignItems und AlignContent, dass dann auch noch passieren kann, dass ich vielleicht sehr viel Inhalt habe in einem Kindelement, dass das dann vielleicht das ältere Element streckt und so weiter, also das ältere Element und die Kindelemente, Die verhalten sich einfach ganz anders, wenn sie in diesem Flex-Kontext sind.
Das ist so das Einzige, was mir auf die Schnelle einfällt, was irgendwie wichtig ist.
Dass man sich einfach bewusst ist, dass man jetzt in der Flex-Welt ist und da gehen Dinge einfacher kaputt, wenn der Inhalt nicht erwartet ist oder wenn er nicht sehr standardisiert ist.
Wenn es nicht einfach jetzt nur ein Wort ist, sondern wenn es vielleicht mal ein Satz werden könnte oder dann vielleicht mal ein Bild reinfliegt oder sonst irgendwas.

[1:14:55] Ja, ich denke, Flexbox-Probleme haben wir alle schon mal durcherlebt.
Ich glaube, grad, wenn sich's Flex auch noch selber verschachtelt, wird's merkwürdig.
Ich kenn ja auch noch meinen berühmten Hacker, nicht meinen, aber einen, den ich so oft verwenden musste, und ich weiß schon gar nicht mehr, warum eigentlich, irgendwie den Min-Width auf null setzen, damit die Width dann richtig berechnet wird.
Das hatte ich bei diesem ganzen Truncating mit Ellipsis und Pünktchen, Pünktchen, Pünktchen, bis ich dann irgendwann einfach gesagt hab, Pünktchen, ist doch für die User Experience eh schlecht, wenn wir da was nicht anzeigen.
Das war dann mein nicht-technischer Workaround-Solution für, ich konnte diesen CSS-Bug gerade nicht fixen, habe stattdessen gesagt, Pünktchen, Pünktchen, Pünktchen, eh eine schlechte Idee, wir haben doch Platz.

[1:15:42] Ja genau, darauf wollte ich raus, auf dieses MinWidth, weil standardmäßig ist die MinWidth auf Auto, wenn es irgendwie ein Flex-Container ist.
Und ähm, äh, steppe es nämlich auf, falls ich etwas Falsches sage.
Aber sobald das der Fall ist, kann das Eltern-Element vom Kind-Element gestreckt werden und dann schauen Dinge seltsam aus.
Und wenn ich es auf Minimum-Zero setze, dann wird es halt nicht mehr gestreckt.
Ich glaube, so war das, so circa.

[1:16:07] Oder ist das? Ja, und das, äh, du kannst, wenn du jetzt, äh, drei oder zwei Elemente in diesem Flex drin hast, die unterschiedlich viel Content haben, dann schrumpfen die nicht quasi im gleichen Maße, wenn du nicht Min-Width null setzt.
Weil die quasi in die Welt starten mit einer Min-Width, die, glaub ich, Fit-Content-Breite hat. Ah ja, okay.
Genau, und dann, das will man halt oft eben nicht, auch wenn's eigentlich ganz cool ist, dass es so ist, aber oft will man dann wirklich so, Hey, linke Box soll immer so breit sein wie die rechte Box, auch wenn links vielleicht viel mehr Text von uns.

[1:16:50] Ja, aber wir können uns einig sein, dass Margin Trim, weiß ich nicht, zehn Jahre zu spät kommt.
Also, wenn's jetzt wirklich vor, ich sag jetzt, zehn Jahre ist eh realistisch, weil, wenn das Grid, Grid ist vor sechs Jahren rausgekommen, also Flex ist auch schon ein bisschen älter.
Wenn's jetzt vor zehn Jahren rausgekommen wäre, wär's wahrscheinlich ein Game Changer gewesen.
Für viele, also nicht Game Changer, vielleicht nicht, aber schon eine große Hilfe.
Jetzt ist es so, oh ja, Leo, eh nicht.
Nee, doch, wirklich, auch bei dem, Ich bring jetzt mal wieder die Utility-CSS-Beispiele, weil hier kommen dann doch die Probleme von ...
Ich sag es einfach, weil ich nicht die ganze Zeit Utility-CSS sagen will, aber die Probleme von Tailwind, die dann aufkommen. Ähm ...
Ähm ... Ähm ... Ähm ...
Das ... Entweder ist es von den Frameworks vielleicht noch nicht unterstützt, oder die Developer wissen nicht genug darüber, wie man's am besten schreibt.

[1:17:45] Dieses Not Last Child oder bei dem Last Child, dann aber wieder auf Null, ist im Standard-CSS, ist vielleicht so ein kleiner Workaround, aber ich finde, man kann das in Standard-CSS ziemlich gut lesen.
Bin tatsächlich auch in ein Fair- Ne, wir werden alle alt, wir sind alle Fans von dem Lesbaren, also ich mag auch eher so LI, das hier, aber LI Last Child, dann das hier, anstatt dieses LI Not Last Child, weil das irgendwie so eine umgedrehte Lesereihenfolge ist.
Bei Table CSS geht das ganz genauso. Ich weiß ehrlich gesagt nicht seit welcher Version, aber es geht seit langem ganz genauso, dass du genauso auch die Prefixes dafür hast, für Not und Last Child, sodass du kein extra CSS mehr dafür schreiben musst.
Es ist aber ungewohnt, und dann beginnt das wieder, dass man anstatt jetzt eine Table-Klasse im HTML zu verwenden, zum Style-Block geht und sagt, okay, schreibe ich doch wieder meinen eigenen Standard-CSS.
Und dann hat man dieses, aber es gibt ja eine Table-In-Klasse dafür, also sollte ich konsistent bleiben?
Oder mache ich jetzt hier doch das Leserliche? Also, das ist sowas Banales eigentlich, und dann stolpert er und wird dann irgendwie ein bisschen verlangsamt beim Programmieren.

[1:18:54] Ja, am besten einfach nicht Table-In-In verwenden. Nein, starten wir jetzt nicht mit dem, das macht zu viel auf.
Ja, eh, schwierig.
Ja, also vor zehn Jahren wäre Smartroom schon super gewesen. Mal schauen. Ich versuche mich so ein bisschen zu wehren, weil ich so sauer bin, dass es das jetzt erst gibt.
Bist du noch vor 20 Jahren, wo die CMS dann bei den Items ein Class First und ein Class Last dann für einen noch bereinigt haben?
Ja, freilich.

[1:19:25] Stimmt. Das waren noch gute Zeiten. Wir sind alle alt.

[1:19:30] Ja, das war es so, würde ich sagen. Also es gibt aber noch sehr coole Dinge, also ich möchte es nicht noch mehr erzählen, wir reden hier schon sehr lang, aber wenn ich einen Tipp geben darf, was ich empfehlen würde, was sehr interessant ist, was jetzt nicht super neu ist, aber trotzdem höchst interessant, wäre Tag 82, Value Processing.
Da geht es jetzt wirklich gar nicht eigentlich um modernes CSS, sondern vielmehr darum, dass ich irgendwas mit Container-Style-Queries probiert habe und nicht verstanden habe, warum das funktioniert, wie es funktioniert.
Dann habe ich Miriam Sosaing geschrieben, habe gesagt, hey, sorry, dass du jetzt schon wieder auf die Nerven gehen musst, aber du musst mir was erklären, bitte.
Dann hat sie es mir erklärt und hat gesagt, ja, das funktioniert deswegen so, weil wir den computed value verwenden.
Und dann habe ich so getan, als würde ich verstehen, was sie meint.
Und sie hat gesagt, ah, okay, super cool, danke.
Und dann hab ich in die Spec reingeschaut und hab dann gesehen, okay, es gibt nicht nur einen computed value, sondern es gibt einen declared value, einen cascaded value, einen specified value, einen used value, einen actual value, genau, Punkt.
Und sozusagen ein Wert, der definiert wird, der kann unterschiedliche Phasen durchgehen, also vor allem, wenn ich jetzt hier einen relativen Wert verwende, so was wie current color, der muss ja dann irgendwann auf eine echte Farbe gemappt werden, die dann vom älteren Element kommt oder vom eigenen Farbwert und der könnte genauso dann wieder irgendein relativer Wert sein.

[1:20:57] Und genau, das ist irgendwie sehr, sehr spannend, sich das mal durchzulesen, welche unterschiedlichen Phasen so ein Wert durchnimmt.
Das ist ein Tipp, dann würde ich euch noch empfehlen, Takt 63, der Unterschied zwischen Inherit, Initial, Unset und Revert.
Ich habe es sicher vergessen wieder, also vielleicht könnte es jetzt wieder geben, wahrscheinlich nicht, Aber das ist auch sehr spannend, mal zu wissen, woher überhaupt.
Also, Inherit kann ich.
Unset, glaube ich, weiß ich jetzt. Und Initial habe ich tatsächlich nicht gewusst, was es bedeutet.
Und das ist auch so.

[1:21:36] CSS 101, mehr oder weniger. Auch ganz spannend. Bei dem Inherit würde ich kurz einspringen.
Ich glaube, du hattest da schon vor Jahren einen meiner Lieblingsartikel, in dem du beschrieben hast, mit diesem Reset-CSS, wie einfach es doch auch eigentlich ist, ist so ein Button oder ein Link mit Inherit oder irgendwas, weiß ich gerade nicht mehr, zurückzusetzen.
Auf jeden Fall war das auch eine Sache, die ich dann oft gerne verwendet habe, weil ich war auch teilweise so, ah, das ist zu viel Arbeit, das zurückzusetzen in dem Kontext und etc.
Und festgestellt habe, nein, es ist sehr, sehr einfach, das zurückzusetzen.
Ja, eine Kombination, es war, glaube ich, All Initial, dass du sozusagen alle Eigenschaften auf den Initialwert setzt, wie in das Pack definiert ist, und dass du dann hergehst und sagst, Font-Family-Inherit zum Beispiel. Also, dass du sozusagen alles nullst, so wie es in Aspect definiert ist.
Das heißt, die Browser, die User-Agent-Style-Shields umgehst, aber dann gewisse Dinge, die du aus dem älteren Element rausholst.
Also eine Kombination aus Initial und Inherit.
Genau. Also, ich habe einen Blog-Artikel auch gleich wieder gerade gefunden. Den schicke ich mit in die Schaunotizen.
Cool. Und noch ein letzter Tipp. Und das hat mich so geflasht.
Tag 29. Nein, sorry, warte mal, blödsinn.

[1:22:56] Tag 74.
Da geht es um Important in Cascade Layers und wie es funktioniert.
Aber eigentlich geht es hauptsächlich darum, wie Important funktioniert.
Also ich arbeite seit über 15 Jahren professionell in dieser Branche und ich habe anscheinend nicht gewusst, wie Important funktioniert.
Gedacht, ich weiß es, aber offensichtlich habe ich es nicht gewusst.
Der Consultant. Ja.
Aber zu Kunden gehe ich, hallo, Experte, Important, Profi, nein, es ist tatsächlich schon so, aber was sozusagen im Hintergrund passiert, man merkt es quasi nicht und so richtig kommt es erst heraus, wie important wirklich funktioniert, wenn man mit Layers arbeitet.
Das werde ich jetzt fix nicht versuchen, nach 80 Minuten Gespräch wiederzugeben, aber ich kann sehr empfehlen, am Ende des Artikels, wenn man nicht lesen möchte, gibt es ein Video von der Juna, wo sie es auch noch mal erklärt hat, weil ich glaube sie, also wenn wenn ich ihre Reaktion mir anschaue, sie hat es auch nicht gewusst. Sie war auch sehr geflasht.

[1:23:54] Ja, es ist ein großartiger Cliffhanger. Ein Fünf-Minuten-Video, das schauen wir uns an.
Genau, aber ich wollt nur sagen, ging mir genauso.
Und ich hab's auch erst geschnallt, als der Brahmos seinen Talk gemacht hat.
Der hatte auch noch mal einen über eben Cascade Layers, und dann hat er eben auch noch mal quasi aufgearbeitet, wie funktioniert die Kaskade.
Und ja, schon irgendwie cool. Aber es ist halt so ein bisschen ...
Also, ich glaube, wenn du dich am Anfang hinsetzt Theorie jetzt erstmal lernst, bevor du die erste Zeile schreibst.
Das funktioniert nicht. Also kennen wir auch aus der Schule, wofür lerne ich den Scheiß?
Aber viel cooler ist es eigentlich, erstmal so damit zu arbeiten und dann nachträglich, nachzulesen oder irgendwie aufgeschlüsselt zu bekommen, warum passieren die Sachen so.
Und dadurch, dass man dann Bezug dazu hat, dann schneidet man das halt auch.
Und dann ist das wirklich so augenöffnend und super spannend.

[1:24:54] Voll. Und damit schließt sich jetzt auch ein bisschen der Kreis.
Also wir kommen jetzt quasi wieder zum Anfang zurück, weil es war wirklich sehr mühsam.
Es war einfach höllisch, weil ich hab's durchzogen. Ich hab die 100 Tage wirklich durchgezogen, außer die Wochenenden, die hab ich freigehalten.
Aber ich hab's geschafft, das wirklich in diesen 100 Tagen zu schreiben.
Aber ich hab mich selber sehr unter Druck gesetzt.
Es war einfach dann teilweise einfach wirklich nervig und auch einfach schwierig, dann irgendwie das mit der Arbeit dann hinzubekommen, weil ich dann trotzdem eine Stunde machen musste.
Gleichzeitig habe ich aber auch wirklich viel gelernt und deswegen auch diese letzten drei Tipps sind so Standard-CSS und die waren für mich fast die wertvollsten, weil die neuen Sachen, die kann man sich ganz gut durchlesen, aber eben diese zugrunde liegenden Konzepte so richtig zu verstehen und mal so zu verstehen, damit du andere Dinge verstehen kannst, das war irgendwie sehr, sehr wertvoll. Also es war schon sehr cool.

[1:25:40] Genau, und damit steigerst du ja quasi dann deine Consultant-Fähigkeiten ja am Ende dann auch wieder, ne?
Ja, und die Stundensätze vor allem.
Und die Stundensätze, ja. Genau, Cascade, Layer, verstanden, 10 Euro mehr.
Ja, aber das ist, nee, ernsthaft, das ist eine ganz großartige Liste und ich schaue schon jetzt die ganzen einzelnen Tage durch. Also das ist sehr schön, kurz, freundlich angeschrieben.
Ich hab übrigens Chat-GPT in der Zwischenzeit gefragt, ob's has, has not, not has erklären kann.
Ich glaub, es konnte es, ich hab's nicht verstanden. Ich war noch mehr verwirrt.
Ich glaub, von der ganzen ... Es ist danach rund down gewesen. Der konnte nicht mehr.
Ich frag gleich, ich versuch's gleich mit GPT4 noch mal.
Vielleicht kommt was anderes raus.
Aber ich glaub, von dieser ganzen Liste ist Day 48 ... 48 ... Warum drehen wir auf Deutsch jetzt ...
Entschuldige, ganz anderes Thema.
Bei Tag 48, Inset 0, ist glaube ich das, was ich am häufigsten verwende von der ganzen Liste.
Weil das ist dieses Top Null, Right Null, Left Null, beziehungsweise auch da gibt es ja nur Left und Right Null, Das ist ganz super zum...

[1:26:50] Zentrieren. Und auch vertikal, weil ich hatte da nämlich auch letztens über was so einen Loading-Spinner.
Und zufällig war das tatsächlich was absolut Positioniertes, weil das war während ein Bild, hochgeladen wird. Ich kann es ja schon anzeigen, weil im Browser ist die Datei schon vorhanden, aber ich will es ja noch an den Browser hochladen, äh, an den Server hochladen. Und hab Design-Team kurz gefragt, kannst du das auch vertikal zentrieren? Und ich wollte schon kurz pauschal Nein antworten.
Aber es ging dann doch ganz einfach. Und entweder ging das eigentlich schon immer mit Left und Right null, oder ich wusste es damals nicht, aber ich kann mich daran erinnern, so vor zehn Jahren, vielleicht wusste ich es nicht, habe ich irgendwie noch so ausgerechnet, dass ich das jetzt Left auf 50 Prozent setzen muss, aber so minus 13 Pixel, was mein Bildchen-Loader-Dingens da breit war.
Aber es ging wahrscheinlich auch damals. Ich würde behaupten, es ging schon.
Die Kombination aus left, right, null, margin, left, right, auto und einer Breite.
Deswegen habe ich extra vor zehn Jahren dazu gesagt.
Genau, genau, genau.
Genau, und jetzt gibt es aber auch inside, inline, inside block.
Das heißt, du kannst auch die unterschiedlichen Achsen. Aber weil du gerade 48 gesagt hast, 84 kann ich auch sehr empfehlen.
Die Add-Property-Rule.

[1:28:11] Die Add-Property-Rule, so. Das ist sehr cool, weil das wird vor allem die TypeScript-Fans, sehr freuen.
Da kann man nämlich CSS-Custom-Properties typen quasi.

[1:28:28] Ich find das auch supercool. Und der Safari unterstützt das jetzt auch neuerdings.
Ja. Ah, okay. Sehr cool.
Genau. Fehlt dann nur noch der Firefox.
Ja, recht oft in letzter Zeit. Has zum Beispiel. Ja, aber müsste, also ist ja so quasi so im Begriff ähm äh stable zu werden auch bei denen.
Ah ja, richtig.
Das also hinter Flex hängt das noch, ich vermute mal ähm, also das sieht man auch bei Safari, die äh bei den letzten Releases haben die sehr viele Bugs gefixt, die auf äh Hass zurückgehen.
Und das ist so quasi deren Dirty Checking, also weil die quasi umgekehrt müssen die sich, müssen die das Dirty-Checking ja im DOM machen.
Wenn zum Beispiel ein Element nicht mehr Fullscreen ist, dann kriegt das halt ...
Dann hatte der Safari auch mal hier und da bei so ganz seltsamen Pseudoklassen und so, eben noch so Bugs, die halt Leute dann bei der Benutzung rausgefunden haben.
Und ich vermute mal, dass das beim Firefox wahrscheinlich auch so was ist.
Kann ich mir auch gut vorstellen, dass das eklig ist.

[1:29:38] Ja, super, super cooles Projekt von dir. Also ich kann mir das gut vorstellen, wie du gelitten hast und aber jetzt, wo du es halt gemacht hast, dann danach ist ja immer echt cool und du hast ja auch schon also deinen Consultant Fähigkeiten und Gehalt konntest du steigern damit. Du wurdest zum CSS Day eingeladen, das ist ja auch super.
Genau. Ähm, richtig cool und wirklich alles megageile Themen, die du da rausgepickt hast.
Und genau, also, wir haben jetzt relativ lange drüber gesprochen, und trotzdem haben wir, glaub ich, nur die Hälfte irgendwie erfasst.
Und manche Dinge muss man ja auch dann quasi in Code sehen.
Genau, genau, genau.

[1:30:25] Ja, einen Effekt gab's noch. Ich hab seitdem, glaub ich, nix mehr geschrieben.
Und das wird sich auch nicht so bald ändern.
Wann war das letzte Post?
Am 14. Februar habe ich noch meine CSS-Wishlist gepostet, aber bin ein bisschen ausgebrannt, was das Bloggen betrifft.
Das glaube ich dir. Genau, du hast ja auch genug Supermaschinenoptimierung jetzt betrieben und so. Ja. Super. Ja, ja.
Dank dir für deine Zeit, fürs Dasein. Ja, vielen Dank für die Einladung.
Gerne. Vielleicht kann man nochmal eine zweite Einladung aussprechen, aussprechen, weil du hattest ja eigentlich auch mal Lust über quasi html-first-content-management-Systeme oder Generatoren zu sprechen.
Vielleicht machen wir das einfach nochmal dediziert.

[1:31:14] Voll. Also ich bin jetzt mal bis zum CSS Day damit beschäftigt, Angst davor zu haben, mit Größen aus der CSS-Welt auf der Bühne zu stehen, um einen Talk vorzubereiten.
Aber danach werde ich mich auf das Thema JavaScript Frameworks stürzen, beziehungsweise HTML, First JavaScript Frameworks, Meta-Render Frameworks und so.
Wir sind ein ganz spannendes Thema. Ich find's ein spannendes Thema für Leute, die auch nicht aus der JavaScript-Welt kommen, die vielleicht nicht gewohnt sind, mit React und Vue und so weiter zu arbeiten.
Ich glaub, dass sich da sehr viele Möglichkeiten bieten. Aber ich hab's noch nicht fertig gedacht.
Deswegen ist es ganz gut, wenn wir nächstes Jahr sprechen.

[1:31:58] Machen wir. Genau, wir werden da Wind von kriegen wahrscheinlich, weil du wieder 100 Blogposts überschreibst. Kann passieren. Kann sein, dass ich vielleicht schon eine Liste begonnen habe.
Alles klar, cool. Genau, wenn die Hörer noch Rückfragen haben, oder eben coole Projekte umgesetzt haben mit neuen Features, dann bitte, bitte schickt sie uns. Wir sind super interessiert dran.
Und genau, Kommentare gerne in unserem Community-Slack auf Mastodon. Auf Twitter vielleicht lieber nicht, weil der Manuel da gesperrt ist.
Lieber auf Mastodon. Nochmals vielen Dank. Liebe Grüße nach Graz.
Viele Grüße nach in der Nähe von München. Was war? Freising, richtig? Ja, genau.
Aus Düsseldorf. Einen schönen Abend. Bis bald. Macht's gut. Tschüss. Tschau tschau.

[1:32:47] Music.

[1:33:16] Untertitel von Stephanie Geiges.