 Hallo? Hallo? Jetzt. Okay. Also ich werde heute mal so ein bisschen was erzählen, was so ins CSS so, was wir so in der Zukunft erwarten können, was sich da getan hat in letzter Zeit oder auch schon ein bisschen länger her. Ja, fangen wir mal an. Wer bin ich? Also, ich bin Justin Jokowska, bin 23 Jahre alt, bin seit 2019 Web Entwickler bei WP Wartung 24 und stehe jetzt hier zum ersten Mal auf der Bühne. Es ist aber schon mein drittes Worldcamp als Teilnehmer. So, worum geht es denn heute? Also CSS entwickelt sich ständig weiter und wir hatten in den letzten Jahren auch so Dinge wie Flexbox und Crit. Also die haben schon sehr, sehr viele Sachen geändert und verbessert in Laufe der letzten Zeit. Und das sind nicht die einzigen Features. Es gibt immer wieder neue Features, das entwickelt sich ständig weiter und da haben wir nur das Problem. Die sind noch nicht immer alle direkt allgemein verfügbar, da muss man immer ein bisschen aufpassen. Das heißt denn allgemein nicht allgemein verfügbar. Es geht um die Browserunterstützung. CSS wird an den Browser geschickt und dort dann interpretiert und ausgewertet. Das führt leider dazu, dass natürlich je nach Browser oder auch Browser-Version Unterschiede sind in der Auswertung und des Renderings von den CSS Funktionen. Deswegen muss man da immer ein bisschen aufpassen, weil man da als Websitebetreiber ja wenig Einfluss drauf hat, welchen Browser oder welche Version denn die Nutzer der Website auch wirklich verwenden. Deswegen sollte man neue Features immer ein bisschen mit Bedacht einsetzen. Mit Bedacht heißt zum Beispiel hier unten, wie man schön sieht, gibt es so Crairies, mit denen man abfragen kann, ob ein Feature oder ein Selektor denn wirklich unterstützt wird, um im Notfall irgendwas anders zu machen. Und man sollte auch immer darauf achten, dass selbst ohne diese Features die Website trotzdem alle relevanten Daten beinhaltet und alles lesbar ist und nutzbar ist. So, gehen wir mal durch. Die Themen spreche ich heute an. Haben wir Calamix, Hess, Nesting, trigonometrische Funktionen, Container Craves und Subgrid. Legen wir direkt mal los. Calamix. Damit kann man jetzt schön in CSS nativ Farben michen. Das heißt, man hat hier diese schöne Funktion, gibt einen Color Space an, die beiden Farben, die gemischt werden sollen und jeweils auch den Prozentsatz den Anteil. Der ist optional, kann man aber auch hinzufügen. Hier unten sehen wir mal ein Beispiel und hier das Beispiel auch einmal mit der resultierenden Farbe. Wofür kann man das denn jetzt nutzen? Ganz simpel, man kann Farben abdunkeln oder aufhellen oder auch zum Beispiel komplette Farbpaletten anhand von ein oder zwei Akzentfarben erstellen und damit die Website designen. Wie man hier in diesem schönen Beispiel sieht, wenn wir jetzt Rot und Blau michen, sehen wir zwar pro Farbraum, macht es schon Unterschiede, aber es kommt alles bei allem so was raus, was man so jetzt im ersten Moment erwarten würde, wenn man Rot und Blau micht. Wenn man jetzt aber zum Beispiel mal Leim und Magentermicht, dann sieht man auch, dass zum Beispiel Farben entsättigt werden, weil sie sich dann gegenseitig aufheben. Und deswegen sieht man hier sehr deutlich, dass der Farbraum wirklich sehr große Unterschiede machen kann. Manchmal muss man dann ein bisschen ausprobieren, welcher Farbraum jetzt wirklich der Beste ist. Dafür habe ich hier oben einmal so ein Code Pen Beispiel hinterlegt. Dort kann man das dann mal ausprobieren, zwei Farben michen und mal gucken, wie die in den verschiedenen Farbräumen aussehen. Jetzt kommen wir nämlich zu einem Thema Unterstützung von Calamex. Hier habe ich einmal einen schönen Auszug aus der Website caniuse.com, die man da immer schön nutzen kann, um festzustellen, wie weit denn die Features auf den jeweiligen Browsern und Versionen verfügbar sind. Der Screenshot ist erstellt worden, wo ich die Folien erstellt habe, das ist jetzt circa ein Monat her. Deswegen ist es nicht mehr topaktuell, deswegen habe ich einmal hier schön den großen QR-Code, wo man immer den aktuellen Stand einmal nachprüfen kann. Das werden wir gleich noch häufiger haben. Aber man sieht jetzt zum Beispiel hier schön, dass es ist schon sehr viel grün da, das ist immer anhand des Usage. Also wie häufig die jeweiligen Browser und Versionen genutzt werden, umso größer sind die Anteile hier. Man sieht also, Calamex ist schon gut unterstützt, aber auch noch nicht wirklich so, dass man es bedenkenlos einsetzen kann. Gehen wir weiter, HS. Wer hat denn von euch schon mal was von HS gehört in CSS? Das ist ja schon mal ein guter Anteil. Also grundsätzlich kann man das schon fast als eine CSS-Revolution bezeichnen. Früher konnte man immer nur Elemente anhand deren Parent-Elementen oder früheren Geschwister-Elementen auswählen. Jetzt kann man den Spieß umdrehen und wie man hier schön sieht, in die andere Richtung gehen. Man kann einen Eltern-Element auswählen anhand der Kind-Elemente oder späteren Geschwister-Elemente. Dafür gibt es diesen schönen Selector-Has und dann darin der Selector, was da drin sein muss oder was danach kommen soll. Und hier unten haben wir mal so ein paar schöne Beispiele. Wir haben einmal als erstes zum Beispiel eine Sektion, in der eine H1 vorkommt. Eine H1 sollte ja noch einmal auf der Seite vorkommen, also wäre das wahrscheinlich dann so der Page Hero oder so. Dann haben wir einmal ein UL, in dem direkt ein L, äh, ein L.I. Enthuschild 3 ist. Bedeutet dann im Endeffekt ein UL, welches mindestens drei Kind-Elemente hat, weil es mindestens halt dieses dritte Element gibt. Das können wir aber noch weiter vertiefen, indem wir sagen mindestens drei, aber nicht mindestens vier. Das ist dann so viel heiß wie genau drei Elemente. Aber man kann auch zum Beispiel sagen, eine Sektion, auf die eine Sektion mit der Klasse Dark folgt. Wenn man zum Beispiel ein, irgendwie ein Design hat, wo dann jede Sektion immer unten drunter Abstand hat, dass man hier dann sagen kann, aber wenn danach eine dunkle Sektion folgt, dann bitte nicht. Wie sieht es denn da mit der Browser-Unterstützung aus? Ich würde sagen, ein bisschen ähnlich. Wir sehen nur hier, da haben wir leider ein kleines Problem, Firefox ist dann auch nicht so weit. Man hat unter bestimmten Bedingungen, bestimmten Flex, die man sitzen kann, kann man das auch aktivieren. Bisher ist aber noch in keiner offiziellen Version das wirklich sauber unterstützt, ohne dass man irgendetwas extra einstellen muss. Deswegen hier müssen wir uns leider noch ein bisschen mehr gedulden, aber ansonsten sieht es ja auch schon mal gar nicht so schlecht aus. Gehen wir direkt weiter. Nesting. Nesting kennen wir ja viele Prä-Prozessorungen, wie Sass oder Ähnliches, und es funktioniert jetzt in CSS ähnlich. Und man kann damit CSS, wie man es hier zum Beispiel mal als Beispiel hat, etwas übersichtlicher und modularer schreiben und zum Beispiel die Sachen direkt beieinanderschreiben. Hier zum Beispiel der Button, und wenn der Button Hover ist, das und sowas. Man sollte es vielleicht nicht übertreiben, also wir haben jetzt hier vier Ebenen, das geht vielleicht noch, aber wir werden gleich auch sehen in den Beispielen, dass wir auch noch viele Ebenen runtergehen können, aber man sollte immer so ein gesundes Mittelmaß finden, wie viel man denn jetzt wirklich runtergehen möchte. Ja, also man sieht dann hier, zum Beispiel hat man Section CTA, also die Section mit der Klasse CTA, und dann sagt man direkt in diesem Element, also man sieht hier, hier ist die öffnenden Klammer und hier unten die Schließende, und man sieht dann hier direkt, dass die Media-Cravity hier direkt sagt, ab der Breite die Minheit, und das steht direkt bei der Section und nicht irgendwo unten drunter in dem Media-Cravity oder ähnlichen, sondern man kann es direkt dahinschreiben und auch ohne den Selektor noch mal hinzuschreiben, und damit hat man das alles auch so ein bisschen mehr als ein Modul, weil wenn man das von hier bis hier oben betrachtet, sieht man ja, die Klammern gehören zusammen, und das ist ein Modul, ein Element, was man dann da hat mit den jeweiligen Elementen da drin. Ja, da haben wir dann zum Beispiel in der Section CTA direkt da drin ein Definner, oder hier haben wir das und muss man immer dazunehmen, wenn es ein Elementselektor oder Ähnliches ist, weil das die Engine, die dahinter läuft, nicht ganz erkennt, dass das dann jetzt da drin sein soll. Man kann das und aber im Prinzip immer verwenden als Zeichen dafür für den Selektor hier oben, also als Platzhalter in dem Sinne. Das heißt, man kann sich das hier vorstellen wie Section CTA, da drin Definner und da drin, bleibe ich da drin H2. Wir kommen aber gleich nochmal zu einem Beispiel, wo ich dann noch ein bisschen mehr dazu zeige. Wie sieht es denn hier mit der Unterstützung aus? Ich würde sagen ähnlich wie her ist, aber noch ein bisschen schlechter. Auch hier wieder leider Firefox hängen manchmal ein bisschen hinterher, aber hier können wir auch hoffen, dass das nicht mehr allzu lange dauert, damit man das auch direkt in CSS nutzen kann, nicht nur irgendwelche Prä-Prozessoren dafür braucht. Weiter, trigonometrische Funktionen. Damit gibt es so Sachen wie Sinus, Cosinus, Tangents und deren Umkehrfunktionen jetzt auch in CSS, kennen viele wahrscheinlich noch aus den Schulen, damit kann man zum Beispiel in einem Dreieck die verschiedenen Seitenlängen berechnen anhand der Winkel und Ähnlichem, oder mit den Umkehrfunktionen Winkel anhand der Längen. Wofür kann man das denn jetzt nutzen? Ganz simpel, zum Beispiel Positionierung auf einer Kreislinie. Wir sehen hier mal ein Beispiel, einen schönen Kreis. Da ist ja jeder Punkt immer im Prinzip auf der kompletten Linie außen drum, immer im Prinzip in einem Dreieck darstellbar, mit einer xy-Koordinate, dem Radius und dem Winkel. Hier unten sieht man dann zum Beispiel, der Radius hier wäre dann zum Beispiel 20-Pixel, der Winkel ist 30°, dann ist x der Radius mal der Cosinus von dem Winkel und y der Radius mal der Sinus von dem Winkel. Und so kann man dann im Prinzip in einem beliebigen Winkel die Elemente darauf positionieren und wie man das dann schön auch nutzen kann, das sehen wir dann auch später. Wie ist das denn unterstützt? Besser als der Rest würde ich sagen. Immer noch nicht, dass man sagen würde, man kann es einfach bedenkenlos verwenden, aber hier komme dem Ganzen, glaube ich, immer näher, dass man es wirklich auch nutzen kann. Gehen wir mal direkt weiter. Container Craves. Wer hat davon denn schon mal gehört? Also mit Container Craves kann man im Prinzip modular unabhängige Container machen. Man kennt ja die Media Craves und kann ja sagen, ab der Bildschirmbreite haben wir das und das Design oder die und die, das und das Layout. Das kann man jetzt mit Container Craves auch die Container sagen. Also ein Element, welches sich in einem äußeren Element befindet, welches die und die Breite hat, bekommt dann das und das Design. Man hat damit also im Prinzip Breakpoints je Segment. Man kann aber auch anhand geltender Bedingungen, wie zum Beispiel ist denn da, wo ich jetzt gerade bin, schon der Text kursiv. Wenn ja, mach mein EM bitte nicht mehr kursiv oder heb es anders hervor. So was kann man auch machen. Also es geht nicht nur um Größenverhältnisse, sondern auch um Design, um gesetzte CSS Sachen. Damit kann man sehr schön widerstandsfähige Designs machen. Also man kann ein Container für sich stylen, ein Element für sich stylen, dass es egal wo es verwendet wird, ob es jetzt im Main ist, ob es in der Sidebar, um Futter, egal wie breit der Container außen drum ist. Es passt immer vom Design automatisch, ohne dass man ganz viel noch rum basteln muss, damit es klappt. Und deswegen habe ich auch gesagt, widerstandsfähig, weil es kann nicht kaputt gehen, solange man es halt nicht, also solange man alles bedacht hat und alle Größen sauber funktionieren, dann ist es egal wo es verwendet wird, weil es funktioniert dann immer. Es funktioniert grob so, man kann sagen add container gibt den Namen an. Man muss den Container einmal sagen, dass er sich als Container für eine Container-Curry verhalten soll. Und da kann man einen Namen optional mit angeben, damit man besser referenzieren kann, welcher Container jetzt wirklich angesprochen werden soll. Und sagt dann halt die Condition wie zum Beispiel Minowitz oder Ähnliches. Aber da kommen wir auch später nochmal zu, wie man das dann wirklich in der Praxis verwendet. Aber was bringt das Ding jetzt überhaupt? Gucken wir uns mal dieses Beispiel an. Stellen wir uns mal vor, wir haben dieses Design auf Desktop. Und gehen wir kleiner, dann denken wir, ist ein bisschen eng hier, machen wir mal so ein Design. Jetzt machen wir nochmal ein bisschen kleiner, merken so, ja jetzt drei nebeneinander ist aber auch ein bisschen eng, machen wir mal zwei. Und gehen wieder zurück auf das Design, weil das Design da noch ein bisschen zu breit wirkt. Und dann denken wir, ja hier aber wieder das, damit es wieder zu klein für zwei breite Container, machen wir mal dann lieber so. Oder dann hier wieder so und auf ganz klein so. Für zu folgenden Media-Currys. Also im Prinzip haben wir jeweils hier jeder Fall stellt eine Media-Curry da. Wir haben dann natürlich fünf Breakpoints. Aber vielleicht fällt da ja was auf. Wir haben hier links das Bild, oben das Bild, links das Bild, oben das Bild, links das Bild, oben das Bild. Das ist ja ein wiederkehrendes Layout. Ja, das ist ja dann doof, wenn man das immer wieder wechseln muss, immer wieder umbauen muss. Oder mit Media-Currys rumspielen muss von wegen MinWits so und so, MaxWits so und so. Gibt es da nicht eine sauberere Lösung? Gucken wir uns mal an. Und die Spalten, rechnen wir das mal um. Wie viel haben wir denn an Breite pro Spalte? Fällt uns was auf. Links immer, wenn der Container über 400 Pixel bereit ist. Oben immer, wenn er da drunter ist. Also über 300 Pixel jetzt hier ein Beispiel. Und das kommt immer wieder. Gibt es da nicht eine schönere Lösung? Ja, Container-Currys. Wir haben einfach zwei Container-Currys für die Spalten. Wir gehen von drei auf zwei auf eine Spalte. Könnte man auch mit Media-Currys lösen. Warum wir jetzt hier auch Container-Currys nutzen, komme ich gleich zu. Aber der Hauptpunkt, das Element selber, ist eine Media-Curry und die gilt nur für das Element. Wir sagen bei dem Element, wenn es über 400 Pixel ist, Design links und der 400 Pixel Design oben. Container-Currys nutzen wir hier aber auch, damit, wenn das Element im Main genutzt wird, wollen wir zum Beispiel drei Spalten haben, wird es in der Sidebar genutzt, die ist ein bisschen schmaler, wollen wir eine Spalte haben. Wenn das Element in der Sidebar ist, weil gleich hat jemand eine Website, da ist plötzlich die Sidebar breiter oder schmaler oder so, das ist ja alles immer doof. Deswegen nutzen wir hier auch Container-Currys und können dadurch hier auch sagen, wenn der Container außen drum, also die Liste im Prinzip der Elemente, eine bestimmte Breite unterschreitet, dann geht es zweispaltig, noch kleiner, einspaltig. Da kommen wir aber gleich auch nochmal mit einem Beispiel zu. Wie ist das denn unterstützt? Ich würde schon sagen, sehr, sehr ordentlich. Wir müssen uns noch ein bisschen gedulden, aber ich glaube, das sollte nicht mehr allzu lange dauern. Dann können wir diese Sachen auch wirklich schön nutzen und wirklich schöne Widerstandsfähige Designs bauen, ohne dass wir ganz viele rumtricksen müssen und jeden möglichen Fall bedenken müssen. Sondern wir können jedes Element für sich alleine stylen. Kommen wir zum nächsten Thema, Subgrid. Wer hat denn da schon mal was von gehört? Das habe ich mir jetzt schon gedacht. Das Feature ist aber eigentlich gar nicht mehr so neu. Es ist eigentlich schon ziemlich lange da, hat nur noch kaum jemand was von gehört, weil die Prouder Unterstützung leider noch sehr, ja, nicht so prickelnd war, sagen wir es so. Was heißt das denn Subgrid? Man kann einem Element sagen, dass es die Reihen und oder Spalten des Elternelement-Crids nutzen soll. Wir haben hier einmal ein Beispiel. Wir haben hier einmal ein schönes Grid, und das wäre dann unser Kind-Element. Wir sagen hier zum Beispiel, nutze die Reihen und Spalten des Elternelement-Crids. Ich habe aber ja auch gesagt, oder? Das heißt, wir können auch sagen, nutze nur die Reihen des Elternelement-Crids und mach die Spalten anders. Aber was bringt das denn jetzt? Man könnte ja theoretisch dem Element auch hier einfach sagen, ja, wieder die Callums so und so und die Rows so und so. Weil dann kennt dieses Element nicht das Element. Und dieses Element nicht das Element und so weiter. Mit Subgrid kennen Sie sich schon. Mit Subgrid kennt jedes Element hier drin, auch jedes Element hier drin und dadurch auch jedes Element, welches in einem dieser Elemente ist, welches ebenfalls in einem Subgrid ist. Für dazu, dass wir zum Elternelement-Crit und in anderen Elementen des Elternelement-Crids auch Abhängigkeiten haben können. Da kommen wir gleich schön zum Beispiel zu, was das denn für einen ganz großen Vorteil bringt. Aber wie ich leider schon gesagt habe, Pauserunterschützung ist noch. Wir sehen hier Chrome. Jetzt kann ich aber eine bröhnliche Nachricht übermitteln. Hier unten fehlt noch Version 117 von Chrome. Der Screenshot ist, wie gesagt, ein Monat alt. Chrome hat jetzt die Version 117 veröffentlicht. In der ist Subgrid grün. In der ist Subgrid einfach unterstützt, ohne irgendeine Flag, ohne irgendetwas anderes. Das heißt, ich kann jetzt gleich auf meine Beispiele alle in Chrome zeigen und muss nicht zwischen Chrome und Firefox wechseln, nur für Subgrid. Aber trotzdem sehen wir ja immer noch, Unterstützung ist immer noch nicht so prickelt. Aber jetzt, wenn Chrome Assets auch unterstützt, habe ich die Hoffnung, dass das vielleicht jetzt endlich mal wirklich nutzbar wird. Jetzt kann man nämlich mal zu ein paar praktischen Beispielen. Ich habe da unten eine schöne kleine Kollektion auf CodePen verlinkt. Die habe ich dann mal dafür erstellt. Und zwar hier. Ich öffne die mal im Vollwind-Modus. Das ist die Kollektion. Da habe ich mal fünf Beispiele gemacht für jedes dieser Themen, die wir da jetzt gerade eben besprochen haben. Gehen wir mal durch Calamics. Wir sehen hier unten mal so ein beispielhaftes Website-Layout. Und wir sehen in unserem CSS hier oben einmal eine Akzentfarbe. Ich habe ein paar Farben gemixt. Und zwar einmal eine etwas dunklere Farbe, indem ich ein bisschen schwarz dazu gemischt habe, aber auch eine etwas hellere Farbe, wo ich ein bisschen weiß dazu gemischt habe. Und habe damit ein kleines Design gebraut hier. Hier die normale Farbe, also Akzentfarbe. Hier dann die dunklere Akzentfarbe. Hier auch die Havarfarben. Das habe ich dann alles so damit mal hinterlegt. Und auch hier Button Havarfarbe oder so. Und man kann jetzt hier mal einfach eine beliebige andere Farbe nehmen. Nehmen wir mal zum Beispiel Cream. Dann sieht man, passt sich alles direkt an. Wir sehen auch hier die Havarfarben. Werden alle automatisch berechnet, wie damit weiß und schwarz gemischt. Und das passiert alles dann automatisch, ohne dass man da noch ganz viele Sachen umrechnen muss, irgendwelche anderen Farben überlegen muss. Und damit kann man halt nicht nur, wie hier, schwarz und weiß mit reinmischen, sondern theoretisch auch eine beliebige andere Farbe. Ich weiß jetzt nicht, wie gut das aussieht. Okay, man sieht es relativ wenig. Nehmen wir mal hier 50 50. Dann sieht man es vielleicht ein bisschen mehr. Der Beamer hat nicht den besten Kontrast, aber vielleicht kann man es erkennen, hier rechts unten. Oder auch, wenn man hier drüber hauert, dass die Farbe jetzt halt gemischt ist mit Rot. Und so kann man zum Beispiel auch komplette Farbpaletten erstellen anhand einer oder mehreren Akzentfarben und damit das komplette Website-Design sehr von der Farbe her beliebig anpassbar mit einem Farbwert oder mehreren Farbwerten kurz tauschen und fertig. Dann haben wir mal das Beispiel für haes. Ich habe hier mal eine kleine HTML-Tabelle gemacht und sowas, wie man es klassischerweise kennt, so ein Rating, wenn man so bei WooCommerce oder so ein Produkt bewerten möchte. Jetzt haben wir hier zum Beispiel eine Tabelle. Jetzt haben wir da zwei Zeilen. Das ist schon mal ein ganz einfaches Design. Was ist denn aber jetzt, wenn man da mehr Zeilen dabei hat? Dann sieht es irgendwann ein bisschen unübersichtlich aus, wenn da keine Trennung zwischen den Zeilen ist. Deswegen habe ich immer Folgendes eingebaut. Wir kommentieren mal gerade ein paar Zeilen wieder ein und sehen, war noch nichts. Warum aktualisierte nicht? Wir hatten jetzt eben extra ein Flugmodus ausgemacht, damit nicht irgendetwas stört. So, da haben wir mal neu, vielleicht klappt es dann. So, nehmen wir es jetzt mal weg. Jetzt sehen wir es. Da habe ich dann zum Beispiel eingebaut, dass er dann bitte immer so ein wechselndes Layout verwendet, damit man die Zeilen besser erkennt und nicht in der Zeile verrutscht. Und zwar, indem ich einfach gesagt habe, wenn dann der Buddy von der Tabelle mindestens ein Entschalt 5 hat, also ein fünftes Kind-Element, dann Stile bitte darin, das geht nämlich auch. Ihr könnt nicht nur dann das Über-Element steilen, sondern auch das Über-Element selektieren, aber darin dann wieder was anderes selektieren. Und zwar darin dann jede Reihe, jede Ivenreihe dann einmal auswählen und die Farbe Leitblu hinterlegen. Was man aber auch zum Beispiel damit tun kann, dafür haben wir unser Sternbeispiel hier unten. Jetzt ist es zum Beispiel nichts ausgewählt. Jetzt gucken wir mal, jetzt haben wir mal hier über den zweiten Stern. Jetzt sehen wir, der erste Stern wird mit ausgewählt. Über den dritten, die ersten beiden mit vierte und so weiter. So was kann man schön machen. Das konnte man vorher zum Beispiel auch tricksen, indem man die Reihenfolge umgedreht hat und die Elemente danach angesprochen hat. Aber jetzt kann man das einfach machen, ohne zu tricksen. Man kann sogar noch Folgendes machen. Stellen wir uns mal vor, also hier noch mal kurz, hellblau ist es, wenn nichts ausgewählt ist. Wenn man was ausgewählt hat, habe ich jetzt mal draufgedrückt und wir wollen jetzt mal Sterne wegnehmen. Dann sieht es so aus. Man hat zum Beispiel grau. Es ging dann vorher nicht, weil vorher hat man dann das ja umgedreht, damit man die Elemente danach ansprechen kann. Jetzt kann man halt in beide Richtungen einfach die Sachen ansprechen. Wenn ich hier ausgewählt habe, sieht man, die anderen Sterne sind wieder blau, können wir da in dem Sinne dazu ausgewählt werden. Wie habe ich das denn gesetzt? Wir sagen im Prinzip, das Label, wenn es entweder gehabert wird, oder es danach ein Label gibt, auf welches gehabert wird. Dann mache das bitte in dem dunklen Blau. Oder wenn es ein gechecktes Label gibt, also ein schon ausgewählter Stern, oder es danach ein Label gibt, welches schon ausgewählt ist. Und genauso für den Rückweg können wir sagen, wenn man havert, dann spricht man danach alle Elemente an, die entweder ausgewählt sind oder danach ein ausgewähltes Elemente haben. So, gehen wir weiter. Trigonometrische Funktionen. Dann kann man nämlich sowas machen. Einfach ein Element, also beziehungsweise Elemente in einer, ich kann mal hier noch Vollbeck wieder anmachen, auf einer Kreislinie positionieren. Da habe ich dann mal sowas beispielhaft hier gebaut, so ein kleiner Art Menü, was man auch hier auf und zu klappen kann. Und da berechne ich halt die jeweiligen Positionen, alle, indem ich halt die Sinus- und Cozynus-Funktion nutze. Wie man hier sieht, habe ich teilweise auch HES verwendet, um anzugeben, wie viele Kind-Elemente wir haben. Das ist dafür da, wenn wir zum Beispiel mal zwei Elemente wegnehmen, dass es sich automatisch berechnet, wie soll es denn jetzt aussehendern, und zwar dann anders positioniert, andere Winkel, weil er die alle gleichmäßig verteilt. Aber was ist denn hier die Magie hinter? Also wir haben hier oben einmal den Radius hinterlegt. Und haben dann hier unten, wo wir dann zu den jeweiligen Elementen kommen, ein Winkel, und zwar den berechnen wir halt indem wir sagen, das Kind-Element, also die jeweilige Nummer des Kind-Elements minus 1, damit vorbei 0 anfangen zu zählen, mal halt der Radius, bzw. der Winkel, der je Element zur Verfügung steht. Also 360 Grad durch die Anzahl der Kinder. Und dann rechnen wir nämlich aus. Top ist zum Beispiel 50% minus der Radius Malekosinus von dem Winkel. Und hier, left ist 50% plus der Radius Malinsinus von dem Winkel. Und so sind die Elemente dann alle schön auf der Kreislinie positioniert und werden automatisch berechnet in Anhand der Kind-Elemente und auf der Winkel. So, weiter, Subcrit. So hat man früher dann ein Crit gehabt. Das sieht natürlich nicht so prickelnd aus. Was man jetzt tun konnte, schon mit Margin-Top-Auto zum Beispiel, oder ähnlichen, den Read More-Button ganz nach unten bringen, damit das wenigstens ein bisschen einheitlicher aussieht. Die Linie war aber dann weiterhin nicht auf einer Höhe, weil die Headings immer unterschiedliche Höhe hatten. Und man kann jetzt nicht eine Abhängigkeit zwischen der Heading, dem Heading und hier der machen, weil die kennen sich nicht untereinander. Die sind alle separat in einem einzelnen Crit oder in einem einzelnen Flex-Container. Das ist natürlich doof. Mit Subcrit, da habe ich hier mal etwas gemacht, was man dann einfach ein kommentieren kann, das baut das um mit einem Subcrit. Und jetzt sehen wir, dass diese Heading, diese Überschrift kennt und diese, und die deswegen alle diese Höhe haben, weil sie sich alle in dem jeweiligen Subcrit befinden. Wir haben einfach gesagt, rein sind bitte das Subcrit, also vom übergeordneten Crit, und erstrecke dich bitte über drei rein. So eine Reihe für Heading, eine für den Auszug, eine für den Button. Und schon sind die alle, kennen die sich untereinander und alles wird sauber positioniert. Und man hat ein gleichmäßiges Design ohne irgendwas zu tricksen. Und die kennen sich schön untereinander. Dann kommen wir zum letzten Beispiel. Dann sind wir jetzt gleich auch durch. Und zwar Container Craves und Nesting, die habe ich jetzt mal zusammengepackt. Und zwar hier haben wir nämlich das besagte Beispiel mit schönen drei Sachen nebeneinander und rechts sind es haltbar. Jetzt sehen wir hier natürlich, das ist das breite Design, weil wir da mehr Platz haben, aber nicht genug Platz haben für zwei Elemente, die haben wir genug Platz für drei Elemente, aber jeweils nicht so viel, dass wir da die breiten Elemente nehmen können. Wir haben aber, wenn wir jetzt mal ein bisschen kleiner gehen, sehen wir, dass der Gleich von alleine, nehmen wir mal hier den Punkt, umspringt, dass die beiden linken Spalten, also das drei linken Spalten, zu klein sind für drei Spalten, er springt auf zwei Spalten um und dann hat jede einzelne Spalte wieder genug Platz, um das breite Design nehmen zu können. Und gehen wir noch ein bisschen weiter, jetzt ist der Platz wieder weg, jetzt haben wir das andere Design, das für kleinere. Sehen wir jetzt hier plötzlich auch rechts, weil er jetzt rechts da auch zu wenig Platz hat. Das geht dann immer so weiter. Hier haben wir dann jetzt links wieder zu wenig Platz für zwei Spalten, gehen auf eine Spalte, haben aber wieder zu viel Platz für das große Design und haben deswegen dieses Design. Das geht dann auch noch mal ein bisschen weiter, bis das dann gleich die Sidebar unten drunter springt und die Sidebar unten drunter springt. Deswegen hat das Main jetzt wieder zwei Spalten und die Sidebar ist jetzt unten drunter und hat dann da unten drunter auch die Spalten. Und jetzt haben wir zu wenig Platz für zwei, wieder nur eine und so weiter. Dann müssen wir gerade noch ganz kurz durchgehen, einmal schnell, wie es funktioniert. Hier unten haben wir die Container Craves, also die Liste, die hat hier, also jedes Element, dem geben wir nämlich Container der Name PostListItem und sagen, es soll sich auf die Inline Size beziehen und hier oben drüber haben wir die PostList, also außer äußeres Element, auch wieder Inline Size und die Referenzieren wir dann hier unten mit den Container Craves, dass wir sagen, wenn das Item, also dass die jeweilige Spalte unter 400 Pixel fällt, mache bitte Display Flex so und so, Width so und so oder hier, wenn die komplette Liste unter so und so breite Feld, dreispaltig, unter so und so breite, zweispaltig, unter so und so einspaltig. Und dann habe ich das Gleiche noch einmal genommen und mal hier unten als Beispiel fürs Nesting hinzugefügt, wie das dann so aussieht, dafür mache ich immer kurz groß. Und dann sehen wir hier zum Beispiel den Kram, oben können wir mal ignorieren, das hier ist der spannende PostList, hat alle Sachen von der PostList, dann sagen wir da drin, dass UL, so bitte Display Crit und so haben, dieses UL soll aber bei Container Craves PostList so und so, die und die Breite haben, die und die Spalten haben und so weiter, das kann man dann hier schön hinterlegen und alles als ein Modul im Prinzip haben. Wie gesagt, hier habe ich nämlich jetzt extra mal etwas übertrieben mit dem Nesting, ob man das so machen sollte, so übertreiben sollte es eben selber überlassen, aber man sollte ein gesundes Mittelmaß finden. So, dann gehen wir mal wieder hin. Kleines Fazit noch, wir haben diverse vielversprechende Features, die noch so in der Pipeline sind, die sind alle noch nicht wirklich so komplett gut unterstützt und es wird auch noch ein bisschen dauern, wir müssen uns noch etwas gedulden, aber ich glaube, ich kann im Sinne von uns allen sprechen, das Warten wird glaube ich belohnt werden. Ich glaube, das sind schon Features, die uns sehr viele weiterhelfen werden, sehr viele Möglichkeiten bieten und auch sehr viele Dinge einfach vereinfachen werden. So, ich möchte mich dann herzlich bedanken fürs Zuhören und würde mal sagen, gibt es denn irgendwelche Ideen oder auch Fragen, was man mit diesen Sachen anstellen kann oder wie man die nutzen kann? Dafür gebe ich einmal das Wort an den Moderator.