WEBVTT

00:00:00.017 --> 00:00:02.557
Ich würde normalerweise von mir selber behaupten, dass ich so HTML,

00:00:02.817 --> 00:00:06.097
CSS, JavaScript, Typescript, sonst was, Testing, was auch immer,

00:00:06.237 --> 00:00:07.637
irgendwie so ein bisschen gleich verteilt bin.

00:00:08.357 --> 00:00:11.997
Aber im Endeffekt bin ich, glaube ich, schon mein Hauptfokus einfach auf der

00:00:11.997 --> 00:00:15.797
Vue.js-Implementierung und dem ganzen Ökosystem von State Management und etc.

00:00:16.477 --> 00:00:19.457
Und ich glaube, mit putzelt einfach immer die Zeit runter, mich mit den neuen

00:00:19.457 --> 00:00:23.457
CSS-Sachen zu beschäftigen, wobei ich mich ja irgendwie auch mit neuen Vue.js-Features

00:00:23.457 --> 00:00:24.277
irgendwie beschäftige.

00:00:25.137 --> 00:00:31.777
Warum, um Gottes Namen, haben Bilder, wenn ich sie irgendwo reinstecke,

00:00:31.857 --> 00:00:33.997
warum haben die diesen Abstand unten? Warum?

00:00:34.317 --> 00:00:37.197
Also, was ist das für ein verdammter Browser-Bug?

00:00:38.137 --> 00:00:40.157
Und es ist ja kein Browser-Bug.

00:00:41.200 --> 00:01:06.480
Music.

00:00:54.277 --> 00:01:08.837
Revision 633,

00:01:11.977 --> 00:01:15.277
Diese Revision von Working Draft wird euch präsentiert von Mitwald.

00:01:15.497 --> 00:01:17.317
Next-Level-Hosting für deine Projekte.

00:01:17.777 --> 00:01:20.817
Jetzt fragt ihr euch bestimmt, wie kann so was Langweiliges wie Hosting Next

00:01:20.817 --> 00:01:22.357
Level sein? Ganz einfach.

00:01:22.837 --> 00:01:26.517
Mitwalds hochperformantes Cloud-Hosting ist perfekt abgestimmt auf die Anforderungen

00:01:26.517 --> 00:01:27.997
von Freelancern und Agenturen.

00:01:28.197 --> 00:01:31.617
Es gibt zum Beispiel ein smartes Rollensystem für die Zusammenarbeit mit euren

00:01:31.617 --> 00:01:35.997
Projektpartnern und Midwald hat mit M-Studio auch eine sehr schöne moderne Verwaltungsoberfläche

00:01:35.997 --> 00:01:37.737
gebaut, mit der das Arbeiten Spaß macht.

00:01:38.037 --> 00:01:42.277
Aber jetzt mal ehrlich unter uns Nerds. Sachen anklicken? In einem User-Interface?

00:01:42.417 --> 00:01:44.497
Muss das sein? Nein, muss es nicht.

00:01:44.837 --> 00:01:48.657
Denn bei Midwald gibt's die M-Studio CLI. Mit der könnt ihr euer Hosting komplett

00:01:48.657 --> 00:01:51.857
über die Kommandozeile verwalten und natürlich auch entsprechend automatisieren.

00:01:52.037 --> 00:01:55.477
Von Nerds für Nerds bringt euch Mitwald die optimale Developer Experience,

00:01:55.637 --> 00:01:56.677
wenn es ums Hosting geht.

00:01:56.937 --> 00:02:00.857
Und deshalb jetzt auf zu mitwald.de slash workingdraft.

00:02:00.957 --> 00:02:04.037
Denn da wartet auf euch, exklusiv als Hörer von Working Draft,

00:02:04.257 --> 00:02:07.897
das Angebot, den Tarif pro Space für 30 Tage kostenlos zu nutzen.

00:02:08.057 --> 00:02:12.937
Das war nochmal mittwald.de slash workingdraft.

00:02:13.057 --> 00:02:16.577
Wir danken Mitwald für die Unterstützung von dieser Revision von Working Draft.

00:02:20.717 --> 00:02:23.817
Heute sind wir zu zweit. Da haben wir zum einen die Vanessa.

00:02:24.877 --> 00:02:31.097
Servus. Servus und ich bin der Shep und wir wollen uns heute mit dem State of

00:02:31.097 --> 00:02:33.237
CSS, mit der Survey befassen.

00:02:33.657 --> 00:02:36.357
Ich weiß nicht, ob die dann noch offen ist, wenn diese Folge rauskommt,

00:02:36.417 --> 00:02:37.637
aber ich glaube, die ist ja immer eine Weile offen.

00:02:38.406 --> 00:02:42.566
Genau, und wir haben das ja schon ein paar Mal gemacht und ungefähr nach diesem

00:02:42.566 --> 00:02:45.786
Schema würden wir das diesmal auch wieder angehen.

00:02:46.366 --> 00:02:50.346
Wir würden das sozusagen als Stichwortgeber nutzen für modernes,

00:02:50.466 --> 00:02:55.106
aktuelles, vielleicht auch zukünftiges CSS und würden durch die verschiedenen

00:02:55.106 --> 00:02:59.006
Blöcke oder Kapitel oder wie auch immer man das dann nennt.

00:02:59.886 --> 00:03:05.666
Durcharbeiten und uns da so die vielleicht bis zu drei interessantesten Punkte

00:03:05.666 --> 00:03:08.306
rauspicken, die uns irgendwie ins Auge fallen.

00:03:08.406 --> 00:03:13.346
Über die wir reden möchten und mal gucken, was wir darüber so erzählen können.

00:03:14.106 --> 00:03:19.086
Genau, generell finde ich eigentlich dieses State of CSS oder generell diese

00:03:19.086 --> 00:03:22.686
Services gibt es ja auch, denke ich, zu JavaScript, HTML und zu anderen Themen.

00:03:23.026 --> 00:03:28.686
Ich finde die extrem cool, also einerseits cool gemacht, es macht Spaß,

00:03:28.926 --> 00:03:33.266
aber auch immer wieder einen guten Reminder für, was sind denn so die neuen Features.

00:03:33.746 --> 00:03:37.706
Denn bei den letzten Malen, als wir das gemacht hatten, hatte ich mich besser

00:03:37.706 --> 00:03:41.366
vorbereitet, bin das Survey vorher selber durchgegangen und habe mir das auch

00:03:41.366 --> 00:03:45.366
so stichwortmäßig runtergeschrieben, was man dann dazu erzählen kann.

00:03:46.086 --> 00:03:50.446
Diesmal bin ich ein bisschen blank und ich habe mich, glaube ich,

00:03:50.486 --> 00:03:53.626
einfach sehr sicher gefühlt, weil du Shep dabei bist und ich mir gedacht habe,

00:03:53.726 --> 00:03:56.306
ach ja, da brauche ich mich ja nicht vorbereiten.

00:03:57.706 --> 00:04:01.226
Und vielleicht so ausgedrückt, einfach so ein bisschen Arroganz mitgebracht

00:04:01.226 --> 00:04:05.226
von ich mache fünf Tage die Woche Full-Time Frontend Development,

00:04:05.846 --> 00:04:07.566
mir wird ja schon irgendwas einfallen.

00:04:07.966 --> 00:04:14.006
Und ich bin jetzt vor der Aufnahme so über die erste Kategorie drüber gescrollt, über Layout.

00:04:14.466 --> 00:04:19.306
Und ich kann sagen, ich hätte jetzt überall sagen können, ja, habe ich von gehört.

00:04:19.706 --> 00:04:22.766
Und wenn ich jetzt professionell erklären möchte im Podcast,

00:04:23.046 --> 00:04:26.106
was genau und wieso, weiß jetzt auch nicht so genau.

00:04:26.746 --> 00:04:31.746
Bei CSS habe ich einfach auch das Gefühl, für mich waren einfach da schon so viele Probleme gelöst.

00:04:32.126 --> 00:04:35.746
Es ist auch weiterhin immer ein bisschen schwieriger für mich in Grid zu denken,

00:04:35.806 --> 00:04:38.766
als auch in Flex, weil ich es einfach so flex, so gewohnt war.

00:04:38.966 --> 00:04:42.986
Und ich weiß, dass Grid teilweise bessere Features hat, in manchen Bereichen

00:04:42.986 --> 00:04:47.506
auch besser funktioniert und man dann nicht diese komischen Flexbox-Hacks teilweise

00:04:47.506 --> 00:04:52.926
wieder braucht, wie eine MinWid von Null zu setzen, damit eine Truncation und eine Ellipsis geht.

00:04:53.606 --> 00:04:56.846
Genau, deswegen finde ich die einfach sehr cool, dass es das überhaupt gibt,

00:04:57.066 --> 00:05:01.366
um uns alle, die sonst im Alltagsarbeit stecken und irgendwie schon immer die

00:05:01.366 --> 00:05:03.866
Probleme gelöst bekommen mit anderen CSS-Regeln,

00:05:04.346 --> 00:05:07.586
einfach die Erinnerung haben wie, ach ja, das gibt es ja jetzt auch noch und

00:05:07.586 --> 00:05:09.826
vielleicht kann man das jetzt auch verwenden.

00:05:11.742 --> 00:05:17.782
Das Gute ist ja, dass der Set of CSS ja auch seit einigen Iterationen die Möglichkeit bietet,

00:05:18.042 --> 00:05:23.982
dass man sich Dinge, die man interessant findet, mit so einem Plus-Knopf so

00:05:23.982 --> 00:05:29.082
auf seine, im Prinzip sowas wie Watchlist oder muss ich mir nochmal angucken,

00:05:29.242 --> 00:05:32.462
List packen kann und genau, das ist eigentlich ganz schön,

00:05:32.762 --> 00:05:38.002
also könnt ihr ja da auch mal machen und dann am Ende so eine Liste an Dingen,

00:05:38.342 --> 00:05:40.482
in die man vielleicht nochmal reingucken könnte.

00:05:40.482 --> 00:05:47.082
Vielleicht noch eine Sache vorab, weil wir uns kennen und auch die Surveys ja

00:05:47.082 --> 00:05:49.422
in der Regel recht umfangreich sind.

00:05:50.302 --> 00:05:55.882
Würden wir auch hier dieses Mal wieder splitten in mindestens zwei Teile.

00:05:56.562 --> 00:06:00.662
Nur diesmal planen wir das gleich schon mal. Genau, wir planen das direkt.

00:06:01.082 --> 00:06:06.302
Genau, also nicht wundern, wir werden so ungefähr in der Mitte der Features,

00:06:06.502 --> 00:06:10.302
was wahrscheinlich, also wir haben jetzt gesagt Typography, das ist das fünfte Kapitel.

00:06:10.442 --> 00:06:15.682
Danach werden wir mutmaßlich einen Cut machen und dann führen wir die ganze

00:06:15.682 --> 00:06:19.062
Geschichte in einer separaten Episode fort.

00:06:19.062 --> 00:06:25.662
Ich wollte auch gerade noch loben, weil ich habe dieses Plus angeschaut,

00:06:25.742 --> 00:06:30.522
als du gemeint hast, man kann das jetzt so auf die Readinglist setzen und...

00:06:31.385 --> 00:06:34.125
Natürlich probiere ich immer gleich aus, was passiert denn da,

00:06:34.145 --> 00:06:36.805
wenn ich da nicht draufklicke oder meine Maus verwende oder Touchpad,

00:06:36.885 --> 00:06:38.025
was passiert mit dem Keytab.

00:06:38.365 --> 00:06:43.545
Und das ist einerseits wirklich hübsch gestylt und soweit ich das beurteilen

00:06:43.545 --> 00:06:44.505
kann, auch sehr accessible.

00:06:44.725 --> 00:06:48.865
Also ich kann da mit dem Keyboard hindrücken mit der Tab-Taste und dann sehe

00:06:48.865 --> 00:06:52.885
ich auch Add to your Reading List als Tooltip und wirklich schön designt, also schön.

00:06:54.005 --> 00:06:58.125
Und was ich dann weiter loben wollte, man kann auch durch das ganze Menü durchklicken,

00:06:58.605 --> 00:07:04.245
sehr schöne Farben auch bei den Umrahmungen dann von den fokussierten Elementen

00:07:04.245 --> 00:07:06.565
und man sieht die auch immer alle vier Seiten.

00:07:06.565 --> 00:07:10.985
Ich glaube, das ist so eine Regel, gegen die man echt in der Realität teilweise

00:07:10.985 --> 00:07:14.905
sehr stark verstoßen kann, dass wenn ich sage, ich kann zwar alles,

00:07:14.925 --> 00:07:16.945
was fokussiert werden muss, zwar fokussieren,

00:07:17.145 --> 00:07:20.605
aber was weiß ich, aus welchen Ziel ist, also Layout gründen,

00:07:20.765 --> 00:07:23.185
ist dann halt irgendwie der linke Strich davon abgeschnitten.

00:07:24.645 --> 00:07:29.845
Nur komme ich nicht zu dem Hauptnavi von diesen, wie nennt man das denn?

00:07:30.085 --> 00:07:32.985
Das sind so Punkte mit Layout. Meinst du die Kapitelnavigation oder was?

00:07:33.005 --> 00:07:34.765
Die Kapitelnavigation, da komme ich nie rein.

00:07:34.985 --> 00:07:38.405
Ich komme trotzdem weiter, weil ich kann ja unten von der ganzen,

00:07:38.585 --> 00:07:42.785
von dem Formular, ich schaue jetzt gerade auf das Formular von Layout und da

00:07:42.785 --> 00:07:47.685
ganz unten ist ein Weiter-Button zur nächsten Kategorie. da komme ich hin. Aber dieses.

00:07:49.985 --> 00:07:56.405
Ganz leider diese Zeitstrahlenkategorien Navigation komme ich nicht hin.

00:07:58.065 --> 00:08:01.285
Stimmt, das hat der,

00:08:03.325 --> 00:08:08.645
Autor glaube ich vergessen. Obwohl, es schaut mir recht gut aus.

00:08:08.765 --> 00:08:13.285
Da ist so ein Diff, da ist eine Nav, da ist eine Diff, da ist ein UL mit Listitem

00:08:13.285 --> 00:08:14.365
und dann ein Anchor drin.

00:08:15.445 --> 00:08:19.685
Ah, das hat einen Tab-Index minus eins. Okay, wir gehen da jetzt mal durch.

00:08:20.805 --> 00:08:26.225
Ich schaue mal nach der Episode, was da los ist, dass man die nicht anklicken kann.

00:08:28.027 --> 00:08:34.707
Dann, was wäre denn dein erstes Layout-Feature, das du spannend findest oder

00:08:34.707 --> 00:08:38.007
das, was du vielleicht auch irgendwie sagst?

00:08:38.167 --> 00:08:40.487
So, hä, okay, was soll das sein?

00:08:41.487 --> 00:08:44.867
Gleich das allererste. Und das ist das Subgrid.

00:08:45.127 --> 00:08:50.987
Ich habe ja hier gerade schon behauptet, ich habe immer von so Muscle Memory,

00:08:51.147 --> 00:08:54.007
dass ich mit Flexbox anfangen will, bevor ich an Grid denke. Okay.

00:08:56.327 --> 00:09:01.067
Allerdings, ich habe es noch extremer gehört, so gute, gute,

00:09:01.127 --> 00:09:03.627
wirklich gute Frontend-Devs, die mir gesagt haben, ich mache einfach gar nichts

00:09:03.627 --> 00:09:06.047
mit Grid. Ich mache einfach alles mit Flexbox und funktioniert doch.

00:09:06.287 --> 00:09:10.307
Also ich kenne noch nicht mal quasi die CSS-Values oder Attribute,

00:09:10.547 --> 00:09:13.787
die man setzen kann, während ich zumindest schon häufig rumgespielt habe und

00:09:13.787 --> 00:09:19.047
für mich herausgefunden habe, ich bin jetzt nicht so die Typin für die Areas zu setzen.

00:09:19.747 --> 00:09:23.527
Ich bin eher so der Typ, um dann diese Grid-Template-Columns zu setzen und die

00:09:23.527 --> 00:09:24.727
Template-Rows zu setzen.

00:09:25.467 --> 00:09:30.307
Passt vielleicht ein bisschen mehr auch zum Tailwind-CSS oder zum Util-CSS-Style

00:09:30.307 --> 00:09:33.647
zusammen, dass man jetzt nicht irgendwie das CSS-Datei hat, wo ich die Areas

00:09:33.647 --> 00:09:38.447
anlege, sondern dass ich eher die Kürzel habe für, oh Gott,

00:09:39.727 --> 00:09:43.887
Rows 2 oder Callspan 3 oder wie es dann irgendwie heißt.

00:09:44.007 --> 00:09:46.807
Die Autocompletion macht es normalerweise für mich, um dann zu sagen,

00:09:46.887 --> 00:09:51.947
ich möchte hier einfach drei Spalten haben und hier in der ersten Zeile die

00:09:51.947 --> 00:09:55.867
ersten zwei sind eine Zeile und so weiter. Ja.

00:09:56.587 --> 00:10:00.767
Und ich habe aber eben gehört, dass gerade dieses Subgrid halt was ist, was vielleicht.

00:10:03.027 --> 00:10:06.307
Wirklich viel ermöglicht und sehr cool ist.

00:10:06.927 --> 00:10:10.267
Und ich weiß auch noch, dass ich zumindest auch mal so ein Wartemodus war,

00:10:10.347 --> 00:10:13.827
zu sagen, okay, ich warte mal, bis das so voll krass unterstützt ist und so

00:10:13.827 --> 00:10:15.027
und dann schaue ich es mir genauer an.

00:10:15.447 --> 00:10:18.547
Und das war der Punkt, von dem ich vormann. Wahrscheinlich habe ich den Punkt lang verpasst.

00:10:18.627 --> 00:10:22.127
Wahrscheinlich ist das schon vollkommen überall in jedem Browser drin und ich

00:10:22.127 --> 00:10:23.827
habe vergessen, mich damit zu beschäftigen.

00:10:24.367 --> 00:10:28.727
Und würde jetzt dich fragen, könntest du mir dann erklären, was genau das Subgrid macht?

00:10:28.907 --> 00:10:34.547
Und ich sage hier auch noch, verwendet wird es gerade hier in der Klasse für ein Item.

00:10:34.967 --> 00:10:41.867
Das hat Display Grid schon dran und zusätzlich dann Grid Template Rows mit dem Wert Subgrid.

00:10:43.901 --> 00:10:48.821
Genau, also dieses Sub-Grid-Feature ist eigentlich ein Punkt,

00:10:49.061 --> 00:10:51.981
den Rachel Andrew, die du, kennst du die?

00:10:53.081 --> 00:10:57.361
Genau, die ist ja auch so ein CSS-Mastermind, sag ich mal. Ja,

00:10:57.881 --> 00:11:00.281
und sehr, sehr, sehr höflich, sehr freundlich.

00:11:00.401 --> 00:11:03.001
Ja, super, super Person.

00:11:03.381 --> 00:11:05.001
Ja, tolle, ja, genau.

00:11:06.421 --> 00:11:15.321
Und ich glaube, das war schon 2014 oder so, als über Grid diskutiert wurde, dass sie sagte.

00:11:16.941 --> 00:11:23.701
Eigentlich fehlt uns ja was, wenn wir mit Grids arbeiten, nämlich die Fähigkeit,

00:11:24.061 --> 00:11:33.601
dass wir ein Grid-Raster auf einem übergeordneten Element definieren und wir dann aber innerhalb,

00:11:33.861 --> 00:11:39.281
also egal wie tief wir da drin Elemente reinverschachteln, die alle sich an

00:11:39.281 --> 00:11:40.621
diesem Grid orientieren können.

00:11:42.161 --> 00:11:46.861
Also ohne Subgrid, also in der Variante, die wir zuvor kannten,

00:11:47.201 --> 00:11:53.981
ist es ja so, dass nur direkte Kind-Elemente von einem Grid sich in dieses,

00:11:54.181 --> 00:11:56.341
also im Grid platziert werden können.

00:11:56.341 --> 00:12:00.101
Und dann eben Kind-Elemente dieser Elemente,

00:12:00.201 --> 00:12:07.361
das wiederum nicht können und man im Grunde nur hingehen kann und diesen Kind-Elementen

00:12:07.361 --> 00:12:08.941
auch als Grid zu setupen,

00:12:09.001 --> 00:12:14.541
wieder mit eigener Template-Rows und Template-Column-Konfiguration und dann

00:12:14.541 --> 00:12:16.081
hat man darin auch wieder ein Grid.

00:12:16.081 --> 00:12:22.301
So, das kann man machen, das ist ja auch nicht schlimm, ist halt so ein bisschen mehr Code-Arbeit.

00:12:23.281 --> 00:12:28.001
Aber es gibt halt bestimmte Dinge, die man damit nicht umsetzen kann.

00:12:28.001 --> 00:12:31.141
Zum Beispiel, wenn man,

00:12:31.421 --> 00:12:38.241
also stell dir ein Grid vor, das vielleicht drei Columns hat und darin sind

00:12:38.241 --> 00:12:44.401
dann drei Kind-Elemente, die wiederum auch ein Grid sind, aber mit Rows.

00:12:45.061 --> 00:12:50.881
Dann kannst du, dann funktioniert das ja nicht, dass in einem dieser Kind-Elemente

00:12:50.881 --> 00:12:57.821
wiederum auch nochmal ein Kind-Element drinsteckt und diese Grid-Row vielleicht

00:12:57.821 --> 00:12:59.801
irgendwie in der Höhe nach oben schiebt.

00:12:59.901 --> 00:13:03.221
Und das setzt sich dann in den anderen Columns fort.

00:13:03.581 --> 00:13:08.621
Weil es sind quasi drei eigenständige Grids, die dann da drinstecken.

00:13:08.841 --> 00:13:12.001
Und die sind nicht mehr miteinander irgendwie, die wissen voneinander nichts.

00:13:13.441 --> 00:13:22.181
Und bisher konntest du das eigentlich nur lösen, indem du quasi den direkten

00:13:22.181 --> 00:13:26.221
Kind-Elementen von einem Grid in Display-Contents gibst.

00:13:26.441 --> 00:13:30.561
Dadurch behandelt der Browser die, als wären die im Render-Tree gar nicht vorhanden,

00:13:30.661 --> 00:13:35.341
was dann deren Kind-Elemente zu direkten Kind-Elementen des Grids werden lässt.

00:13:36.697 --> 00:13:42.417
So arbeitet ja Display-Contents. Genau, und mit Subgrid wird das eben möglich.

00:13:42.637 --> 00:13:49.197
Und du kannst in den Kind-Elementen dann sagen, ich möchte meine Grid-Template-Columns

00:13:49.197 --> 00:13:52.597
oder Grid-Template-Rows einfach übernehmen.

00:13:52.737 --> 00:13:56.437
Also ich zeige sozusagen auf die von dem Eltern-Element.

00:13:58.217 --> 00:14:03.197
Genau, und das hat die Rachel Andrew eigentlich relativ frühzeitig schon so

00:14:03.197 --> 00:14:10.917
angemerkt, dass wir dieses Feature eigentlich brauchen, um damit Grids richtig cool nutzbar werden.

00:14:12.517 --> 00:14:18.497
Aber das hätte halt einfach die Spec und die Implementation sowas von aufgebläht,

00:14:18.697 --> 00:14:20.837
dass man sich dann darauf geeinigt hat,

00:14:21.057 --> 00:14:27.277
die Grid-Spec in zwei Levels zu teilen und erst mal sozusagen die Pillow-Version

00:14:27.277 --> 00:14:29.857
in Anführungszeichen zu spezifizieren

00:14:29.857 --> 00:14:33.477
und zu implementieren und dann im Anschluss eben die nächste.

00:14:34.477 --> 00:14:36.237
Die dann eben Subgrid enthält.

00:14:37.997 --> 00:14:41.157
Genau, und der Firefox-Browser hat das schon relativ lange supported.

00:14:42.257 --> 00:14:47.137
Eventuell auch, weil damals noch Jen Simmons bei Mozilla gearbeitet hat,

00:14:48.597 --> 00:14:52.357
der so diese ganzen Layout-Techniken auch schwer am Herzen lagen.

00:14:53.277 --> 00:14:57.637
Und bei den Chrome-Browsern war es so, dass die erst mal so einen kompletten

00:14:57.637 --> 00:15:04.097
Render-Engine-Rewrite brauchten, bevor sie das eben vernünftig implementieren konnten.

00:15:04.817 --> 00:15:09.917
Aber das ist jetzt alles passiert und genau, jetzt können wir das Cross-Browser nutzen.

00:15:11.917 --> 00:15:15.877
Ja, sehr schön. Und vielen Dank für die Erklärung.

00:15:16.697 --> 00:15:26.597
Ich hätte jetzt noch die Frage dazu, ob du befürchtest, dass das CSS auch einfach

00:15:26.597 --> 00:15:30.337
komplizierter jetzt wird an dieser Stelle mit solchen Features.

00:15:32.377 --> 00:15:37.417
Also einfach wäre jetzt Display, Doppelpunkt, Grid, Semikolon.

00:15:38.457 --> 00:15:45.297
Aber allein schon mit den Areas hast du ja irgendwie eine andere Art, das zu schreiben.

00:15:45.297 --> 00:15:51.637
Und ich habe jetzt auch schon Sachen gesehen, vielleicht bei Template Columns

00:15:51.637 --> 00:15:56.657
mit in den eckigen Klammern Namen, die drinstehen,

00:15:56.937 --> 00:16:05.957
dann eine Funktion wie MinMax und noch eine CSS-Variable drin von dem MinMax-Value und.

00:16:07.926 --> 00:16:11.946
Denkst du, das wird auch einfach ein bisschen kompliziert oder ist das jetzt

00:16:11.946 --> 00:16:15.326
nur, wenn man das zum ersten Mal sieht, dass man denkt, was ist das denn?

00:16:15.926 --> 00:16:17.646
Man findet dann aber dann doch rein.

00:16:18.606 --> 00:16:27.066
Ich würde sowohl als auch sagen, also das sind halt schon viele neue syntaktische Features,

00:16:27.406 --> 00:16:32.666
die auch grid-spezifisch sind, also die zum Beispiel diese min-max-Funktion,

00:16:32.986 --> 00:16:40.286
die hast du nur, also zumindest momentan nur zur Verfügung innerhalb von dieser Grid-Definition.

00:16:41.726 --> 00:16:46.906
Genau dann die Areas und diese Bracket-Notation, die du meintest,

00:16:48.026 --> 00:16:53.226
sind im Prinzip sowas wie oder die Bracket-Features sind sowas wie Profi-Features

00:16:53.226 --> 00:17:00.366
gibt es ja in allen möglichen Bereichen und die Area-Notation gegenüber der Row-Column-Zuweisung,

00:17:01.646 --> 00:17:06.626
ist einfach eine alternative Herangehensweise, die in bestimmten Szenarien besser

00:17:06.626 --> 00:17:12.706
funktioniert also zum einen, wenn du natürlich so ein bisschen visueller denkst,

00:17:12.766 --> 00:17:14.706
dann ist das vielleicht hilfreich, das zu nutzen.

00:17:14.946 --> 00:17:22.286
Aber auch wenn du basierend auf verschiedenen Breakpoints dein Grid-Layout komplett

00:17:22.286 --> 00:17:24.726
veränderst, dann ist es leichter,

00:17:25.406 --> 00:17:30.286
Elemente diesen Grid-Areas zuzuweisen und dann einfach die Grid-Areas pro Breakpoint

00:17:30.286 --> 00:17:33.406
anders zu definieren als eben,

00:17:34.566 --> 00:17:42.386
pro Breakpoint sowohl Row, als auch Column, als auch Spanning dieser Elemente jedes Mal anzupassen.

00:17:42.486 --> 00:17:44.646
Da hast du einfach mehr Schreibarbeit.

00:17:46.406 --> 00:17:51.886
Aber genau, also es ist halt auch einfach, man muss damit arbeiten und es dauert

00:17:51.886 --> 00:17:54.606
eine Weile, bis man sich daran gewöhnt.

00:17:54.746 --> 00:17:57.826
Es hat ja auch bei Flex eine Weile gedauert, irgendwie so, okay,

00:17:57.966 --> 00:18:01.786
wann, was ist nochmal Align Items und wann ist es Justify?

00:18:03.366 --> 00:18:09.786
Ich glaube, gerade die Flex Spaces wird teilweise dieses 0, 1, 1 oder 25%,

00:18:11.365 --> 00:18:15.525
Da wird einfach rumprobiert, bis es dann gut ausschaut. Obwohl man vielleicht

00:18:15.525 --> 00:18:17.845
nicht 100% nicht verstanden hat, was es macht.

00:18:19.425 --> 00:18:23.105
Was sich jetzt, auch bei Flex Grow zum Beispiel,

00:18:23.805 --> 00:18:29.125
es ist tatsächlich simpel in dem Sinn, wenn du dem einen eine Flex Grow 1 gibst,

00:18:29.205 --> 00:18:32.645
dem anderen eine 2, dem anderen eine 3, das ist wirklich, das eine hat halt

00:18:32.645 --> 00:18:35.925
ein Drittel, das andere hat zwei Drittel, das andere dann drei Drittel.

00:18:36.725 --> 00:18:39.505
Drittel war jetzt, glaube ich, falsch. Wahrscheinlich waren es dann eher Sechstel. Aber?

00:18:41.385 --> 00:18:49.765
Also genau, wenn du sonst nichts machst, dann ist das ja die Platzverteilung, genau, der Content,

00:18:50.385 --> 00:18:56.265
wenn im einen Content ist, der 100 Pixel breit ist und im anderen 200 und im anderen 300 Pixel,

00:18:56.365 --> 00:19:02.125
dann sind die schon gesetzt und nur was dann sozusagen an extra Leerraum verteilt

00:19:02.125 --> 00:19:05.945
wird, Und dieser Leerraum wird ja dann nach diesem,

00:19:06.125 --> 00:19:09.065
dieser Flex-Grow, Flex-Shrink,

00:19:09.425 --> 00:19:16.625
dem Verhältnis verteilt, außer du setzt die Min-Width auf Null. Ja.

00:19:17.205 --> 00:19:23.285
Dann wird quasi der Content nicht mehr als gesetzt betrachtet und dann hast

00:19:23.285 --> 00:19:27.945
du das wirklich, die Aufteilung der Spalten, exakt so wie du meintest.

00:19:28.725 --> 00:19:33.545
Ich finde, du hast jetzt wunderschön erklärt, was die Schwächen von Flexbox sind.

00:19:33.945 --> 00:19:37.445
Denn das klingt alles hacky, was da passiert dann im Endeffekt,

00:19:37.525 --> 00:19:39.725
obwohl es auch feste Regeln gibt, was passiert.

00:19:40.005 --> 00:19:44.805
Aber ich habe das Gefühl, Grid hat so ein bisschen größere Einstiegshürde,

00:19:44.985 --> 00:19:47.985
weil auf einmal gibt es da sehr viele Sachen, die ich setzen kann.

00:19:48.145 --> 00:19:52.205
Und es gibt alternative Methoden. Ich kann die Richtung gehen oder die Richtung gehen.

00:19:52.505 --> 00:19:56.665
Und dann gibt es auch noch eine erst mal komplizierte aussehende Syntax.

00:19:57.485 --> 00:20:01.645
Ich denke aber, dass Grid das für Menschen verständlicher, deutlich logischere

00:20:01.645 --> 00:20:03.345
ist, was erstmal passiert und nicht sowas.

00:20:03.425 --> 00:20:06.445
Ich mach eine MinWirth Null und dann ist das auf Null gesetzt und deswegen verhält

00:20:06.445 --> 00:20:07.745
sich jetzt Grow und Schränk anders.

00:20:08.765 --> 00:20:13.405
Und das finde ich eigentlich schon toll dran. Ich hab drei Spiele rausgesucht,

00:20:13.545 --> 00:20:16.905
die es zum Lernen dazu gibt. Das sind auch keine neuen.

00:20:17.145 --> 00:20:20.825
Also wahrscheinlich die Hälfte von unseren Zuhörern und Zuhörerinnen kennt sie jetzt auch schon.

00:20:21.065 --> 00:20:25.385
Das eine wäre der CSS, gridgarden.com.

00:20:26.245 --> 00:20:32.985
Dann gibt es die CodingFantasy.com. Ich glaube, da gibt es speziell das Game CSS Grid Attack.

00:20:33.425 --> 00:20:37.625
Und es gibt noch die Grid Critters.com.

00:20:38.105 --> 00:20:43.525
Und es sind alles CSS-Spiele, die sich mit dem Thema Grid CSS beschäftigen.

00:20:44.025 --> 00:20:47.705
Die viele vielleicht kennen jetzt auch noch schon den berühmten,

00:20:47.805 --> 00:20:50.325
für mich berühmt berüchtigten Flexbox Froggy.

00:20:50.525 --> 00:20:53.905
Und diese Spiele gehen in eine sehr ähnliche Richtung. und ich finde die alle

00:20:53.905 --> 00:20:55.825
so extrem liebevoll gemacht.

00:20:56.065 --> 00:20:59.225
Also gerade die Coding-Fantasy-Seite, ist einfach schön.

00:20:59.525 --> 00:21:03.005
Ich habe gerade versucht rauszufinden, ob ich irgendwo schon Subgrid finde.

00:21:03.145 --> 00:21:07.145
Ich habe leider keine Aufgabe mit Subgrid gefunden. Vielleicht ist es noch ein bisschen zu neu.

00:21:07.525 --> 00:21:10.705
Aber vielleicht irgendwann haben wir dann noch Subgrid-Aufgaben mit dabei.

00:21:12.686 --> 00:21:16.026
Kann ich aber auch sehr empfehlen, solche Sachen, weil ich denke,

00:21:16.526 --> 00:21:20.746
also ich bin so ein bisschen, ich würde normalerweise von mir selber behaupten,

00:21:20.826 --> 00:21:24.086
dass ich so HTML, CSS, JavaScript, TypeScript, sonst was, Testing,

00:21:24.226 --> 00:21:26.566
was auch immer, irgendwie so ein bisschen gleich verteilt bin.

00:21:27.246 --> 00:21:30.826
Aber im Endeffekt bin ich, glaube ich, schon in meinem Hauptfokus einfach auf

00:21:30.826 --> 00:21:34.726
der Vue.js-Implementierung und dem ganzen Ökosystem von State Management und etc.

00:21:35.286 --> 00:21:38.406
Und ich glaube, mit putzelt einfach immer die Zeit runter, mich mit den neuen

00:21:38.406 --> 00:21:42.366
CSS-Sachen zu beschäftigen, wobei ich mich ja irgendwie auch mit neuen Vue.js-Features

00:21:42.366 --> 00:21:43.206
irgendwie beschäftige.

00:21:44.346 --> 00:21:48.346
Und solche Spiele sind dann halt einfach super, um da am Ball zu bleiben und

00:21:48.346 --> 00:21:49.866
sich wirklich damit zu beschäftigen.

00:21:50.046 --> 00:21:53.346
Vielleicht hat man irgendwie ein, zwei Stunden hoffentlich auf der Arbeit für

00:21:53.346 --> 00:21:57.426
so Weiterentwicklungen und sowas und kann das einfach dafür nutzen.

00:21:58.346 --> 00:22:01.506
Denn zumindest mir geht es jetzt so, es gibt ja andere Lernertypen,

00:22:01.646 --> 00:22:04.546
aber zumindest mir geht es jetzt so, ich muss das einfach ausprobieren.

00:22:04.906 --> 00:22:07.266
Ich kann das einfach nicht nur lesen.

00:22:07.766 --> 00:22:11.066
Grid Template Draws funktioniert so und so und du hast die drei Alternative.

00:22:11.186 --> 00:22:13.126
Ich muss das ausprobieren, was sich gut anfühlt.

00:22:13.646 --> 00:22:18.386
Ja, kann ich verstehen. Genau, also man muss das irgendwie, man muss damit rumspielen

00:22:18.386 --> 00:22:23.006
und den Effekt sehen und dann sickert das so langsam ein.

00:22:23.166 --> 00:22:28.266
Und dann ist es natürlich auch einfach viel, Muscle Memory, dann irgendwann okay.

00:22:28.486 --> 00:22:30.706
Oder man baut sich dann vielleicht auch ein paar Brücken.

00:22:33.506 --> 00:22:37.006
Sowas wie mit dem, wann ist es Align, wann ist es Justify und so.

00:22:37.606 --> 00:22:40.786
Was ich noch sagen wollte, du meintest, du hast ja gesagt, Flex,

00:22:41.406 --> 00:22:44.286
da steckt ja ganz viel Magic drin, die stimme ich auch zu.

00:22:44.846 --> 00:22:50.066
Es kommt einem chaotisch vor, was aber daran liegt, dass wir das Regelwerk nicht

00:22:50.066 --> 00:22:52.026
kennen. Also es gibt es ja öfters in CSS.

00:22:52.446 --> 00:22:57.246
Also ein gutes Beispiel ist ja auch, warum Warum, um Gottes Namen,

00:22:57.846 --> 00:23:04.346
haben Bilder, wenn ich sie irgendwo reinstecke, warum haben die diesen Abstand unten? Warum?

00:23:04.806 --> 00:23:07.546
Also, was ist das für ein verdammter Browser-Bug?

00:23:08.186 --> 00:23:12.406
Ach ja, schön. Genau, und es ist ja kein Browser-Bug. Es liegt einfach daran,

00:23:12.466 --> 00:23:16.466
dass es Inline-Elemente sind, beziehungsweise Inline-Block-Elemente.

00:23:16.826 --> 00:23:21.206
Und das ist der Platz, der eigentlich reserviert wäre für diesen Haken von dem

00:23:21.206 --> 00:23:24.486
G oder sowas in der Zeile.

00:23:24.606 --> 00:23:26.806
Und das Bild ist halt auf der Baseline angeordnet.

00:23:26.946 --> 00:23:30.906
Und wenn man Vertical-Align-Bottom macht, dann wird es eben in der Zeile,

00:23:31.006 --> 00:23:35.706
weil es ein Inline-Element ist, also es ist in der Zeile angeordnet, unten angeordnet.

00:23:35.806 --> 00:23:39.146
Und zack, ist halt der Platz weg. oder man macht ein Display-Block-Element raus,

00:23:39.346 --> 00:23:42.146
dann wird es natürlich auch nicht mehr in der Zeile angeordnet.

00:23:42.466 --> 00:23:46.086
Und dann hat man halt diesen weißen Abstand nicht. Aber das sind halt so,

00:23:46.306 --> 00:23:49.146
wenn man es weiß, macht das Sinn.

00:23:49.366 --> 00:23:53.926
Wenn man die Regeln irgendwie nicht kennt, dann ist es super unintuitiv.

00:23:56.286 --> 00:24:01.906
Und die Hui Jing Chen hatte mal einen tollen Talk über Flexbox gehalten,

00:24:02.146 --> 00:24:07.266
den wir in den Shownotes verlinken werden, wo die das eben alles erklärt,

00:24:08.665 --> 00:24:12.145
Das ist ein fantastischer Talk und es macht auf einmal alles Sinn.

00:24:12.485 --> 00:24:16.905
Es ist allerdings auch ein bisschen so wie beim Steuerberater oder beim Finanzberater,

00:24:17.045 --> 00:24:19.725
der erklärt einem Dinge, die machen total Sinn.

00:24:20.025 --> 00:24:23.345
Man beschließt dann, dass man Dinge folgendermaßen macht und danach vergisst

00:24:23.345 --> 00:24:27.045
man leider wieder, warum das Sinn gemacht hat und weiß nur, es hat irgendwie Sinn ergeben.

00:24:28.125 --> 00:24:31.465
Das heißt, das ist so ein Talk, den kann man sich eigentlich immer auf Wiedervorlage legen.

00:24:32.485 --> 00:24:36.885
Das ist ein sehr schöner Vergleich, denn du sagst es ja gerade ungefähr zu dem

00:24:36.885 --> 00:24:41.625
Zeitpunkt, als alle, und zu denen gehöre ich dazu, pünktlich ihre Steuererklärung

00:24:41.625 --> 00:24:44.505
abgeben müssen, weil man macht das ohne Steuerberater und sowas.

00:24:44.905 --> 00:24:49.805
Und ich bin ja so ein Streber, ich habe das ja schon letztes Jahr vorbereitet,

00:24:50.005 --> 00:24:53.945
hat den großen Nachteil, dass du ja nochmal drüber gehen musst,

00:24:54.045 --> 00:24:56.705
um zu schauen, welche Dokumente sind jetzt erst angekommen. Also vielleicht

00:24:56.705 --> 00:24:59.125
wäre es auch irgendwie am letzten Drücker tatsächlich easier.

00:24:59.565 --> 00:25:03.465
Aber ich habe auch die diversen Nachrichten hier und dort bekommen mit,

00:25:03.585 --> 00:25:06.865
wie ist das mit dem Arbeitszimmer, was muss ich angeben?

00:25:07.105 --> 00:25:12.025
Oder du, ich war jetzt hier so und so im Office, aber so und so viel im Homeoffice,

00:25:12.085 --> 00:25:13.345
nämlich jetzt die Homeoffice-Pischal.

00:25:13.525 --> 00:25:18.085
Und wenn man sich das einmal so richtig mit beschäftigt hat, ist es sehr einfach.

00:25:18.325 --> 00:25:21.825
Problem ist, auf einmal bekommt man viele SMS, was man jetzt machen soll.

00:25:22.025 --> 00:25:23.905
Ich kenne ja deine Situation nicht.

00:25:24.725 --> 00:25:28.225
Aber das, ja, Steuererklärung ist so ein bisschen sehr ähnlich zu verstehen.

00:25:28.345 --> 00:25:32.085
Wenn du das Regelwerk nicht kennst, ist es, was soll ich machen?

00:25:32.665 --> 00:25:35.405
Und wenn man die, ich will es ja nicht mal Tricks nennen, weil es ist ja kein

00:25:35.405 --> 00:25:40.625
Trick, aber wenn du die Regeln verstanden hast, dann ist es sehr einfach einzutragen. Ja.

00:25:41.245 --> 00:25:43.305
Ja, genau. Das ist auf jeden Fall ein guter Vergleich.

00:25:44.185 --> 00:25:46.705
Naja, und diese Layout-Modes sind halt einfach komplex.

00:25:47.705 --> 00:25:51.165
Ich befürchte übrigens, wir werden heute noch nicht mal zu Typography kommen.

00:25:51.605 --> 00:25:56.125
Kann auch sein. Das ist dann der Auftrag zu dieser zehnteiligen CSS-Serie.

00:25:58.385 --> 00:26:03.085
Ja. Aber Subcrit haben wir doch abgehakt, oder? Eins haben wir doch geschafft.

00:26:03.585 --> 00:26:04.425
Eins haben wir geschafft.

00:26:06.208 --> 00:26:09.928
Hast du noch was, was dir im Layout-Bereich ins Auge springt?

00:26:10.008 --> 00:26:15.828
Also, wir müssen auch gar nicht auf drei Dinge kommen, aber ... Jep, jep, jep, aber was?

00:26:16.128 --> 00:26:20.868
Und das ist Margin, Block, Start, Padding, Inline, End, Border, Inline, Start.

00:26:22.508 --> 00:26:28.888
Die werden angewendet, wie hier im Beispiel zum Beispiel, zum Beispiel wird

00:26:28.888 --> 00:26:29.928
es zum Beispiel, Entschuldigung,

00:26:30.648 --> 00:26:38.688
hier gibt es eine Section und die Section bekommt ein Border-Block von 8 Pixel

00:26:38.688 --> 00:26:43.008
Solid Blue und ein Border-Inline von 8 Pixel Solid Green.

00:26:43.008 --> 00:26:48.148
Und das sind Styles, die haben wir vorher schon irgendwie anders hinbekommen.

00:26:48.828 --> 00:26:55.188
Daher, lieber Shep, warum und wann sollte ich denn jetzt Attrib-Properties wie

00:26:55.188 --> 00:26:59.348
Margin-Block-Start, Border-Block oder Border-Inline denn verwenden?

00:26:59.348 --> 00:27:06.548
Ja, also das sind ja die sogenannten Logical Properties, die deswegen so heißen,

00:27:06.648 --> 00:27:12.288
weil sie, also sie sind im Grunde Aliasse für Dinge,

00:27:12.648 --> 00:27:14.968
wie du schon gesagt hast, die wir ja schon vorher konnten,

00:27:15.388 --> 00:27:19.748
aber mit dem zusätzlichen Spin,

00:27:20.188 --> 00:27:25.688
dass sie, also dass sie auf die Schreibrichtungen gucken.

00:27:27.188 --> 00:27:30.388
Also häufig wird uns das nicht betreffen. Also ich habe.

00:27:33.968 --> 00:27:39.088
Vielleicht einmal habe ich was gemacht, wo auch asiatische Sprachen vorkamen.

00:27:39.468 --> 00:27:46.648
Noch nie habe ich irgendwas gebaut, in denen arabische oder hebräische Sprachen

00:27:46.648 --> 00:27:48.508
vorkamen, oder arabisch und hebräisch.

00:27:48.828 --> 00:27:53.668
Aber es gibt eben Sprachen, die sich unterscheiden in der Schreibrichtung von

00:27:53.668 --> 00:28:00.048
unseren westlichen Sprachen und Und da kann das durchaus Sinn machen,

00:28:00.188 --> 00:28:02.468
also nicht immer, aber häufig,

00:28:02.708 --> 00:28:08.948
solche Dinge so zu definieren, dass sie sich anpassen in der Schreibrichtung.

00:28:10.328 --> 00:28:14.428
Vielleicht irgendwie Margins, also Abstände von Dingen zueinander,

00:28:14.708 --> 00:28:19.588
was für uns in der Vertikalen funktioniert, funktioniert eben für vielleicht

00:28:19.588 --> 00:28:22.448
asiatische Sprachen dann in der Horizontalen.

00:28:22.448 --> 00:28:30.608
Genau und es gibt im Grunde immer dann Varianten von diesen logischen äh.

00:28:31.703 --> 00:28:35.603
Properties, die einmal mit Blog arbeiten und mit Inline.

00:28:35.743 --> 00:28:40.523
Blog ist also die für uns in unserer Sprache die Vertikale.

00:28:41.083 --> 00:28:44.823
Also immer wenn neue Content-Blöcke sozusagen geöffnet werden,

00:28:44.923 --> 00:28:45.803
so kann man sich das merken.

00:28:45.963 --> 00:28:49.843
Also die Blog-Richtung ist senkrecht und dann gibt es Inline.

00:28:50.023 --> 00:28:56.903
Das ist dann eben bei uns die horizontale Ausrichtung, so wie wir eben Inline-Elemente aneinanderreihen.

00:28:57.683 --> 00:29:01.283
Also das ist, wenn man jetzt nur Block und nur Inline macht,

00:29:01.703 --> 00:29:07.583
dann würde das diese Eigenschaft für beide Seiten der Achse setzen und dann

00:29:07.583 --> 00:29:12.363
kann man aber auch nochmal einschränken und sagen Border Block Start,

00:29:12.623 --> 00:29:15.483
das würde bedeuten, es geht nur um den Border,

00:29:15.903 --> 00:29:23.503
der im Deutschen jetzt am Anfang von einem Content Block oben gezeichnet wird.

00:29:23.763 --> 00:29:33.143
Oder bei Border Inline End, da ging es um den Border, der rechts eingezeichnet würde.

00:29:33.803 --> 00:29:41.223
Würde es jetzt aber dann Sinn machen, dass ich immer Border Inline Start verwende,

00:29:41.403 --> 00:29:43.183
anstelle von Border Top?

00:29:44.383 --> 00:29:52.683
Also wenn du sagen wir mal so Poster Child mäßig CSS schreibst,

00:29:52.883 --> 00:29:55.463
dann würdest du das wohl tun, ja.

00:29:57.044 --> 00:30:02.004
Andererseits, wenn die Wahrscheinlichkeit nahe Null tendiert,

00:30:02.544 --> 00:30:10.364
dass dein Layout irgendwie in Sprachen übersetzt wird, die eine andere Schreibrichtung

00:30:10.364 --> 00:30:15.504
haben, dann ist es vielleicht auch vergebene Liebesmühe.

00:30:16.704 --> 00:30:20.584
Aber sie hätten ja keine Nachteile, außer dass es neu lernen müsste.

00:30:21.124 --> 00:30:27.684
Also wenn wir jetzt zum Beispiel an der Umdenken, wenn CSS einfach sehr streng

00:30:27.684 --> 00:30:34.284
sagen würde, in dem Fall jetzt der Border-Top, das ist jetzt deprecated,

00:30:34.644 --> 00:30:37.504
das ist jetzt anstelle dessen ein Border-Start,

00:30:38.064 --> 00:30:42.284
hätte man dadurch einen Nachteil oder einfach nur eine neue Syntax,

00:30:42.504 --> 00:30:44.504
die auch mehr Features unterstützt?

00:30:45.504 --> 00:30:50.784
Ja, also du hast eigentlich nur den Nachteil, dass wenn du alte Browser unterstützen

00:30:50.784 --> 00:30:53.304
willst, dass die dann aussteigen.

00:30:53.624 --> 00:30:58.304
Es gibt auch Post-CSS-Plugins, die sozusagen von der einen in die andere Richtung

00:30:58.304 --> 00:31:00.684
übersetzen. Also das würde auch gehen.

00:31:02.564 --> 00:31:05.644
Genau, dann könntest du auch sagen, okay, wir haben halt aus irgendwelchen Gründen

00:31:05.644 --> 00:31:08.364
noch, also die gibt es halt schon echt lange, diese Logical Properties.

00:31:09.864 --> 00:31:12.764
Wir haben aber trotzdem noch irgendwie so U-Alt-Browser, weil,

00:31:12.804 --> 00:31:17.584
I don't know, irgendwelche nicht-updatebaren iOS-Geräte uns noch besuchen oder so,

00:31:18.104 --> 00:31:21.864
dann könnte man erst mal noch mit so einem Post-CSS-Nachbearbeitungsschritt

00:31:21.864 --> 00:31:27.384
arbeiten, um den dann irgendwann rauszunehmen aus der Build-Chain.

00:31:29.424 --> 00:31:33.424
Genau, und du bekommst ein, zwei Sachen sogar tatsächlich dazu,

00:31:34.144 --> 00:31:39.984
die es vorher nicht gab, nämlich eben die Möglichkeit, auf einer Achse beide Werte zu setzen.

00:31:40.924 --> 00:31:49.724
Das kannst du ja mit den Top-Right-Bottom-Left-Sachen also nicht in der Gänze,

00:31:49.784 --> 00:31:52.784
wie du das mit diesen Logical Properties machen kannst. Stimmt.

00:31:55.163 --> 00:32:00.243
Ich hätte jetzt aus so einer Business-Sicht, wird sich wahrscheinlich die Frage

00:32:00.243 --> 00:32:05.883
auftreten, dass, wenn ich jetzt eine bestehende Codebase habe,

00:32:07.323 --> 00:32:11.403
in dem Fall mein Bauchgefühl relativ unwahrscheinlich, dass man da mal sagt,

00:32:11.623 --> 00:32:13.183
wir gehen dieses Refactoring an.

00:32:13.183 --> 00:32:17.343
Das ist jetzt nicht so wie so eine Migration von Framework 1 auf Framework 2.

00:32:18.163 --> 00:32:24.183
Und dann könnte die Frage entstehen, sollen wir jetzt hier wirklich Border Start

00:32:24.183 --> 00:32:27.843
einführen, weil dann haben wir ein bisschen, ist die Codebase zum Beispiel ein

00:32:27.843 --> 00:32:28.543
bisschen unterschiedlich.

00:32:28.623 --> 00:32:30.763
Dann haben wir da Border Top und dann haben wir da Border Start.

00:32:31.003 --> 00:32:34.763
Und wie erklären wir jetzt den Leuten, was man wann verwenden sollte?

00:32:36.563 --> 00:32:39.703
Aber ich würde das jetzt schon gerne mal ausprobieren, ob man da nicht einfach

00:32:39.703 --> 00:32:43.103
generell sagen könnte, ich nehme jetzt die neuen Logical Properties her,

00:32:43.183 --> 00:32:45.863
und hoff drauf, dass die irgendwann etablierter sind.

00:32:46.363 --> 00:32:51.283
Also relativ einfach kannst du ja ein Search & Replace in deiner Codebase durchführen,

00:32:52.263 --> 00:32:57.583
wo du eben die alten Properties suchst und durch neue ergänzt.

00:32:59.083 --> 00:33:03.063
Genauso machbar wäre das schon. Man könnte auch darauf umsteigen.

00:33:04.623 --> 00:33:07.723
Vielleicht macht es mehr Sinn bei neuen Projekten in der Tat,

00:33:08.223 --> 00:33:12.703
weil das natürlich schon so ein bisschen Arbeit ist, die auch bei Search & Replace

00:33:12.703 --> 00:33:16.583
ja immer zu irgendwelchen Search & Replace-Problemfehlern führen kann.

00:33:17.803 --> 00:33:22.443
Und dann sagen eben verschiedene Projektbeteiligte, so, wofür haben wir denn

00:33:22.443 --> 00:33:25.703
jetzt eigentlich das alles gemacht? So, hat sich da jetzt irgendwas geändert?

00:33:26.263 --> 00:33:29.103
Du hast mich gerade auf eine sehr spannende Idee noch gebracht.

00:33:29.243 --> 00:33:34.783
Wir könnten vielleicht auch mal drüber sprechen, wie man so eine CSS-Migration überhaupt vornimmt.

00:33:35.163 --> 00:33:42.063
Weil wir, ich mache das gerade, Wir hatten ein eigengeschriebenes Util-CSS-Framework.

00:33:42.203 --> 00:33:44.863
Da war ich noch nicht da, weil ja, alle, die sich jetzt denken,

00:33:44.963 --> 00:33:52.103
oh je, ja, ist jetzt so, und haben dieses eigene jetzt ausgetauscht mit,

00:33:52.243 --> 00:33:56.043
was under the hood einfach Table in CSS ist, mit ein bisschen anderen Defaults.

00:33:56.863 --> 00:34:02.523
Und die meiste Arbeit ist tatsächlich reingeflossen, zu entscheiden,

00:34:02.663 --> 00:34:05.023
wie wir das machen, welche automatisierten Skripte.

00:34:05.643 --> 00:34:09.183
Und wir sind aber auch alle sehr brave Developer, das heißt,

00:34:09.263 --> 00:34:13.503
alles, was geändert wird, wird getestet, was bei einer sehr großen, bestehenden Codebase.

00:34:14.843 --> 00:34:18.423
Puh, weißt du, das Skript läuft drüber, in fünf Sekunden ist alles getan,

00:34:18.583 --> 00:34:22.723
dann nochmal prettier drüber, fertig und dann bist du die nächsten drei Stunden

00:34:22.723 --> 00:34:25.783
damit beschäftigt, die ganzen Seiten zu finden und es kann halt mal irgendwie

00:34:25.783 --> 00:34:29.043
auf der Seite Nummer sechs von irgendeiner Kubernetes-Einstellungsseite sein

00:34:29.043 --> 00:34:33.203
und du musst erstmal Kubernetes aufsetzen, wie komme ich da jetzt hin oder machst du das so, dass du

00:34:33.623 --> 00:34:36.283
sagst, ist egal, ich mache das jetzt nicht im Browser im Sinne von,

00:34:36.343 --> 00:34:39.063
dass ich das durchklicke, sondern ich setze einfach alle meine Ifs auf True,

00:34:39.163 --> 00:34:40.883
dass ich jetzt irgendwie zu dieser View hinkomme.

00:34:42.461 --> 00:34:45.601
Ich behalte den Gedanken. Sprechen wir mal drüber, wie man CSS migriert.

00:34:46.001 --> 00:34:50.261
Ja, gerne. Ist aber lustig. Ansonsten jetzt ganz konkret fällt mir dazu noch dieses Tool.

00:34:51.901 --> 00:34:54.901
Das heißt Windy, aber es ist nicht das Framework.

00:34:56.761 --> 00:34:59.741
Windy CSS oder was? Warte mal. Genau.

00:35:01.481 --> 00:35:06.881
Und da kannst du hingehen und automatisch nee, Moment.

00:35:07.221 --> 00:35:10.981
Windy CSS ist auch ein, das meinte ich nämlich genau nicht. Ja.

00:35:12.581 --> 00:35:16.961
Usewindy.com genau das ist das und da kannst du das kannst du sozusagen auf

00:35:16.961 --> 00:35:22.981
deine Webseite loslassen, die nicht Tailwind benutzt und,

00:35:24.061 --> 00:35:29.781
das liest dann die ganzen Properties aus und schreibt dir dann dein Style Sheet in Tailwind,

00:35:31.521 --> 00:35:37.381
Vor allem meinst du das Windy mit dem Y hinten und nicht das Windy mit dem I

00:35:37.381 --> 00:35:41.321
hinten weil das Windy CSS ist mit zweimal i.

00:35:42.321 --> 00:35:47.001
Wie Chat-Tippity vielleicht sagen würde, einmal i, weil das Strawberry-Geschichte.

00:35:48.261 --> 00:35:52.761
Und das, was du meinst, ist use when d, ist mit dem y-Händen. Ja, genau.

00:35:53.381 --> 00:35:56.441
Habe ich aber auch schon mal hier direkt aufgeschrieben für die Shownotes.

00:35:59.088 --> 00:36:03.228
So, jetzt haben wir ja schon zwei Punkte geschafft. Ne, haben wir noch nicht

00:36:03.228 --> 00:36:04.788
geschafft, weil ich wollte nur einen Punkt dazu sagen.

00:36:05.388 --> 00:36:11.448
Diese CSS-Logical Properties haben aber nichts zu tun mit den Werten,

00:36:11.508 --> 00:36:15.008
die es jetzt auch gibt, wie von Margin Trim oder diese Späße.

00:36:15.848 --> 00:36:19.148
Weil da bin ich am Anfang mal drüber gestolpert, dass ich die alle mal in eine

00:36:19.148 --> 00:36:23.068
Kategorie zusammengehauen habe, weil irgendwie fingen die alle an mit Margin

00:36:23.068 --> 00:36:24.728
und ich so, ah ja, alles gleiche Neue.

00:36:25.108 --> 00:36:29.668
Aber hier geht es um die Schreibweisenrichtung und bei Margin Trim ist halt

00:36:29.668 --> 00:36:31.068
eine Einstellung für einen Margin.

00:36:31.068 --> 00:36:35.348
Genau, wobei da ist es trotzdem ein gutes Stichwort, denn bei Margin Trim,

00:36:35.508 --> 00:36:42.348
da tauchen diese Keywords wie Block, beziehungsweise Block Start und Inline,

00:36:42.468 --> 00:36:45.468
beziehungsweise Inline Start End auch wieder auf,

00:36:45.728 --> 00:36:52.588
denn alles, was jetzt sozusagen neu gespeckt wird, was mit Richtungen zu tun hat,

00:36:53.728 --> 00:36:59.048
nutzt eben nicht mehr Top, Right, Bottom, Left, sondern logische,

00:36:59.268 --> 00:37:01.448
quasi die Schrift. Richtung.

00:37:02.348 --> 00:37:06.508
Und also sofern das Sinn macht, es gibt manche Dinge, da macht es nicht Sinn.

00:37:07.388 --> 00:37:11.608
Genau, und da machst du halt Margin Trim Block.

00:37:11.888 --> 00:37:18.848
Und das machst du eben, wenn du zum Beispiel sagst, ich möchte innerhalb eines.

00:37:20.668 --> 00:37:26.168
Eltern Containers, da habe ich ganz viele Paragraphs drin, die haben alle Margin

00:37:26.168 --> 00:37:28.748
Top und Margin Bottom 1 EM oder so.

00:37:29.208 --> 00:37:36.068
Ich möchte aber, dass vom obersten das Margin abgeschnitten wird und vom untersten

00:37:36.068 --> 00:37:37.388
das Margin abgeschnitten wird.

00:37:37.968 --> 00:37:43.988
Das war ja klassisch immer mit First Child Margin Top 0 und Last Child Margin

00:37:43.988 --> 00:37:46.168
Bottom ebenfalls 0 gemacht.

00:37:46.528 --> 00:37:50.808
Mit Margin Trim kannst du halt sagen Margin Trim Block. Und dann werden diese

00:37:50.808 --> 00:37:54.268
Margins, die oben und unten zu viel sind, abgeschnitten.

00:37:58.970 --> 00:38:02.070
Das finde ich super. Ich mag das. Ich mag diese neuen Werte.

00:38:03.830 --> 00:38:08.370
Ja, das ist auch cool. Aber ich glaube, Margin Trim, da ist der Support jetzt

00:38:08.370 --> 00:38:11.750
auch noch nicht ... Nee, nee, ist experimental. Ist auf jeden Fall experimental.

00:38:12.710 --> 00:38:16.510
Bei dem bin ich jetzt irgendwie stärker involviert, weil ich tatsächlich ...

00:38:16.510 --> 00:38:19.830
Ich habe einfach diesen Gedanken, wäre das nicht tatsächlich sinnvoll,

00:38:19.910 --> 00:38:25.010
dass man sein eigenes Denken schon mal wegkriegt von Top, Right, Bottom, Left.

00:38:25.130 --> 00:38:28.550
Ich weiß, das ist bei mir in meinem Kopf, seit ich elf bin, mache ich das.

00:38:28.790 --> 00:38:33.270
Aber ich finde es mal interessant, ob man es nicht tatsächlich sagen sollte.

00:38:33.510 --> 00:38:36.290
Wir versuchen mal, das andere als Default anzusetzen.

00:38:36.870 --> 00:38:40.890
Und alle Firmen, die jetzt vielleicht tatsächlich vielleicht auch das Vergnügen

00:38:40.890 --> 00:38:45.610
haben, groß genug zu sein, um so einen, wie man es jetzt nennen will,

00:38:45.690 --> 00:38:48.510
so ein Plattform-Team zu haben, die sich nur um solche Sachen kümmern können,

00:38:48.670 --> 00:38:49.990
ohne jetzt Feature-Entwicklung zu machen.

00:38:51.370 --> 00:38:52.850
Ich habe das Gefühl, das wird was.

00:38:54.430 --> 00:38:57.290
Ich habe da ein gutes Gefühl. Folgt mir mal alle.

00:38:58.130 --> 00:39:01.970
Wir sollten das machen. Ich hoffe, ich versuche mir das zu merken und frage

00:39:01.970 --> 00:39:04.730
dann beim nächsten State of CSS.

00:39:05.350 --> 00:39:07.230
Fahre ich mal nach. Ja.

00:39:09.010 --> 00:39:12.390
Ein nächster Punkt, der hier auftaucht, ist Aspect Ratio. Müssen wir noch was

00:39:12.390 --> 00:39:17.430
sagen oder haben wir schon ganz oft erwähnt, schön, dass es endlich einfach da ist. Punkt. Absolut.

00:39:20.670 --> 00:39:24.110
Mehr gibt es dazu eigentlich auch eigentlich nicht zu sagen.

00:39:24.730 --> 00:39:29.150
Aspect Ratio oder zum Layout? Nee, zur Aspect Ratio. Ja, ich finde auch,

00:39:29.230 --> 00:39:31.770
das ist jetzt einfach nett, dass wir das haben, wurde auch einfach Zeit.

00:39:32.350 --> 00:39:37.230
Ja, genau. Anchor Positioning, weißt du, was es damit so auf sich hat?

00:39:39.110 --> 00:39:42.030
Jetzt hast du mich voll kalt erwischt. Sehr gut.

00:39:44.030 --> 00:39:47.630
Habe ich mir eh gedacht. Genau, weil das ist jetzt zum Beispiel was,

00:39:47.890 --> 00:39:51.730
das gibt es momentan nur, glaube ich, in Chrome Canary.

00:39:52.410 --> 00:40:00.230
Aber es wird trotzdem von allen Browser-Herstellern dran herumgespeckt und experimentiert.

00:40:00.470 --> 00:40:05.430
Da geht es also auch wieder, das ist eher so ein grundlegend neues Feature,

00:40:05.550 --> 00:40:13.870
das wir momentan noch gar nicht haben oder irgendwie nur uns so halb gar zurechtstöpseln können.

00:40:14.830 --> 00:40:21.570
Du kannst in Zukunft Elemente abhängig von anderen Elementen positionieren.

00:40:21.570 --> 00:40:26.330
So ein bisschen wie das mit Position Absolutes, aber es funktioniert eben auch

00:40:26.330 --> 00:40:28.970
für Elemente, die nicht Kind-Elemente sind.

00:40:29.290 --> 00:40:30.430
Das heißt, du kannst auch zwei

00:40:30.430 --> 00:40:34.130
gleichwertig im DOM nebeneinander stehende Elemente aneinander koppeln.

00:40:35.250 --> 00:40:42.250
Und du hast aber solche Features drin, dass du eben sagst, ich möchte das anordnen.

00:40:45.150 --> 00:40:46.270
Also ich ...

00:40:47.323 --> 00:40:51.503
Oder wenn es geht, möchte ich das zuerst an dieser Kante von dem anderen Element anordnen.

00:40:51.823 --> 00:40:56.223
Wenn dieses Element aber zu weit am Viewport-Rand ist und das dann nicht mehr

00:40:56.223 --> 00:40:59.683
hinpasst, dann nimm als quasi zweite Wahl diese Kante.

00:40:59.983 --> 00:41:03.003
Das ist ja super. Das ist richtig cool.

00:41:03.223 --> 00:41:09.203
Und da kannst du auch richtig geile Sachen mitbauen, die auf den ersten Blick,

00:41:09.243 --> 00:41:12.503
die einem damit auch gar nicht einfallen würden, die man bauen kann.

00:41:12.743 --> 00:41:18.543
Nämlich, du kannst sowas machen wie, wenn du so was wie so ein Flussdiagramm hast,

00:41:19.323 --> 00:41:24.943
dann kannst du mit Hilfe von Anker Positioning endlich so was machen wie Linien

00:41:24.943 --> 00:41:30.423
am einen Element anfangen lassen und quasi weich in das nächste Element gehen

00:41:30.423 --> 00:41:33.483
lassen, egal wo das auf dem Bildschirm positioniert ist.

00:41:34.763 --> 00:41:39.083
Ich weiß nicht, ob das noch dieses Jahr kommt. Ich sag jetzt einfach mal dieses

00:41:39.083 --> 00:41:42.923
Jahr noch nicht, aber das wird richtig cool.

00:41:43.123 --> 00:41:47.163
Und wer damit rumspielen will, kann das eben in Chrome Canary machen.

00:41:47.363 --> 00:41:50.403
Also die stellen halt immer noch mal die Syntax hier und da um,

00:41:50.743 --> 00:41:56.363
passen noch Dinge an, damit wenn es dann stable wird, dass es dann auch echt gut ist und,

00:41:58.483 --> 00:42:05.023
ja, so ein bisschen der Gesamtphilosophie von CSS folgt und gleichzeitig auch

00:42:05.023 --> 00:42:08.763
nicht so kompliziert ist und in dem Browser noch performant läuft.

00:42:10.963 --> 00:42:15.623
Genau, dann vielleicht noch zwei Wörter zu den Container-Queries.

00:42:16.263 --> 00:42:19.323
Also hier drin haben wir die Size-Queries, die sind uns ja bekannt.

00:42:20.303 --> 00:42:26.843
Es gibt aber auch Style-Queries, wo man Dinge innerhalb eines Containers ändern

00:42:26.843 --> 00:42:29.743
kann in Abhängigkeit von einer CSS-Property,

00:42:30.003 --> 00:42:35.943
also einer Custom-Property, die vom Elternelement gesetzt wird.

00:42:36.143 --> 00:42:38.163
Das ist vielleicht manchmal auch nicht schlecht.

00:42:39.243 --> 00:42:43.303
Und wo dran gerade auch gearbeitet wird, Was man, glaube ich,

00:42:43.343 --> 00:42:45.083
auch im Chrome Canary testen kann,

00:42:45.363 --> 00:42:51.203
ist eine weitere Container-Query-Variante, nämlich die State-Queries,

00:42:51.343 --> 00:42:54.183
also wo man sowas abfragen kann,

00:42:54.403 --> 00:43:00.463
wie ist ein fix-positioniertes, nee, ist ein sticky-positioniertes Element aktuell

00:43:00.463 --> 00:43:02.863
auch tatsächlich am Sticken?

00:43:03.463 --> 00:43:06.483
Also klebt das gerade am Bildschirmrand oder eben nicht?

00:43:06.883 --> 00:43:12.183
Und da kann man dann eben auch so Dinge machen, wie man scrollt,

00:43:12.323 --> 00:43:15.563
es fängt an, am oberen Bildschirmrand kleben zu bleiben.

00:43:15.763 --> 00:43:19.123
Und wenn das der Fall ist, dann schrumpft das vielleicht auch noch so ein bisschen.

00:43:19.883 --> 00:43:22.303
Solche Dinge gehen ja momentan nur mit JavaScript.

00:43:25.592 --> 00:43:30.252
Jupp, ansonsten, hast du ja gerade gesagt, kennen wir ja eigentlich auch schon.

00:43:30.532 --> 00:43:34.232
Ich denke, in der letzten Revision, das war die, also nicht in der letzten von

00:43:34.232 --> 00:43:37.592
letzter Woche, sondern in der letzten Revision von einem State of CSS,

00:43:38.212 --> 00:43:42.972
zum Beispiel in der 588, das war Teil 1 von 2 damals, hatten wir auch recht

00:43:42.972 --> 00:43:48.832
schon viel über Container-Queries gesprochen, da auch noch im Zusammenhang mit dem Has-Selektor.

00:43:48.832 --> 00:43:52.712
Und ja, ich denke, diese gleiche Frage war auch einfach schon mal im letzten

00:43:52.712 --> 00:43:55.912
State of CSS dabei, generell die Container-Queries.

00:43:56.872 --> 00:44:02.752
Ja. Und damit haben wir Kategorie 1 Layout schon geschafft.

00:44:03.112 --> 00:44:05.532
Schon? Ja, schön. Sauber.

00:44:06.012 --> 00:44:10.072
Und sind bei Kategorie 2 mit Shapes und Graphics.

00:44:11.332 --> 00:44:15.652
Ich möchte tatsächlich schon wieder auch gleich beim ersten beginnen,

00:44:15.912 --> 00:44:19.832
und zwar bei den Blend-Modes. Wir haben hier die Beispiele Mixed Blend Mode,

00:44:19.932 --> 00:44:21.712
Background Blend Mode und Isolation.

00:44:22.312 --> 00:44:25.592
Und ohne jetzt genau darauf einzugehen, was die alle machen.

00:44:26.132 --> 00:44:31.392
Ich habe bei denen genau wieder das gleiche Gefühl mit, das Problem muss man

00:44:31.392 --> 00:44:33.172
haben und dann muss man es ausprobieren.

00:44:33.412 --> 00:44:36.092
Und dann versteht man, was man damit machen möchte.

00:44:36.592 --> 00:44:43.192
In meinem Alltag ist es mir jetzt selten passiert, dass ich mir dachte, dass ich mir dachte,

00:44:44.191 --> 00:44:49.131
Ja, also Mixed Blend Mode finde ich so toll, damit style ich jetzt diese Sachen,

00:44:49.311 --> 00:44:52.771
sondern das war schon wirklich im Zusammenhang mit einem Problem und wie lässt

00:44:52.771 --> 00:44:54.451
sich denn dieses Problem jetzt lösen.

00:44:55.051 --> 00:45:01.731
Und wenn ich zum Beispiel einfach auf die Seite gehe von den MDN Web Docs und

00:45:01.731 --> 00:45:05.571
schaue mir diese Background Blend Modes an, von diesen Beispielen her,

00:45:05.791 --> 00:45:08.951
wüsste ich ja nicht, warum ich nicht das Normale haben wollte.

00:45:08.951 --> 00:45:12.311
Da habe ich jetzt das Beispiel mit normalen, da ist ein Heißluftballon daneben

00:45:12.311 --> 00:45:13.651
und der schaut dann normal aus.

00:45:13.871 --> 00:45:19.551
Und mit Multiply wird das Bild grün, mit Hardlight wird das Bild gesättigt und

00:45:19.551 --> 00:45:23.971
grüner und mit Difference wird es sozusagen irgendwie halbwegs invertiert.

00:45:24.171 --> 00:45:26.571
Und wenn ich diese Beispiele sehe, dann fällt mir ja nicht ein,

00:45:26.651 --> 00:45:28.611
wozu brauche ich das, was mache ich jetzt damit.

00:45:29.931 --> 00:45:37.711
Und ich hatte mal auch das Gefühl, dass wenn ich diese Properties in der Realität

00:45:37.711 --> 00:45:44.731
sehe, können sie auch teilweise Sachen quasi ein bisschen schwieriger machen.

00:45:44.911 --> 00:45:49.171
Also wenn ich jetzt eine Banner-Komponente habe mit ganz vielen verschiedenen

00:45:49.171 --> 00:45:54.911
Hintergründen und für ein, zwei Fälle davon ist dieses Mix-Blend-Mode einfach super,

00:45:55.091 --> 00:45:58.751
weil dann habe ich da zum Beispiel einen Close-Button drauf mit dem Icon und

00:45:58.751 --> 00:46:02.911
in den zwei Background-Colors, da schaut das X einfach toll aus.

00:46:03.071 --> 00:46:06.471
Aber wenn zum Beispiel die Background-Farbe dann heller ist als bei den anderen

00:46:06.471 --> 00:46:09.751
und weniger Kontrast hat, dann passiert das, dann schaut das nicht mehr gut aus.

00:46:09.951 --> 00:46:14.371
Und dass man dann doch gern wieder dazu umsteigt, mehr Kontrolle darüber zu

00:46:14.371 --> 00:46:18.131
haben und einfach da in dem, bei Iconfarben jetzt dann sagt,

00:46:18.211 --> 00:46:20.411
nee, ich setze einfach wieder die Color und gut ist.

00:46:20.651 --> 00:46:25.471
Mit Bildern habe ich da jetzt wenig bisher in der Realität sehen dürfen.

00:46:27.211 --> 00:46:30.891
Ja, braucht man auch tatsächlich nicht häufig, würde ich sagen.

00:46:31.151 --> 00:46:36.971
Also was ein Use Case ist, ist, wenn man vielleicht irgendwie eine Bildbearbeitungsvorlage

00:46:36.971 --> 00:46:40.991
bekommt, Also jetzt zum Beispiel in Photoshop hast du ja auch diese Layer-Blend-Modes.

00:46:41.411 --> 00:46:44.491
Das sind eben im Grunde die gleichen, die du da auch wählen kannst.

00:46:44.591 --> 00:46:50.791
Und dann siehst du halt so, okay, die haben das darauf angewendet und aus irgendeinem

00:46:50.791 --> 00:46:54.951
Grund willst du aber das Endresultat, das fertig berechnete Bild dann nicht

00:46:54.951 --> 00:46:57.671
so nehmen, sondern du willst das eben,

00:46:57.871 --> 00:47:00.971
vielleicht weil das Bild auch in anderen Kontexten verwendet wird und dann musst

00:47:00.971 --> 00:47:05.451
du nicht zwei Bilder laden, die im Grunde das gleiche sind, sondern dann lädst

00:47:05.451 --> 00:47:10.211
du zweimal das gleiche, hast Ladezeit gespart und beim zweiten benutzt du dann

00:47:10.211 --> 00:47:12.671
Blend Mode, um das anzupassen.

00:47:13.791 --> 00:47:18.731
Genau, wo ich das auch benutzt habe, Blend Mode ist, oder Mixed Blend Mode ist

00:47:18.731 --> 00:47:27.071
für so eine Komponente, die Notifications anzeigt und der man eben quasi sagen kann,

00:47:27.391 --> 00:47:32.991
das ist jetzt ein Success oder eine Error oder eine Warning Notification.

00:47:32.991 --> 00:47:38.551
Und darin können dann aber verschiedene Sachen, wieder andere Komponenten drinstecken

00:47:38.551 --> 00:47:42.231
und dennoch möchte ich aber eine Färbung haben.

00:47:43.930 --> 00:47:48.910
Bin ich halt hingegangen und diese außenliegende Komponente hat dann eine Layer

00:47:48.910 --> 00:47:53.210
erzeugt mit einem Pseudo-Element, die dann eine Farbe getragen hat und die Mixed

00:47:53.210 --> 00:47:55.110
Blend Multiply, glaube ich, benutzt hat.

00:47:55.470 --> 00:47:59.970
Und das hat sich dann über die Kind-Elemente darin gelegt und dann die entweder

00:47:59.970 --> 00:48:03.870
eben grün oder rot oder eben gelb gefärbt.

00:48:04.070 --> 00:48:06.110
Für sowas kann man das mal gebrauchen.

00:48:07.130 --> 00:48:08.950
Aber wirklich eher selten.

00:48:10.530 --> 00:48:17.950
Eine weitere Property, die ich schön finde, ist der Backdrop-Filter.

00:48:18.550 --> 00:48:22.230
Und so wie ich das mitbekommen habe, ist der jetzt auch fully supported.

00:48:22.790 --> 00:48:26.010
Ich denke, ich habe den vor drei, vier Jahren das erste Mal schon mal eingesetzt

00:48:26.010 --> 00:48:30.190
und brauchte noch einen Fallback für den Firefox-Browser damals.

00:48:31.530 --> 00:48:35.310
Und ich finde, man kann tatsächlich sehr schöne Effekte damit machen.

00:48:36.810 --> 00:48:41.650
Also was es macht, es macht so ein bisschen den, äh, der Backdrop-Filter gerne

00:48:41.650 --> 00:48:46.050
in Verwendung dann mit dem Wert von einem Blur, zum Beispiel Blur 10 Pixel als Wert.

00:48:46.950 --> 00:48:50.210
Und der lässt dann den Hintergrund so ein bisschen durchscheinen.

00:48:50.850 --> 00:48:54.030
Das kann einen schönen Effekt machen, wenn man das in so einer sticky,

00:48:54.870 --> 00:49:00.270
top-fixed Navigationsleiste hat, die da eben so mit ist.

00:49:00.390 --> 00:49:03.810
Und dann wird der, wenn ich da so einen Block habe und da ist ein Text,

00:49:04.370 --> 00:49:08.830
dann wird der eben nicht so einfach so hart abgeschnitten hinter dem weißen

00:49:08.830 --> 00:49:15.210
Hintergrund der Top-Fix-Leiste, sondern scheint dann noch so ein bisschen durch.

00:49:16.890 --> 00:49:21.290
Und ich denke, ein anderer gerne genommener Use-Case ist, wenn ich Text über

00:49:21.290 --> 00:49:26.650
einem Bild habe und zu sagen, ich möchte jetzt nicht einfach so eine Hintergrundfarbe,

00:49:26.830 --> 00:49:30.290
so wie bei Instagram, dass ich einfach so eine harte Hintergrundfarbe setze,

00:49:30.550 --> 00:49:34.730
damit ich dann den Text lesen kann, sondern das scheint wieder so ein bisschen dann eben durch.

00:49:35.990 --> 00:49:43.350
Ich möchte an der Stelle aber darauf hinweisen, auf die Lesbarkeit und Accessibility davon.

00:49:43.750 --> 00:49:47.250
Denn wenn ich da eben keinen harten Hintergrund dahinter habe,

00:49:47.470 --> 00:49:50.810
dann ist es je nachdem vielleicht teilweise ein bisschen schwer zu lesen.

00:49:50.810 --> 00:49:54.390
Also ich sollte zumindest mal darauf achten, dass ich dann wirklich eine neutrale

00:49:54.390 --> 00:49:58.690
Schriftfarbe habe und nicht irgendwie versuche, mit Grün auf Rot zu schreiben, so ein Klassiker jetzt.

00:49:59.850 --> 00:50:03.870
Und auch wirklich bedenke, was könnte denn alles der Hintergrund sein?

00:50:03.970 --> 00:50:06.230
Also werde ich das tatsächlich immer gut lesen können?

00:50:07.450 --> 00:50:10.930
Und ich finde es auch immer wichtig zu bedenken, was passiert denn zum Beispiel,

00:50:11.050 --> 00:50:13.570
wenn ich so einen High-Contrast-Modus anhabe?

00:50:14.430 --> 00:50:18.470
Und falls irgendjemand da draußen noch nicht diesen Trick kennen sollte,

00:50:18.730 --> 00:50:25.170
was ich gerne mache, ist bei den Chrome DevTools, das muss man eventuell mehr

00:50:25.170 --> 00:50:26.510
einschalten bei den Settings,

00:50:27.110 --> 00:50:30.270
dass ich bei den Settings, das sind diese drei Pünktchen bei den DevTools,

00:50:30.490 --> 00:50:34.810
auf More Tools gehe und mir dann das Rendering-Tab dazu hole.

00:50:34.810 --> 00:50:41.950
Und dort gibt es die Einstellung für Emulate CSS Media Feature Force Colors

00:50:41.950 --> 00:50:47.410
und damit kann ich Force Colors testen, das ist ein größeres Spektrum,

00:50:47.690 --> 00:50:52.810
aber zum Beispiel, was in die Richtung von einem High Contrast Mode von Windows geht,

00:50:53.110 --> 00:50:56.270
dann brauche ich eben nicht Browser Stack oder ähnliche Tools verwenden,

00:50:56.410 --> 00:50:58.670
um mir ein Windows mit High Contrast Mode zu checken,

00:50:59.370 --> 00:51:02.050
zu emulieren, sondern ich kann das auch direkt einfach jetzt im Chrome machen,

00:51:02.110 --> 00:51:04.390
indem ich mal Force Colors auf Active dann setze.

00:51:04.810 --> 00:51:08.170
Und dann kriege ich schon so ein Gefühl, wie so ein High Contrast Mode ausschauen könnte.

00:51:08.410 --> 00:51:15.150
Und da sieht man bei den Backdrop-Filtern mit Blur 10, dass hinter dem Text,

00:51:15.310 --> 00:51:18.710
der dann auf diesem Element liegt, tatsächlich aber wirklich in einem weißen

00:51:18.710 --> 00:51:21.230
Hintergrund liegt, damit ich hier den hohen Kontrast habe.

00:51:22.010 --> 00:51:24.790
Das ist auf jeden Fall ein guter Hinweis. Tatsächlich muss ich sagen,

00:51:24.890 --> 00:51:30.070
ich arbeite mit dem Forst-Color-Mode zum Testen eher selten.

00:51:31.310 --> 00:51:34.010
Also diesbezüglich Asche über mein Haut.

00:51:36.570 --> 00:51:40.750
Muss man ja auch nicht. Achso, meinst du, du machst auch keine andere Alternative?

00:51:40.990 --> 00:51:44.270
Ich dachte, du wolltest jetzt sagen, du gehst einfach immer direkt zur Browser-Stack

00:51:44.270 --> 00:51:46.510
und schaust dir Windows-High-Contrast-Mode an. Nee, nee, nee.

00:51:46.870 --> 00:51:52.490
Genau, also ich den Forst-Color-Mode, den teste ich tatsächlich einfach nicht

00:51:52.490 --> 00:51:54.010
und obwohl ich es sollte.

00:51:55.336 --> 00:51:58.276
Ich finde ihn eigentlich recht spannend. Es ist auch gar nicht so schlimm,

00:51:58.396 --> 00:52:00.976
aber das ist echt spannend, was da so passiert.

00:52:01.316 --> 00:52:09.976
Ich bin auch der Meinung, dass wenn man Blogs hat und Artikel online schreibt

00:52:09.976 --> 00:52:14.096
und so Tipps und Tricks des CSS verbreitet,

00:52:14.316 --> 00:52:20.156
wie wenn du nicht möchtest, dass dein Button in der Größe wächst durch eine Border.

00:52:20.156 --> 00:52:24.116
Wenn du zum Beispiel diese Border nur beim Hover hast, aber nicht im Default-State

00:52:24.116 --> 00:52:28.516
und dann fügst du die Border hinzu, dann ist plötzlich der Button-Default größer,

00:52:28.576 --> 00:52:31.176
also musst du dich entscheiden, machst du jetzt auch bei dem Default-Button

00:52:31.176 --> 00:52:33.576
einfach nochmal die gleiche Hintergrundfarbe auch nochmal als Border.

00:52:33.576 --> 00:52:36.436
Nein, es gibt ja den Trick, einen Box-Shadow zu verwenden.

00:52:37.176 --> 00:52:40.896
Genauso bei einem Input-Field. Alles, was halt sonst eine Border hat,

00:52:41.056 --> 00:52:46.836
kann sehr gefährlich werden in dem Force-Color-Modus, weil ein Box-Shadow gilt

00:52:46.836 --> 00:52:51.296
als reines UI-Element, das eben keinen guten Kontrast hat,

00:52:51.536 --> 00:52:54.936
auch wenn man den Box-Shadow so schreibt, dass es ausschaut wie ein Border.

00:52:54.936 --> 00:52:57.596
Ist es ein Box-Shadow und wird ignoriert.

00:52:57.816 --> 00:53:04.416
Und dann hast du Buttons und Input-Felder ohne Rand im Force-Color-Mode. Und dann ist das doof.

00:53:06.156 --> 00:53:11.016
In der Tat. Genau. Ja, müsste ich einfach machen.

00:53:13.496 --> 00:53:17.136
Ist auch übrigens gar nicht schlimm, wenn das passiert. Es gibt eine Media-Query dafür.

00:53:17.316 --> 00:53:21.536
Du kannst einfach sagen, add media, Force-Colors-Active, dann setzt eine Border dran.

00:53:21.616 --> 00:53:25.576
Das ist wirklich kein Drama. Man darf auf jeden Fall weiterhin Boxshadows und

00:53:25.576 --> 00:53:27.036
sowas verwenden und Backgroundfilter.

00:53:27.496 --> 00:53:29.856
Das ist ein ganz, ganz schneller Check, den man machen kann.

00:53:30.156 --> 00:53:33.016
Und ein ganz einfacher Fallback, so sagen, Forest Colors.

00:53:33.196 --> 00:53:36.456
Dann mach stattdessen einfach Background-White. 100 Prozent.

00:53:37.676 --> 00:53:38.856
Funktioniert. Ja.

00:53:41.856 --> 00:53:45.856
Hast du sonst noch was, das dir ins Auge fällt bei den Shapes und Graphics?

00:53:46.016 --> 00:53:51.976
Ich würde dir jetzt mal die Stichworte Linear Easing vielleicht in den Raum

00:53:51.976 --> 00:53:53.956
werfen. Du gibst mir immer die schweren Sachen.

00:53:55.056 --> 00:53:57.576
Du gibst mir die, frag mich nicht nach den künstlerischen Sachen.

00:53:57.696 --> 00:53:59.036
Ich kenne nur die praktischen Sachen.

00:53:59.276 --> 00:54:03.076
Ich habe keine Ahnung, was die Bounce Easing Funktion macht.

00:54:04.756 --> 00:54:13.456
Die Bounce Easing Funktion. Genau, also die, also du kannst ja bei Animationen

00:54:13.456 --> 00:54:17.436
ein Easing angeben und auch bei Transitions.

00:54:18.156 --> 00:54:25.376
Du kannst auch Custom Easing, Handles, glaube ich, eingeben.

00:54:25.516 --> 00:54:30.676
Also es gibt ja, ich weiß gar nicht, es gibt von Lea Verus ein Tool,

00:54:31.076 --> 00:54:34.636
da kannst du so Bezier-Kurven mit.

00:54:37.076 --> 00:54:40.356
Manipulieren. Und ich glaube, das ist auch in den Chrome Dev-Tools eingebaut,

00:54:40.396 --> 00:54:47.456
wenn du so Easing-Properties von Animationen editierst im Styles-Panel, glaube ich.

00:54:48.450 --> 00:54:53.750
Und historisch konntest du eben, hast du einen Anfasser für den Anfang der Kurve

00:54:53.750 --> 00:54:55.950
und einen für das Ende der Kurve.

00:54:55.970 --> 00:55:02.750
Und dann kannst du halt mit so Tangenten einstellen, also wie weich soll die

00:55:02.750 --> 00:55:07.090
Animation eben losgehen und wie weich soll die aufhören oder soll die eben abrupt aufhören.

00:55:07.910 --> 00:55:13.290
Und du hattest eben aber nur begrenzt viele Möglichkeiten, diese Animationskurve,

00:55:13.490 --> 00:55:15.110
deinen Wünschen anzupassen.

00:55:16.090 --> 00:55:21.190
Und wenn du sowas machen wolltest, wie das, also sowas wie wenn ein Gummiball

00:55:21.190 --> 00:55:25.310
auf den Boden fällt und der titscht dann noch ein paar Mal, sowas ist einfach

00:55:25.310 --> 00:55:28.610
nicht drin gewesen mit einer Easing-Funktion,

00:55:28.890 --> 00:55:31.410
obwohl sie eigentlich dafür prädestiniert wäre.

00:55:33.470 --> 00:55:39.150
Und man hätte jetzt natürlich was bauen können, wo man beliebig viele Anfasser

00:55:39.150 --> 00:55:42.610
mit Tangenten einstellen kann, aber es wäre unfassbar kompliziert geworden,

00:55:42.630 --> 00:55:44.830
auch für uns das zu authoren.

00:55:45.830 --> 00:55:48.750
Und deswegen hat man dann irgendwann den Einfall gehabt, Moment mal,

00:55:48.790 --> 00:55:55.430
wir könnten doch einfach an SVG, glaube ich, angelehnte Syntax verwenden,

00:55:55.710 --> 00:56:04.310
um eine Kurve zu beschreiben, die eigentlich aus quasi geraden Verbindungsstücken besteht, aber eben,

00:56:04.650 --> 00:56:08.350
wenn man genug Punkte darin einsetzt, dann wirkt sie dennoch,

00:56:08.570 --> 00:56:13.030
als wenn sie eben eine weiche Kurve wäre, so wie wir das in Spielen kennen mit

00:56:13.030 --> 00:56:17.470
dem Polycount, also wenn der hoch ist, dann wirken eben Kugeln auch kugelig.

00:56:17.810 --> 00:56:23.150
Und wenn er niedrig ist, dann nicht. Und diesen Trick hat man sich da eben zunutze

00:56:23.150 --> 00:56:32.370
gemacht und gesagt, genau, wir ermöglichen jetzt, eine solche Kurve zu definieren.

00:56:32.530 --> 00:56:35.770
Die Funktion heißt deswegen auch linear, weil es eben tatsächlich eigentlich

00:56:35.770 --> 00:56:40.250
alles nur Linien sind, die miteinander verbunden sind und keine Kurven.

00:56:41.190 --> 00:56:45.990
Und da kann man dann eben eine beliebige Kurvenform mit definieren,

00:56:45.990 --> 00:56:52.290
Unter anderem eben auch dieses Auftitschen und noch ein paar Mal nachtitschen.

00:56:56.990 --> 00:57:01.230
Hast du das schon mal benutzt? Nee, bisher nicht.

00:57:01.430 --> 00:57:05.730
Aber ich hatte diesen Auftitsch-Fall noch nicht. Aber wenn irgendein Kunde,

00:57:06.030 --> 00:57:09.270
Kundin irgendwann mal mit diesem Wunsch kommt,

00:57:09.610 --> 00:57:14.330
dann weiß ich so, dann kann ich sagen, jo, das kriegen wir hin.

00:57:14.330 --> 00:57:16.430
Und dann weiß ich auch, wie ich das mache.

00:57:17.110 --> 00:57:23.570
Ich finde das unglaublich cool, also dass das möglich ist, dass das funktioniert.

00:57:23.930 --> 00:57:29.410
Ich hätte gern mal den Use Case und wenn nicht, dann baue ich mir,

00:57:29.450 --> 00:57:30.950
glaube ich, einfach ein Easter Egg ein,

00:57:31.810 --> 00:57:35.290
wo ich einfach so ein Basketball irgendwo mal fallen lasse, weil wie das ausschaut,

00:57:35.350 --> 00:57:39.050
ist ja der Hammer, dass das mit einfach nur so ein bisschen Code-Geschreibe geht.

00:57:41.005 --> 00:57:45.145
Ja, es gibt so einen Mosaikstein mehr, der einem irgendwie gefehlt hat.

00:57:45.285 --> 00:57:49.045
Das sind so Luxusprobleme, aber dennoch.

00:57:49.305 --> 00:57:53.545
Aber es ist Wahnsinn, wie einfach das dann ist. Also versuch das mal ohne sowas

00:57:53.545 --> 00:57:54.645
irgendwie hinzukriegen.

00:57:54.785 --> 00:58:00.745
Ich bin jetzt hier gerade auf die Smashing-Megasign-Seite gegangen,

00:58:01.105 --> 00:58:04.685
Artikel The Path to Awesome CSSE Sing with the Linear Function.

00:58:05.085 --> 00:58:08.545
Und da ist ganz unten eben dieses Basketball-Beispiel und das schaut einfach

00:58:08.545 --> 00:58:10.525
so realistisch und so cool aus.

00:58:11.565 --> 00:58:15.965
Ja, schmeiß mal in den Chat rein, dann würde ich das auf jeden Fall mal in die Shownotes packen.

00:58:16.845 --> 00:58:20.265
Und die Überlegung, die ich gerade habe, ist, so ein Basketball braucht man

00:58:20.265 --> 00:58:23.985
vielleicht ein bisschen selten, aber was kann man wirklich Hilfreiches in der

00:58:23.985 --> 00:58:25.605
UI, in der UX damit machen?

00:58:26.625 --> 00:58:32.805
Ich mag jetzt zum Beispiel, wenn etwas, ein Formular, ich mag diese Spielereien,

00:58:32.885 --> 00:58:35.025
wenn zum Beispiel ein Formular nicht abgeschickt werden kann,

00:58:35.145 --> 00:58:37.705
weil man hat vergessen, die AGB anzuklicken.

00:58:38.285 --> 00:58:43.125
Und ich finde das ultra süß. Ich hoffe, es nervt keinen, weil ich finde es einfach

00:58:43.125 --> 00:58:47.105
ultra süß, wenn man dann entweder den Button oder den Container mal so in den

00:58:47.105 --> 00:58:49.705
Kopf schütteln lässt. Ich finde es so knuffig.

00:58:50.425 --> 00:58:56.405
Und ich könnte mir auch vorstellen, dass man vielleicht mit solchen Codeschnipseln

00:58:56.405 --> 00:58:58.225
das dann noch ein bisschen cooler machen könnte.

00:58:58.625 --> 00:59:01.425
Ich weiß aber eben auch, wenn es solche Codeschnipsel nicht gibt,

00:59:01.545 --> 00:59:05.145
wie unglaublich schwer es sein kann, da eine realistische Linie hinzubekommen.

00:59:05.145 --> 00:59:07.385
Und gerade bei sowas ist es leider

00:59:07.385 --> 00:59:12.205
doch wichtig, dass es, wenn man das implementiert, dass es dann gut wirkt.

00:59:12.645 --> 00:59:14.965
Ansonsten hätte man es vielleicht lieber einfach sein gelassen,

00:59:15.105 --> 00:59:20.425
bevor da so ein wobbly-dobbly-Dings kommt. Trumpfen natürlich Motion-Designer groß auf.

00:59:20.805 --> 00:59:26.725
Also wenn man so jemanden im Zugriff hat, dann macht das schon viel aus.

00:59:27.105 --> 00:59:31.765
Also weil die einfach so diese ganzen Animationstricks, also die man so,

00:59:31.925 --> 00:59:36.705
kennt man ja auch von so diese Disney-Prinzipien und so, das haben die natürlich

00:59:36.705 --> 00:59:38.145
alles irgendwie im Blut.

00:59:39.085 --> 00:59:44.865
Oder gelernt. Ja, genau, gelernt und dann im Blut. Und das können die dann einfach.

00:59:46.605 --> 00:59:52.445
Genau. Aber vielleicht können wir ja unseren Hörerinnen und Hörern die Frage

00:59:52.445 --> 00:59:56.145
stellen, habt ihr denn eine Seite, wo ihr diese Funktion schon benutzt habt?

00:59:56.505 --> 00:59:59.505
Oder ein Projekt? Und schickt uns doch mal einen Link.

01:00:00.005 --> 01:00:02.185
Da wollen wir mal gucken, was ihr da Schönes gezaubert habt.

01:00:02.725 --> 01:00:06.065
Ja, ich finde es wahnsinnig spannend, weil es einfach so eine Sache ist,

01:00:06.165 --> 01:00:09.825
wo ich mich eher weniger mit beschäftige und dann auch die Use Cases nicht weiß.

01:00:09.945 --> 01:00:13.445
Und ich finde es einfach ganz toll, wenn das jemand kann, wenn das jemand wirklich

01:00:13.445 --> 01:00:16.665
benutzt, sich da reingefuchst hat. Totaler Respekt dafür.

01:00:19.859 --> 01:00:23.179
Denn der nächste Punkt, den wir hier haben, ist wieder so ein pragmatischer Trick.

01:00:24.299 --> 01:00:28.619
Und zwar sind das die Intrinsic Sizing Keywords. Min-Content,

01:00:28.759 --> 01:00:30.239
Max-Content, Fit-Content.

01:00:30.979 --> 01:00:34.459
Und zwar angewendet auf die Width-Property.

01:00:34.459 --> 01:00:39.639
Und ich kann damit sagen, die Width ist beim Max-Content so,

01:00:39.839 --> 01:00:42.319
das ist immer so ein kleiner Brain-Verwirrer.

01:00:42.959 --> 01:00:49.599
Ist so lang, wie der Content maximal lang sein kann oder minimal lang sein kann

01:00:49.599 --> 01:00:53.979
oder genau den Content, also zum Beispiel den Text, fitted.

01:00:53.979 --> 01:01:00.039
Und ich mache da jetzt als erstes, schnappe ich mir das Fit-Content als Value

01:01:00.039 --> 01:01:02.899
mal, weil ich kenne die Beispiele,

01:01:03.279 --> 01:01:07.679
dass du das auf eine Headline setzt und dann hast du eine Hintergrundfarbe,

01:01:07.859 --> 01:01:12.599
die genauso lang ist, wie der Text lang ist und kannst einfach sagen,

01:01:12.679 --> 01:01:14.339
with Fit-Content, Background,

01:01:14.639 --> 01:01:20.839
Magenta und dann hast du hinter der Headline dein Magenta-Farbe eben genauso

01:01:20.839 --> 01:01:23.839
lang, wie der Text lang ist in verschiedenen Sprachen und so weiter.

01:01:24.339 --> 01:01:29.499
Und ich benutze das allerdings auch gerne, wenn man mit Flex arbeitet und so ein Problemchen hat,

01:01:29.699 --> 01:01:36.219
dass wenn ich da bei der einen Zelle einen Link drin habe und auf einmal ist

01:01:36.219 --> 01:01:38.379
einfach diese komplette Breite klickbar,

01:01:38.439 --> 01:01:41.299
aber ich will ja gar nicht, dass die komplette Breite klickbar ist und ich dann

01:01:41.299 --> 01:01:46.599
als User random auf die Seite klicke und aus Versehen passiert dann eine Aktion,

01:01:46.819 --> 01:01:48.659
weil ich auf einen Button oder auf einen Link gedrückt habe.

01:01:48.659 --> 01:01:53.059
Und da kann ich dann auch sagen, wenn jetzt aus CSS-Gründen,

01:01:53.319 --> 01:01:57.519
aus welchen auch immer drumherum, dieser ganze Bereich jetzt klickbar ist,

01:01:57.699 --> 01:01:59.799
anstatt einfach nur der Link oder der Button,

01:02:00.199 --> 01:02:03.659
dann kann ich da auch ein Fit-Content dran setzen und ja, plötzlich nur noch

01:02:03.659 --> 01:02:04.899
Link oder Button klickbar.

01:02:05.645 --> 01:02:10.225
Min und Max-Content habe ich aber auch schon als Trick verwendet und leider,

01:02:10.505 --> 01:02:13.265
weil ich einfach mit meinem Kopf und Min und Max immer wieder verwechsel,

01:02:13.405 --> 01:02:17.105
was da jetzt was ist, kann ich nicht sagen, wie er genau noch funktioniert hat,

01:02:17.145 --> 01:02:18.145
aber eins von beiden war es.

01:02:18.825 --> 01:02:25.945
Und zwar war das in einer Tabelle. Und in dieser Tabelle wollte ich die Spalten

01:02:25.945 --> 01:02:30.285
sehr dynamisch haben, dass sie sich wirklich nach dem Text ausrichten,

01:02:30.325 --> 01:02:32.245
wie breit diese Spalte ist.

01:02:32.405 --> 01:02:38.205
Ich wollte aber durchaus, wenn Content drin ist, schon eine Mindestbreite haben,

01:02:38.345 --> 01:02:42.825
damit ich da jetzt nicht einfach ganz, ganz, ganz viele Zeilenumbrüche habe,

01:02:42.965 --> 01:02:45.585
sondern da wollte ich schon sagen, also wenn Content drin ist,

01:02:46.125 --> 01:02:49.505
dann sollte das, ich glaube, ich habe vielleicht sogar eine Calculator-Funktion

01:02:49.505 --> 01:02:52.665
verwendet, wo ich gesagt habe, es sollte jetzt einfach entweder dieser Min-Content

01:02:52.665 --> 01:02:55.165
sein, oder Max-Content, Entschuldigung, ich habe es vergessen,

01:02:56.045 --> 01:02:58.365
oder maximal 200 Pixel.

01:02:59.225 --> 01:03:05.545
Aber wenn ich jetzt in keiner Spalte auf dieser Tabellenseite Werte drin habe,

01:03:05.605 --> 01:03:08.605
sondern einfach nur so ein Fallback-Dash, dann will ich nicht,

01:03:08.705 --> 01:03:12.405
dass das 200 Pixel breit ist, dann will ich einfach nur, dass es maximal so

01:03:12.405 --> 01:03:13.865
breit ist wie der Tabellenkopf.

01:03:14.525 --> 01:03:19.205
Und das wäre relativ kompliziert gewesen, hätte es diese Keywords nicht gegeben,

01:03:19.285 --> 01:03:21.565
weil mit denen war das unfassbar einfach zu sagen.

01:03:21.725 --> 01:03:26.965
Also wenn was drinsteht, dann macht es auf den Min-Content, ansonsten maximal 200 Pixel.

01:03:28.065 --> 01:03:33.425
Und wenn nix drinsteht, dann mach halt gar nix. Und kein JavaScript,

01:03:33.705 --> 01:03:35.485
kein gar nix. Einfach nur dieses Attribut.

01:03:36.145 --> 01:03:39.705
Ja, das ist schon praktisch, dass man das jetzt zur Verfügung hat.

01:03:40.485 --> 01:03:49.925
Definitiv. Auch sowas wie Elemente, die fix positioniert sind.

01:03:50.485 --> 01:03:56.985
Oder sagen wir mal arbiträrbreite Elemente, die man aber gerne zentrieren will

01:03:56.985 --> 01:04:03.845
über Margin oder so, weil es eben Block-Elemente sind und man nicht einen Text allein machen kann.

01:04:04.385 --> 01:04:10.325
Da kann man das halt auch super benutzen, mit dem man irgendwie holt und dann

01:04:10.325 --> 01:04:16.385
fit Content oder meinetwegen auch Max-Content und dann kann man Margin,

01:04:17.165 --> 01:04:24.305
wir sind jetzt ja hier in der jetzt müssen wir sagen Margin Inline Auto gut gemerkt ja.

01:04:28.145 --> 01:04:29.345
Sehr hilfreich,

01:04:32.551 --> 01:04:36.451
Ich weiß nicht, haben wir Shapes und Graphics durch? Das haben wir durch,

01:04:36.651 --> 01:04:39.971
weil wir haben jetzt, ich kann's mal kurz erwähnen, hier kommt noch Conic Gradient

01:04:39.971 --> 01:04:41.311
und hier kommt noch Offset Path.

01:04:42.431 --> 01:04:44.851
Genau. Offset Path, glaub ich, sowieso was ganz, ganz Neues.

01:04:44.991 --> 01:04:47.691
Das kommt bestimmt noch im nächsten Server auch noch mal dran.

01:04:47.791 --> 01:04:48.711
Und dann sprechen wir drüber.

01:04:49.251 --> 01:04:51.671
Absolut, genau. Dann ist es reif.

01:04:52.351 --> 01:04:55.671
Ja, sonst sprechen wir nur zweimal drüber. Wahrscheinlich, wenn man sich jetzt

01:04:55.671 --> 01:04:59.351
so der Reihe nach die ganzen State-of-CSS-Folgen anhört, wahrscheinlich reden

01:04:59.351 --> 01:05:02.131
wir die ganze Zeit das Gleiche und sagen, ah, jetzt ist es da.

01:05:04.131 --> 01:05:07.851
Dann sind wir jetzt bei den Colors. Genau, bei den Colors.

01:05:08.631 --> 01:05:12.071
Ich halte mich dran. Fangen wir gleich oben an. Ich glaube, oben ist immer das

01:05:12.071 --> 01:05:15.311
Coolste. Ist das alphabetisch geordnet? Nee, dann ist oben einfach das Coolste.

01:05:16.251 --> 01:05:19.471
Wir haben eine neue Funktion, die heißt Color.

01:05:20.251 --> 01:05:26.051
Ship. Ich habe das Beispiel. Für die Klasse Brightest Green wird auf die Property

01:05:26.051 --> 01:05:32.811
Background angewendet, der Wert der Funktion Color, Display minus B3, 0, 1, 0.

01:05:34.311 --> 01:05:42.831
Genau, also die Color-Funktion soll diesem Wildwuchs, den wir an Funktionen

01:05:42.831 --> 01:05:46.131
bisher haben, so ein bisschen Einhalt gebieten.

01:05:47.511 --> 01:05:55.291
Wir haben ja die RGB-Funktion, die RGB-A-Funktion, die aber jetzt in der RGB-Funktion auch drinsteckt.

01:05:55.291 --> 01:06:02.031
Also da kann man jetzt ja auch ein Alpha-Property, Alpha-Wert-Property der RGB-Funktion

01:06:02.031 --> 01:06:03.771
geben in neueren Browsern.

01:06:04.011 --> 01:06:11.331
Dann haben wir HSL, dann haben wir Lab, nee, wir haben LCH, so.

01:06:13.482 --> 01:06:17.402
Naja, und mit jedem neuen Farbraum bzw.

01:06:17.842 --> 01:06:21.242
Mit jedem neuen Farbmodell, das auf diese Farbräume zugreift,

01:06:21.502 --> 01:06:26.382
kamen neue Farbfunktionen dazu und das skaliert irgendwie auf Dauer nicht.

01:06:26.382 --> 01:06:30.682
Und deswegen gibt es eben die eine Funktion, sie alle zu knechten,

01:06:30.882 --> 01:06:31.842
nämlich die Color-Funktion,

01:06:32.102 --> 01:06:38.042
die als ersten Parameter oder das Farbmodell entgegen nimmt,

01:06:38.242 --> 01:06:42.042
mit dem man jetzt eben arbeiten möchte und davon abhänge ich dann,

01:06:42.202 --> 01:06:45.682
welche Parameter kommen da hinten noch mit rein.

01:06:46.442 --> 01:06:54.982
Und Display P3, was wir hier in dem Beispiel haben, ist ein Farbraum und Farbmodell

01:06:54.982 --> 01:06:57.302
zugleich. Also manchmal ist das dasselbe.

01:06:58.122 --> 01:07:04.782
Manchmal gibt es manchmal verschiedene Modelle wie RGB und HSL,

01:07:04.982 --> 01:07:08.702
um auf den ein und derselben Farbraum zuzugreifen. Also man kann da nicht mehr

01:07:08.702 --> 01:07:11.922
Farben mit ausdrücken, man kann sie nur eben anders niederschreiben.

01:07:12.502 --> 01:07:20.202
Hier bei P3 ist es eben ein Farbmodell und Farbraum zugleich und das ist so

01:07:20.202 --> 01:07:26.322
einer, der auf halbem Weg zwischen normal breitem Farbraum,

01:07:26.402 --> 01:07:29.122
also normal Gamut hin zu wide Gamut,

01:07:29.222 --> 01:07:34.202
was wir mit LCH und Lab eben ganz neu haben.

01:07:34.202 --> 01:07:40.542
Und P3 liegt halt dazwischen und ist eine Sache, die Apple irgendwann in seinen Browser gebracht hat.

01:07:41.482 --> 01:07:46.302
Meine These ist, um ihre ganzen Anwendungen, die sie mit Webtechnologien schreiben,

01:07:46.742 --> 01:07:52.122
da gibt es ja ein paar, auf ihre P3-fähigen Bildschirme, die sie irgendwann

01:07:52.122 --> 01:07:54.022
eingebaut haben, eben anpassen zu können.

01:07:54.262 --> 01:07:56.642
Also wie das bei Apple oft ist.

01:07:57.002 --> 01:08:00.122
Die erfinden irgendwas, weil sie einen ...

01:08:00.811 --> 01:08:05.251
Einen hausgemachten Bedarf haben, das zu können.

01:08:05.831 --> 01:08:10.511
Und ich glaube, das war es dann auch. Ja, umfangreich erklärt.

01:08:10.651 --> 01:08:13.311
Wahnsinn, woher du das immer alles aus deinem Hütchen ziehst.

01:08:13.791 --> 01:08:17.391
Also, falls irgendjemand denkt, wir würden hier mal auf Päuschen drücken und

01:08:17.391 --> 01:08:21.031
kurz recherchieren. Nein, der Shep hat das alles in seinem Kopf. Wahnsinn.

01:08:22.351 --> 01:08:27.711
Ja, ich mache jetzt auch schon seit 2020 das CSS-Café.

01:08:28.691 --> 01:08:34.311
Und da haben wir ja immer tolle SprecherInnen, die tolle Sachen erzählen.

01:08:34.691 --> 01:08:40.211
Und je mehr man sich damit beschäftigt, desto mehr prägt sich das dann ein.

01:08:40.391 --> 01:08:44.671
Und desto mehr Sinn kann man aus all dem ableiten, sage ich jetzt mal.

01:08:47.631 --> 01:08:51.311
Worüber wir schon mal gesprochen haben, ist XenColor.

01:08:52.211 --> 01:08:59.231
Ausgiebig in der Revision 493. Schau mal, das war am 7. September 2021.

01:08:59.731 --> 01:09:03.391
Das ist ganze drei Jahre her, dass wir über Ex-Color gesprochen haben.

01:09:04.291 --> 01:09:08.511
Dementsprechend. Alter Hut. Alter Hut, was ist das dann hier drin?

01:09:08.791 --> 01:09:14.831
Also wer hier nicht hört auf It oder Justit angegeben hat, der nochmal hier

01:09:14.831 --> 01:09:17.511
unsere drei Jahre alte Revision bitte anhören.

01:09:19.991 --> 01:09:21.751
Wir könnten über Color Mix sprechen.

01:09:23.308 --> 01:09:25.988
Ich glaube, das ist auch relativ gut supported in den Browsern.

01:09:26.348 --> 01:09:30.628
Ich glaube, ich lasse dich bei der Kategorie einfach wirklich weitersprechen.

01:09:31.048 --> 01:09:34.548
Ja, ich gucke mal kurz, ob meine These stimmt. Bevor ich hier jetzt doofe Sachen

01:09:34.548 --> 01:09:36.388
sage, die nicht stimmen.

01:09:37.348 --> 01:09:42.868
ColorMix, genau, Browser-Compatibility, ja, super. Genau, gibt es jetzt in allen Browsern.

01:09:44.348 --> 01:09:47.588
Genau, und der Name gibt es ja schon ein Stück weit her.

01:09:49.608 --> 01:09:54.868
Du kannst zwei Farben nehmen und sie in einem gewissen Mischverhältnis miteinander mischen.

01:09:55.048 --> 01:09:58.788
Also wenn du nur zwei Farben angibst, dann werden die,

01:10:00.048 --> 01:10:07.928
im RGB-Farbraum jeweils zu 50 Prozent reingemischt und du kannst aber auch als

01:10:07.928 --> 01:10:13.768
erstes Argument einen Farbraum angeben, so wie das ja bei Gradienten mittlerweile auch möglich ist,

01:10:14.348 --> 01:10:17.148
in denen diese ganze Berechnungen ablaufen soll.

01:10:17.228 --> 01:10:21.608
Das hat ja hier und da auch mal tatsächlich unterschiedliche Auswirkungen.

01:10:22.388 --> 01:10:31.708
Etwa weil LCH und Lab ja nicht sozusagen auf purer Mathematik beruhen,

01:10:31.788 --> 01:10:35.988
sondern eher so ein bisschen unser menschliches Sehen mit einbeziehen.

01:10:36.368 --> 01:10:42.648
Und darum kommen da eben andere Ergebnisse raus, als wenn man jetzt in RGB mischt oder in P3 oder so.

01:10:43.268 --> 01:10:46.208
Naja, jedenfalls kann man einen Farbraum auch angeben, wenn man das möchte und

01:10:46.208 --> 01:10:51.188
man kann auch Prozent Werte für die zum Mischenden Farben angeben,

01:10:51.568 --> 01:10:58.328
wenn man eben sagt, ich möchte Farbe A in einen gewissen geringeren Anteil einmischen als die Farbe B.

01:10:59.888 --> 01:11:04.788
Und das sind halt alles solche Bausteine, diese Color Mix Funktionen,

01:11:04.988 --> 01:11:10.808
wie auch ein paar andere, die irgendwann sozusagen in die Fußstapfen treten sollen von.

01:11:12.448 --> 01:11:20.008
SAS Color-Funktionen, mit dem man ja auf Basis bestimmter Grundfarben ein ganzes

01:11:20.008 --> 01:11:21.828
Theme im Grunde ableiten kann.

01:11:22.886 --> 01:11:26.486
Und ich denke, das ist jetzt wieder aus meiner so ein bisschen praktischeren

01:11:26.486 --> 01:11:30.966
Sicht das Beste dran, dass es jetzt diese Color-Funktionen gibt,

01:11:31.086 --> 01:11:34.046
und zwar wirklich gute und auch diese umfangreichen.

01:11:35.426 --> 01:11:39.046
Nicht, dass ich sage, jetzt habe ich dieses Problem und ich möchte das verwenden,

01:11:39.266 --> 01:11:43.966
sondern aus dem Grund heraus, dass man vielleicht beschließt,

01:11:44.106 --> 01:11:46.826
ich glaube, wir brauchen das nicht mehr bei uns im Projekt,

01:11:47.106 --> 01:11:51.166
weil wir haben jetzt das und das stattdessen und Nest, den gibt es hier mittlerweile auch.

01:11:51.166 --> 01:11:56.026
Es kann aber eben daran scheitern, dass wir diese eine Color-Funktion von SAS

01:11:56.026 --> 01:12:01.586
verwenden, ob das jetzt Dark, Lighten, sonst was ist und deswegen daran festhalten

01:12:01.586 --> 01:12:05.006
oder sagen, okay, anstatt Darken zu haben,

01:12:05.306 --> 01:12:08.246
setzen wir jetzt halt einen festen Wert und rechnen uns den selber aus,

01:12:08.406 --> 01:12:11.766
aber dadurch, dass es dann einfach diese Funktionen im puren CSS gibt,

01:12:11.986 --> 01:12:15.986
ist das einfach super, um vielleicht auch das ein oder andere Hilfstool,

01:12:16.206 --> 01:12:20.006
das auf jeden Fall sehr viel Wert in der Vergangenheit hatte,

01:12:20.006 --> 01:12:21.646
als es diese Sachen noch nicht gab,

01:12:22.826 --> 01:12:24.246
vielleicht dann doch abzulösen.

01:12:26.226 --> 01:12:30.166
Genau. Also früher oder später können wir da alle drauf umsteigen.

01:12:32.706 --> 01:12:37.526
Und dann wäre mein Vorschlag, also hier werden ja auch White Gamut Colors erwähnt,

01:12:37.626 --> 01:12:39.426
also quasi Die hatten wir ja.

01:12:41.186 --> 01:12:44.206
623 habe ich gerade rausgesucht. Richtig, richtig. Du wahrscheinlich auch und

01:12:44.206 --> 01:12:45.266
ich habe sie jetzt voll weggenommen.

01:12:46.366 --> 01:12:49.506
Das hatte ich jetzt nicht rausgesucht. Wir hatten eine Stunde,

01:12:49.766 --> 01:12:53.006
21 Minuten komplett über dieses Thema.

01:12:53.666 --> 01:12:58.886
Genau. Und wir haben sie eben kurz erwähnt, also quasi größere Farbräume.

01:12:59.406 --> 01:13:02.306
Und Interpolation Color Spaces hatten wir auch kurz.

01:13:02.426 --> 01:13:07.046
Da geht es eben darum, in welchem Farbraum mixt man oder in welchem Farbraum

01:13:07.046 --> 01:13:09.386
baut man den Gradienten auf.

01:13:09.806 --> 01:13:13.426
Das hatten wir kurz erwähnt. Aber wir haben noch Relative Colors.

01:13:13.746 --> 01:13:18.186
Das ist auch noch eine schöne neue Syntax.

01:13:21.826 --> 01:13:26.526
Also im Prinzip ist das so eine Art Farb-Destructuring, also du kannst eine

01:13:26.526 --> 01:13:31.586
Farbe nehmen und kannst aus ihren Grundbeständen teilen, die kannst du destrukturen,

01:13:31.666 --> 01:13:36.706
aber eben nur ein paar davon verwenden und die, die du nicht verwendest da kannst du dann,

01:13:36.906 --> 01:13:39.646
die kannst du durch eigene Werte ersetzen und du könntest jetzt zum Beispiel

01:13:39.646 --> 01:13:45.426
eine HSL-Farbangabe dem, die destrukturen und dann sagst du Hue und Saturation

01:13:45.426 --> 01:13:51.026
will ich weiter benutzen Aber die Lightness, die setzt sich neu.

01:13:51.446 --> 01:13:58.946
Und auch das dient wiederum, diesem Ziel SES ersetzen zu können,

01:13:59.186 --> 01:14:03.766
um quasi ein ganzes Theme aufzubauen, nur aus ein paar Basisfarben.

01:14:05.088 --> 01:14:09.548
Wahnsinn. Wahnsinn. Ich frage mich gerade nur.

01:14:10.968 --> 01:14:14.008
Möglicherweise hat es dieses Beispiel auch selber schon beantwortet,

01:14:14.088 --> 01:14:19.028
denn bei den Relative Colors, da habe ich eine CSS-Variable,

01:14:19.468 --> 01:14:25.268
aka Custom Property, für den Color-Wert gesetzt und gebe diesen Color-Wert als

01:14:25.268 --> 01:14:28.368
Custom Property in die Funktion dann hinein.

01:14:28.368 --> 01:14:31.528
Denn was ich mich jetzt gerade gefragt habe, es ist ja krass,

01:14:31.608 --> 01:14:36.008
dass ich jetzt hier was kalkulieren kann, zu sagen, ich behalte H und S und

01:14:36.008 --> 01:14:38.388
nur L möchte ich neu kalkulieren.

01:14:38.828 --> 01:14:41.668
Da hat sich bei mir jetzt die Frage geöffnet, was passiert denn bei verschiedenen

01:14:41.668 --> 01:14:44.188
Color-Modes, wenn ich einen Light-Mode habe, wenn ich einen Dark-Mode habe,

01:14:44.248 --> 01:14:51.128
wenn ich vielleicht sogar White-Theming habe und unterstütze bestimmte Themes

01:14:51.128 --> 01:14:52.868
kundenbasierterweise.

01:14:53.388 --> 01:14:56.528
Die einen mögen halt orange und die anderen mögen purple. Und da könnte ich

01:14:56.528 --> 01:15:00.148
auch noch ganz viele witzige Geschichten erzählen, was man teilweise im Customer-Support

01:15:00.148 --> 01:15:01.628
hört, wenn man da purple verwendet.

01:15:01.968 --> 01:15:06.288
Es gibt Leute, die haben einen großen Hass. Ich kann es nicht anders ausdrücken.

01:15:06.288 --> 01:15:10.148
Jetzt kein Unmut, ein wirkliches Problem mit irgendwelchen Farben.

01:15:10.248 --> 01:15:11.828
Ich will jetzt gar nicht Purple als Beispiel nennen.

01:15:12.168 --> 01:15:15.528
Und dann braucht man vielleicht mal eine andere Hintergrundfarbe für diese Person,

01:15:15.628 --> 01:15:17.408
um sie glücklich zu machen. Machen wir doch gerne.

01:15:18.448 --> 01:15:21.828
Und denkst du, das ist dann aber dadurch, dass ich jetzt eine Custom Property

01:15:21.828 --> 01:15:27.068
reingebe, immer so verwendbar, dass ich jetzt die Lightness ändere?

01:15:28.888 --> 01:15:35.528
Ja, aber in dem Beispiel, das du gerade genannt hast, du hast ja gerade gesagt,

01:15:35.768 --> 01:15:37.908
so Light-Mode versus Dark-Mode.

01:15:38.288 --> 01:15:44.088
In dem Beispiel, was hier drin ist, wird ja die Lightness tatsächlich mit 1,2 multipliziert.

01:15:44.088 --> 01:15:49.188
Also die wird nicht quasi vom Autor gänzlich neu gesetzt, sondern es wird eben

01:15:49.188 --> 01:15:55.188
die vorhandene genommen und einfach per Kalk noch mal verstärkt, die Leidness.

01:15:55.828 --> 01:16:03.588
Da wäre es wahrscheinlich klüger, die im Dark-Mode-Beispiel vielleicht eher zu,

01:16:03.888 --> 01:16:09.848
um diesen Faktor zu senken, anstatt sie zu stärken, weil man ja tendenziell

01:16:09.848 --> 01:16:11.528
eher alles invertiert, was man

01:16:11.528 --> 01:16:14.308
so macht. Ich glaube, dieses Invertieren macht man doch gar nicht mehr.

01:16:14.528 --> 01:16:16.668
Das Invertieren war ja die leichte Variante.

01:16:17.168 --> 01:16:20.608
Weil dann kannst du sagen, ich mache den plumpen Ansatz, ich inventiere alles

01:16:20.608 --> 01:16:21.548
und dann hast du ein Dark Mode.

01:16:22.608 --> 01:16:27.628
Ich meine auch nicht, dass man den Invert-Filter nutzt, also dieses Dark Mode

01:16:27.628 --> 01:16:30.788
verarmelt, das meine ich gar nicht, sondern einfach, dass da,

01:16:30.908 --> 01:16:35.528
wo man hinstrebt, ist ja sozusagen das Gegenteil vom Light Mode.

01:16:36.327 --> 01:16:40.007
Und darum ist wahrscheinlich, weil ja auch irgendeine Schrift vielleicht auf

01:16:40.007 --> 01:16:40.987
diesem Hintergrund ist,

01:16:41.867 --> 01:16:45.887
will man, und die ja vielleicht dann invertiert ist, also die ist dann nicht

01:16:45.887 --> 01:16:49.827
mehr schwarz, sondern weiß, dann will man beim Hintergrund den ja in dem Fall

01:16:49.827 --> 01:16:53.507
nicht heller machen, sondern den will man dann eher dunkler machen,

01:16:53.547 --> 01:16:55.867
damit der Lesekontrast funktioniert.

01:16:56.387 --> 01:16:59.947
Ich denke, da müsste man dann schon irgendwie gucken. Ja, da hast du wahrscheinlich recht. Genau.

01:17:01.727 --> 01:17:06.607
Neue Möglichkeiten, neue potenzielle Fettnäpfchen, die man treten kann, wie das immer so ist.

01:17:08.407 --> 01:17:11.527
Genau. Gut, wahrscheinlich einmal dran gedacht, dann machst du halt sagen,

01:17:11.687 --> 01:17:14.567
also ich hoffe, das ist immer viel cooler, wenn man einfach sagen kann,

01:17:14.647 --> 01:17:17.767
wenn Dark Mode preferred ist oder sowas, dann mach das und das.

01:17:18.167 --> 01:17:20.667
Schwieriger wird's, wenn du sehr viele Modis hast und dann wirklich,

01:17:20.827 --> 01:17:25.107
keine Ahnung, hast vielleicht an dem Body eine Klasse dran, Theme 1,

01:17:25.287 --> 01:17:30.287
2, 3 und dann musst du eben irgendwie sagen Punkt 7, 1, 2, 3 Punkt Foo und dann

01:17:30.287 --> 01:17:31.487
stattdessen das hier machen.

01:17:32.467 --> 01:17:40.367
Genau. Aber theoretisch hast du das Problem ja in SAS jetzt auch und hier geht

01:17:40.367 --> 01:17:43.507
es ja eben auch darum, solche Dinge ablösen zu können.

01:17:44.067 --> 01:17:47.347
Stimmt, ist also das Problem hatten wir schon, wir haben es jetzt nur ohne SAS

01:17:47.347 --> 01:17:50.127
noch zur Möglichkeit gestellt.

01:17:50.367 --> 01:17:53.927
Ich glaube, man kann tatsächlich vielleicht wahrscheinlich auch diesen Multiplikator-Wert

01:17:53.927 --> 01:17:55.967
einfach auch als Custom-Property reingeben.

01:17:56.047 --> 01:17:58.427
Da muss man nicht das neue ganze Background-Color neu schreiben,

01:17:58.567 --> 01:18:00.947
sondern Multiplikator ist dann auch einfach eine Custom-Property,

01:18:01.107 --> 01:18:03.907
die bei Light und Dark-Mode einfach ein bisschen anders ist.

01:18:04.327 --> 01:18:07.527
Und hier haben wir den witzigen Fall. Das ist eine Syntax, die ich jetzt mittlerweile

01:18:07.527 --> 01:18:10.187
sehr gewohnt bin, deswegen kann ich das sehr einfach lesen.

01:18:10.247 --> 01:18:14.907
Und ich hoffe, jetzt einmal voller Circleback zu dem Grid-Gespräch am Anfang,

01:18:15.027 --> 01:18:20.667
dass das bei Grid einfach so eintreten könnte, dass ich dann auf dieses klammernreiche

01:18:20.667 --> 01:18:23.787
auf die Klammern reiche Syntax, Array-Syntax schauen kann.

01:18:23.987 --> 01:18:29.247
Ich meine, hier ist ja wirklich witzig, da steht halt einfach so H Space, S, Space, L, Space.

01:18:29.607 --> 01:18:32.147
Aber ich weiß, was es bedeutet und kann es deswegen lesen.

01:18:35.003 --> 01:18:39.103
Ja, schön. Dann wäre jetzt die Frage an dich. Ich glaube, mit dem Color-Kapitel sind wir durch.

01:18:39.483 --> 01:18:42.343
Aber wenn ich auf die Uhr schaue, haben wir jetzt so, sagen wir mal,

01:18:42.483 --> 01:18:45.763
eine Stunde 15 in etwa gefüllt.

01:18:46.783 --> 01:18:51.803
Unser Plan ist ja noch zwei Kapitel zu, also die ...

01:18:52.223 --> 01:18:54.943
Typografie habe ich schon ab. Das habe ich schon seit 20 Minuten,

01:18:55.003 --> 01:18:58.303
30 Minuten habe ich die Typografie schon abgehakt für die nächste.

01:18:58.303 --> 01:19:03.383
Dann deute ich daraus, dass wir noch Interactions machen und dann machen wir

01:19:03.383 --> 01:19:06.183
für den ersten Teil den Haken dran?

01:19:06.383 --> 01:19:10.283
Oder wie würdest du das sehen? Oder sollen wir jetzt den Haken dran machen und

01:19:10.283 --> 01:19:12.943
dann haben wir ein bisschen mehr Futter für die nächsten beiden,

01:19:13.263 --> 01:19:15.683
weil es werden ja dann wohl zwei, oder?

01:19:16.123 --> 01:19:18.603
Wir wissen es nicht. Man weiß es nicht. Wir wissen es nicht.

01:19:19.423 --> 01:19:24.183
Hier seht ihr, wie wir planen. Und die Punkte, was uns für unser menschliches

01:19:24.183 --> 01:19:26.883
Gehirn vielleicht verwirren, wir sind jetzt gerade mal bei Kapitel,

01:19:27.043 --> 01:19:31.863
also drei von 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 oder so was,

01:19:32.243 --> 01:19:33.583
haben wir jetzt abgehakt.

01:19:33.703 --> 01:19:36.063
Aber die letzten sind Resources und About You.

01:19:36.663 --> 01:19:39.443
Und eventuell, hier steht CSS Usage und Ava Tools.

01:19:40.163 --> 01:19:45.023
Genau. Wobei, wie ich uns kenne, werden wir dennoch in die Falle tappen und

01:19:45.023 --> 01:19:46.583
auch über diese Kapitel sprechen.

01:19:47.083 --> 01:19:53.103
Ja, ich bin jetzt gerade nebenher über die Interactions drüber gescrollt.

01:19:53.243 --> 01:19:56.143
Haha, das war voll gut, weil da geht es um Scrolling.

01:19:57.563 --> 01:20:03.443
Aber voll. Ja. Und ich glaube, ich würde ungern schnell drüber hupfen.

01:20:03.623 --> 01:20:09.983
Vor allem, weil ich da jetzt teasern möchte, dass wir auch noch auf den Dialog unten eingehen.

01:20:10.123 --> 01:20:16.043
Und ich befürchte, dass wir gleich einen Exkurs machen über das Dialog-Element.

01:20:16.043 --> 01:20:19.843
Und es nicht hinter uns bringen werden, nicht darüber zu sprechen,

01:20:20.043 --> 01:20:23.063
wenn wir über eigentlich Animationen sprechen, aber auf den Dialog.

01:20:23.943 --> 01:20:28.303
Und schließe mich deswegen an, vielleicht atmet jetzt auch die eine oder andere Person auf.

01:20:28.703 --> 01:20:31.843
Eine Stunde 20 schon vorbei und ich kann wieder was anderes machen.

01:20:32.103 --> 01:20:34.303
Und lass uns das beim nächsten Mal machen.

01:20:34.683 --> 01:20:38.103
Mit dem Teaser, wir machen entweder noch eine oder noch zwei draus.

01:20:38.183 --> 01:20:42.723
Ja, also meine These ist, dass wir wohl doch noch bei noch zwei ...

01:20:43.323 --> 01:20:47.583
Vielleicht ist beim nächsten Mal noch der Peter dabei, dann sind wir auf jeden Fall bei zwei. Ja.

01:20:48.383 --> 01:20:52.063
Weil eine Person noch zusätzlich dabei ist. Ja.

01:20:53.023 --> 01:20:58.043
Gut möglich. Sehr gut möglich. Genau, aber ich fand's super.

01:20:59.583 --> 01:21:03.883
War genau die richtige Menge an Sachen, die wir uns hier rausgesucht haben.

01:21:04.983 --> 01:21:09.383
Genau, der Stage ist ja noch eine Weile da. Ausgewertet ist er sowieso noch lange nicht.

01:21:11.503 --> 01:21:16.703
Darum rotten wir uns einfach nochmal zusammen und machen dann bei den Interactions

01:21:16.703 --> 01:21:19.903
weiter mit ganz viel Scrolling. Genau.

01:21:21.275 --> 01:21:26.615
Dann vielen Dank dir. Danke dir. Vielen Dank. Danke allen. Du bist ja heute

01:21:26.615 --> 01:21:28.715
in der Moderatorenrolle. Ich bin still. Nee, nee, du machst das schon gut.

01:21:29.595 --> 01:21:34.695
Vielen Dank an alle da draußen, dass ihr uns zugehört habt. Das freut uns sehr.

01:21:35.035 --> 01:21:40.335
Wenn ihr uns irgendwas mitteilen wollt, entweder Feedback oder auch einfach

01:21:40.335 --> 01:21:45.195
eure coolen Beispiele einsenden möchtet oder vielleicht auch Nachfragen habt,

01:21:45.315 --> 01:21:49.895
wie ich bin auch in dem Wann-Esser-Modus und ich habe echt keine Ahnung,

01:21:49.975 --> 01:21:53.455
was der Cone-Gradient ist, könnt ihr nicht doch noch mal auf den bitte eingehen.

01:21:53.775 --> 01:21:59.655
Dann sagt uns das gerne Bescheid. Wir haben den Community Draft als Slack,

01:21:59.735 --> 01:22:01.115
den man auf der Webseite findet.

01:22:01.575 --> 01:22:04.175
Ansonsten E-Mail an comments at workingdraft.

01:22:05.035 --> 01:22:08.695
Dort was eigentlich? .de. Danke.

01:22:10.875 --> 01:22:14.235
Das bleibt mir schon im Auto. Ich weiß gar nicht, was bei workingdraft.com ist,

01:22:14.335 --> 01:22:18.435
aber wahrscheinlich ist da irgendwas. Ich wollte gerade fast Org sagen.

01:22:19.255 --> 01:22:23.255
Org wäre auch nicht schlecht. Aber eigentlich dürfen wir ja nicht Org, wir sind ja keine Org.

01:22:23.895 --> 01:22:28.115
Bei WorkingGraph.com kommt aktuell einfach mal gar nichts. Vielleicht ist die

01:22:28.115 --> 01:22:30.415
Domain ja jetzt frei oder wieder frei.

01:22:31.035 --> 01:22:34.755
Dann können wir die einfach umrouten auf uns.

01:22:35.315 --> 01:22:40.015
Ja, auf jeden Fall gerne melden. Ich glaube, an dieser Stelle jetzt völlig random

01:22:40.015 --> 01:22:41.515
können wir auch so ein bisschen announcen.

01:22:42.495 --> 01:22:46.135
Auf X ist vielleicht, ich weiß nicht, ich hab mich jetzt schon ewig nicht mehr

01:22:46.135 --> 01:22:49.375
eingeloggt. Der Account besteht natürlich, damit der jetzt nicht gekapert bleibt.

01:22:50.115 --> 01:22:53.695
Kann aber sein, falls jemand auf X schreiben sollte, dass da eine Antwort jetzt

01:22:53.695 --> 01:22:56.155
wirklich lange dauern sollte, bis jemand von uns sich da mal einnimmt.

01:22:56.175 --> 01:22:59.875
Ich hab den noch hier überall drin eingespeichert. Also das sollte ich mitbekommen.

01:23:00.955 --> 01:23:04.515
Okay, ich bekomm's nicht mehr mit. Aber bei Blue Sky sind wir nicht, oder? Sind wir da?

01:23:06.615 --> 01:23:12.875
Bei Blue Sky kann ich uns gerne mal anmelden. Bei Mastodon sind wir vorhanden.

01:23:13.295 --> 01:23:18.215
Ich muss mal schauen, was bei Meta und Threads abgeht. Ob das jetzt so ein Ding ist oder nicht.

01:23:18.555 --> 01:23:21.615
Ich habe gehört, in Amerika ist schon so ein Ding. Bei uns nicht so ein Ding.

01:23:22.135 --> 01:23:25.735
Wir wollen ja mehr amerikanische Hörer haben, die Deutsch lernen,

01:23:25.735 --> 01:23:28.535
dank unseres Podcasts. Genau.

01:23:29.915 --> 01:23:35.935
Ja, das wäre doch mal eine Maßnahme. Genau, also alles, was Vanessa gerade gesagt hat.

01:23:37.035 --> 01:23:44.155
Und wir hören uns ansonsten nächste Woche wieder. Genau, eine schöne Woche. Ciao, ciao. Tschüss.

01:23:45.040 --> 01:24:07.920
Music.