WEBVTT

00:00:00.297 --> 00:00:05.857
Ich glaube, wir müssen uns unbedingt erklären, was das ist. Wir sind hier von 2020 40 Prozent never heard of it

00:00:05.897 --> 00:00:09.017
auf 2023 knappe 70 Prozent never heard of it.

00:00:09.057 --> 00:00:11.017
Oh, das stimmt. Großartig.

00:00:11.270 --> 00:00:14.597
Ja, das müssen wir natürlich ändern.

00:00:14.970 --> 00:00:23.477
Content Visibility ist einfach eine Möglichkeit, Content im HTML als lazy zu rendern, zu markieren.

00:00:23.517 --> 00:00:26.677
Content Visibility Autostate Change?

00:00:27.465 --> 00:00:33.877
Oh, das kannte ich noch gar nicht. Ja, das feuert halt eben, wenn auf dem Ding Content Visibility Auto ist und wenn es halt

00:00:33.877 --> 00:00:35.937
eben entweder anfängt zu rendern oder aufhört zu rendern.

00:00:36.207 --> 00:00:45.517
Kennst du das auch? Du willst mit einer neuen Technologie starten, aber das Internet ist zu

00:00:45.517 --> 00:00:51.317
voll mit wirrem Content in verschiedenster Qualität? Du suchst kompaktes Wissen,

00:00:51.317 --> 00:00:56.757
was dich direkt produktiv macht. Mit echter Erfahrung von Experten und Expertinnen,

00:00:56.757 --> 00:01:03.237
die für deine akuten Fragestellungen da sind? Dann solltest du mal im TrainerInnen-Netzwerk

00:01:03.237 --> 00:01:09.837
von Workshops.de vorbeischauen. Hier findest du eine Community aus über 80 TrainerInnen,

00:01:10.334 --> 00:01:14.997
welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden,

00:01:15.610 --> 00:01:20.507
um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen. Es gibt.

00:01:21.857 --> 00:01:26.475
Sowohl Intensivschulungen über mehrere Tage als auch Masterclasses,

00:01:26.808 --> 00:01:29.221
welche dich über einige Monate unterstützen.

00:01:31.634 --> 00:01:36.027
Bist du auf der Suche nach einer qualitativen Weiterbildung im Bereich Webentwicklung?

00:01:36.882 --> 00:01:39.736
Oder möchtest du dich selbst als TrainerIn einbringen?

00:01:40.447 --> 00:01:43.093
Dann bist du bei workshops.de genau richtig.

00:01:44.048 --> 00:01:51.096
Schau einfach mal vorbei für alle Informationen. workshops.de Wir freuen uns auf Dich!

00:01:56.560 --> 00:02:22.640
Music.

00:02:23.640 --> 00:02:30.553
Herzlich willkommen zur Revision 588. Heute sind an Bord die Vanessa. Hallo.

00:02:31.139 --> 00:02:32.690
Der Peter. Moin, moin.

00:02:33.488 --> 00:02:43.670
Und ich bin der Shep. Und wir werden uns heute mal den vor ein paar Wochen herausgekommenen State of CSS anschauen.

00:02:44.336 --> 00:02:47.685
Auch wenn wir mit dem State of HTML ja noch gar nicht durch sind,

00:02:47.748 --> 00:02:52.690
machen wir jetzt mal eine kleine Pause und schauen da mal in die Themen rein

00:02:52.690 --> 00:02:56.939
haben uns noch ein paar Sachen rausgepickt, also werden da nicht komplett durchgehen,

00:02:57.090 --> 00:03:02.088
und ein bisschen unsere Gedanken zu bestimmten Dingen kundtun.

00:03:04.090 --> 00:03:09.490
Also, vielleicht können wir noch vorab sagen, dass es wieder sehr cool ist,

00:03:09.490 --> 00:03:17.185
dass wir da als Ressource, als Podcast, auch direkt zur Auswahl standen, das war cool.

00:03:17.290 --> 00:03:22.659
Und 37 von euch haben das auch angehakt. Sehr cool. Vielen Dank.

00:03:22.890 --> 00:03:26.890
Ich weiß gar nicht, wie das letztes Jahr war, was das für eine Zahl war,

00:03:26.890 --> 00:03:28.483
aber bestimmt ist es jetzt gestiegen.

00:03:29.086 --> 00:03:32.890
Waren wir letztes Mal auch schon eine vorauswählbare Option, oder waren wir noch

00:03:32.890 --> 00:03:34.890
ein Freitextfeld? Nee, letztes Mal waren wir auch schon drin.

00:03:34.890 --> 00:03:40.890
Aber nur bei dem Set of CSS, nicht bei dem Set of JS. Also ich weiß jetzt gar nicht, wie

00:03:40.890 --> 00:03:46.848
das überhaupt zustande kommt, also nach welchem Kriterium das dann da reinwandert.

00:03:47.244 --> 00:03:48.351
I don't know.

00:03:49.575 --> 00:03:54.250
Und wir haben gedacht, genau, wir konzentrieren uns einfach mal vornehmlich auf Features.

00:03:54.250 --> 00:04:02.490
Es gibt ja Demographics, also wo kommen die Leute her, die beantwortet haben und in welchem Land ist vielleicht irgendein Feature besonders angesagt.

00:04:02.490 --> 00:04:09.668
Und dann gibt es Frameworks und CSS in JS. Genau, aber die wollen wir so ein bisschen ausklammern, glaube ich.

00:04:10.848 --> 00:04:16.650
Das ist zumindest der Plan. Wir starten einfach mal chronologisch in den Features.

00:04:16.650 --> 00:04:20.714
Und da haben wir als erstes Subgrid drinstehen.

00:04:21.893 --> 00:04:25.260
Und da wäre meine Frage an euch, habt ihr Subgrid schon mal benutzt?

00:04:26.458 --> 00:04:29.437
Äh, ich gucke jetzt auf Can I Use, ob ich das schon mal benutzt habe.

00:04:30.149 --> 00:04:33.227
Baseline not widely supported.

00:04:33.371 --> 00:04:37.150
Hm, wahrscheinlich hab ich das dann nicht benutzt, weil ich nämlich gesehen habe,

00:04:37.150 --> 00:04:39.502
oh, das läuft ja irgendwie in relevanten Browsern nicht.

00:04:40.258 --> 00:04:47.379
Na, aber kann ja sein, dass du als alter Forscher und Firefox-Benutzer vor allem,

00:04:48.441 --> 00:04:51.890
dass du dann Subgrid damit schon mal gespielt hast oder so?

00:04:51.950 --> 00:04:52.519
Ja, ja.

00:04:53.010 --> 00:04:59.190
Das Ding ist halt eben, was gibt's da zu forschen? Also, ich meine, Subgrid ist ja irgendwie relativ sinnvoll

00:04:59.250 --> 00:05:01.521
und relativ offensichtlich, dass man das braucht.

00:05:01.999 --> 00:05:04.780
Mhm. Aber wofür braucht man das denn? Sollen wir das noch mal erzählen?

00:05:05.650 --> 00:05:06.680
Klar, wenn du es kannst.

00:05:08.003 --> 00:05:15.533
Also ja, also im Grunde geht es darum, dass du ja Dinge in einem Grid nur anordnen kannst,

00:05:15.533 --> 00:05:21.371
wenn diese Dinge die direkten Kind-Elemente von einem Display-Grid-Container sind.

00:05:22.299 --> 00:05:29.933
Du kannst dir behelfen, indem du halt irgendwelche Zwischenelemente per Display-Content sozusagen

00:05:29.933 --> 00:05:34.973
im Render-Tree, aus dem Render-Tree rausnimmst und damit drücken dann deren Kinder sozusagen

00:05:34.973 --> 00:05:43.653
als direkte Kinder des Containers nach oben, aber was du eigentlich lieber willst, ist es quasi so,

00:05:43.653 --> 00:05:48.373
dass du ein Grit aufspannst und sagen kannst, das soll sich bitte jetzt nach unten durchvererben,

00:05:48.373 --> 00:05:54.493
dass du also quasi auch die Kind Elemente auf Display Grit stellen kannst und sagen kannst.

00:05:55.904 --> 00:06:03.093
Die Columns und Rows, die übernimmst du bitte einfach von dem Ober-Guru-Grit-Layout

00:06:03.403 --> 00:06:06.815
und legst jetzt keine neuen an auf deiner Ebene.

00:06:07.211 --> 00:06:11.853
Genau, also ich hab irgendwie ein Layout mit vier Spalten, dann stelle ich da eine Box rein, die über zwei Spalten geht,

00:06:11.853 --> 00:06:17.591
sag bei dir, es hat Grid am Start, das heißt, bei der Box, die über zwei Spalten geht, sind auch selber zwei Spalten am Start.

00:06:18.374 --> 00:06:24.853
Genau, und die sind auch in Sync eben mit den anderen Elementen,

00:06:24.853 --> 00:06:27.646
die ja eigentlich eine Ebene drüber sind, sozusagen.

00:06:27.988 --> 00:06:30.853
Und das ist ja eigentlich wirklich die Umsetzung des, sagen wir mal,

00:06:31.076 --> 00:06:34.413
Layout-Gedankens im Sinne eines Grids, wie es ja eigentlich gedacht ist. Also,

00:06:35.093 --> 00:06:39.124
konzeptionell, wenn du jetzt sagst, ich designe jetzt hier mir ein Grid, dann ist ja nicht vorgesehen, dass durch,

00:06:40.168 --> 00:06:46.533
einfach nur den Umstand, dass da zufälligerweise ein paar verschachtelnde Diffs dazwischen grätschen, dass dann plötzlich deaktiviert wird. Ein Grid ist ja mehr so eine Aussage,

00:06:47.091 --> 00:06:52.613
das gilt hier jetzt und sozusagen, dass da irgendwie ein vom Master-Grid abweichendes,

00:06:53.276 --> 00:06:55.643
sonstiges Grid am Start, das sollte ja eher der Ausnahmefall sein.

00:06:57.813 --> 00:07:03.627
Ja, ich weiß auch, dass das damals schon, also die Rachel Andrews, die war da irgendwie schwer hinterher.

00:07:03.667 --> 00:07:09.327
Und die ist vielleicht auch so die Vordenkerin, was so das ganze Subgrid-Thema angeht.

00:07:09.367 --> 00:07:13.327
Die wollte damals schon oder hat irgendwie hart dafür bekämpft,

00:07:13.367 --> 00:07:18.667
dass Subgrid schon in die ursprüngliche Grid-Spezifikation hineinwandert.

00:07:18.707 --> 00:07:25.827
Aber dann hat man sich eben darauf geeinigt, das zu separieren, einfach damit man nicht zu lange festhängt

00:07:25.827 --> 00:07:27.827
und erstmal was shippen kann.

00:07:27.827 --> 00:07:33.255
Und wie wir sehen, also ich meine, 2017, glaube ich, haben alle Browser Grids,

00:07:33.827 --> 00:07:37.827
so innerhalb von, weiß ich nicht, zwei Monaten oder so freigeschaltet.

00:07:37.827 --> 00:07:45.827
Und jetzt sind halt sechs Jahre vergangen seitdem, bis jetzt auch Subgrid in die Browser kommt. Also es, glaube ich,

00:07:45.827 --> 00:07:49.827
ist ja noch nicht, aber soll ja dieses Jahr kommen, ist auch Teil dieser,

00:07:50.665 --> 00:07:53.744
Interop 2023 Liste.

00:07:54.140 --> 00:07:59.987
Also der Dinge, die eben, wo alle Browser gesagt haben, wir einigen uns darauf, dass wir daran dieses Jahr arbeiten

00:07:59.987 --> 00:08:02.089
und das idealerweise dieses Jahr fertigkriegen.

00:08:02.899 --> 00:08:08.387
Ja, aber noch ist es halt eben hinterflex oder noch nicht da.

00:08:08.387 --> 00:08:11.387
Und deswegen hab ich damit noch nicht wirklich viel rumgespielt.

00:08:11.387 --> 00:08:15.387
Und wahrscheinlich wird das eins von den Features werden, das so, sagen wir mal, eher unspektakulär wird,

00:08:15.387 --> 00:08:17.663
wenn's denn da ist, weil plötzlich geht's.

00:08:18.014 --> 00:08:20.547
Man kann eine ganze Reihe von Hacks und Workarounds ad acta legen,

00:08:20.547 --> 00:08:21.921
und die Welt ist ein bisschen besser geworden.

00:08:23.001 --> 00:08:28.851
Ja, genau. Nächstes Ding, das wir hier auf der Liste haben, wären Logical Properties.

00:08:28.891 --> 00:08:32.351
Die sind jetzt nicht so neu, aber sind ja schon lange supported.

00:08:32.391 --> 00:08:37.851
Die Frage wäre, ob die schon den Weg sozusagen in eure Muzzle Memory gefunden haben.

00:08:38.449 --> 00:08:44.851
Oder ob ihr noch eher so sozusagen bei Top-Right, Bottom-Left festhängt.

00:08:45.093 --> 00:08:47.118
Jupp. Letzteres, also quasi, ja.

00:08:47.471 --> 00:08:49.387
Letzteres. Ja, 100 Pro.

00:08:49.999 --> 00:08:55.351
Ja. Ich schreibe jetzt zwar keinen clear fix mehr heutzutage,

00:08:55.351 --> 00:09:01.311
aber obwohl ich wusste, dass die da sind, und ich glaube, man kann sie ja sogar schon verwenden,

00:09:01.311 --> 00:09:04.751
sind sie definitiv noch nicht im muscle memory.

00:09:05.258 --> 00:09:10.351
Aber bei Savvy habt ihr da irgendwie, müsst ihr da lokalisieren in verschiedenen,

00:09:10.351 --> 00:09:14.071
also irgendwie in nicht westliche Sprachen?

00:09:14.440 --> 00:09:15.124
Also, nee.

00:09:16.655 --> 00:09:24.037
Und da haben wir ganz klaren Kunden-Cut, was wir aufnehmen können,

00:09:24.460 --> 00:09:27.890
damit wir das dann auch qualitativ liefern können, ja.

00:09:28.205 --> 00:09:34.071
Ja, also bei mir ist es so, ich bin tendenziell immer so ein bisschen konservativer,

00:09:34.071 --> 00:09:36.028
also so ein bisschen nach dem Motto,

00:09:36.550 --> 00:09:42.071
da, also ich kann ja damit mehr Browser bedienen, wenn ich eben bei der alten Notation bleibe,

00:09:42.071 --> 00:09:50.071
als wenn ich auf Logical Properties wechsle, also da fallen halt eher einfach so Browser hinten über.

00:09:50.071 --> 00:09:54.071
Ob die relevant sind oder nicht, ist dann erstmal egal. Ich denke halt immer so,

00:09:54.536 --> 00:09:56.859
wenn ich mehr mitnehmen kann, nehme ich halt mehr Browser mit.

00:09:57.102 --> 00:10:02.071
Und ich benutze es dann eher, wenn ich irgendwie Shorthands habe, die ich woanders nicht habe.

00:10:02.071 --> 00:10:05.627
So was wie MarginInline ist dann schon mal ganz cool oder MarginBlock.

00:10:06.788 --> 00:10:10.569
Dann ist aber, irgendwann mal bin ich auf dieses Thema gestoßen,

00:10:11.190 --> 00:10:15.998
dass User ja auch über Google Translate eine Seite automatisch übersetzen lassen können.

00:10:16.790 --> 00:10:23.378
Mhm. Was, ich glaube, viele tun durchaus. Genau, das habe ich nämlich bei uns im Projekt festgestellt,

00:10:23.378 --> 00:10:26.378
weil wir Content Security Policy da implementiert haben.

00:10:26.378 --> 00:10:31.094
Und dann, das ist ja ein sehr langwieriger Prozess, und dann machst du ja erst mal nur so ein Reporting an,

00:10:31.878 --> 00:10:36.694
um zu gucken, was denn überhaupt alles so an potentiellen Violations passiert.

00:10:37.468 --> 00:10:41.878
Und wenn du halt so eine Browser-Extension hast mit einem Übersetzungstool,

00:10:41.878 --> 00:10:45.378
dann injekten die halt Skripte in die Seite.

00:10:45.642 --> 00:10:50.134
Und dann merkst du so, oh, es sind aber schon einige, die sowas benutzen.

00:10:50.378 --> 00:10:55.878
Und da ist eben die Frage, ob man Logical Properties nutzen sollte.

00:10:56.481 --> 00:11:01.378
Einfach, also auch wenn man selber vielleicht diese fremden Sprachen nicht shippt,

00:11:01.378 --> 00:11:03.378
diese Lokalisierung nicht shippt,

00:11:03.575 --> 00:11:07.598
aber ums eben Menschen, also aus Barrierefreiheitsgründen im Endeffekt,

00:11:07.598 --> 00:11:15.233
also Menschen, die vielleicht das auf Arabisch übersetzen, dass für die das Layout eben auch funktioniert.

00:11:15.629 --> 00:11:21.838
Aber das ist jetzt so, ich weiß nicht genau, wie diese Übersetzungstools arbeiten und ob das hilfreich ist

00:11:21.838 --> 00:11:24.838
oder ob das jetzt irgendwie einfach nur eine These von mir ist.

00:11:25.387 --> 00:11:28.998
Mehr und umgekehrt natürlich auch die Frage, ob diejenigen, die diese Übersetzungstools benutzen,

00:11:28.998 --> 00:11:34.838
nicht sozusagen mit der Erwartung daran gehen, dass das, was da rauskommt, ja eh suboptimal ist.

00:11:34.878 --> 00:11:38.035
Einerseits von der Übersetzung, weil Maschine automatisch, und andererseits ...

00:11:39.242 --> 00:11:42.838
Also, wenn du so was machst, machst du das meistens nicht zum ersten Mal,

00:11:42.878 --> 00:11:46.558
und dann weißt du, okay, das läuft vom Layout anders als üblicherweise,

00:11:46.598 --> 00:11:50.927
aber es ist okay, weil ich benutze bewusst einen Workaround und kann mich damit abfinden.

00:11:51.378 --> 00:11:57.218
Ja, also, schwer zu sagen, weiß ich nicht. Also, wenn dann Hörerinnen und Hörer wissen, wie es damit aussieht,

00:11:57.258 --> 00:12:01.414
ob das in solchen Fällen hilft oder nicht, dann gerne Bescheid sagen.

00:12:01.882 --> 00:12:04.070
Würde mich mal interessieren. Genau.

00:12:05.825 --> 00:12:12.055
Ansonsten gibt's ja die Logical Properties schon lange. Es gibt sie für fast alles, nicht ganz für alles.

00:12:12.095 --> 00:12:15.179
Also, so ein paar Sachen sind da irgendwie noch ausgenommen.

00:12:15.530 --> 00:12:18.978
Bei manchen macht's auch keinen Sinn, glaub ich.

00:12:19.707 --> 00:12:25.135
Genau, es gibt aber noch irgendwie Properties, die könnten's vertragen.

00:12:26.603 --> 00:12:29.595
Es ist ja wahrscheinlich mehr so einfach ein neues Paradigma.

00:12:29.635 --> 00:12:34.498
Insofern braucht man alles, was in dieses Ding reingeht, was nicht left, right, top, bottom ist.

00:12:34.813 --> 00:12:37.955
Da musst du halt eben sozusagen das Vokabular so ausformulieren,

00:12:37.955 --> 00:12:42.515
dass du wirklich deine Konzeption von links und rechts komplett hinten überfallen lassen kannst,

00:12:42.515 --> 00:12:45.399
auch wenn's de facto nie passieren wird, dass du das halt brauchst.

00:12:45.669 --> 00:12:46.408
Ernsthaft.

00:12:47.209 --> 00:12:51.515
Ja. Ja, aber es gibt halt so Overflow X, Overflow Y,

00:12:51.515 --> 00:12:55.515
so da sind die, so braucht man da Logical Properties oder nicht,

00:12:55.515 --> 00:13:00.361
was mit Translate X und Y und so Zeugs, also, so, ähm.

00:13:02.324 --> 00:13:06.330
Ist halt schwierig, das nachträglich irgendwie noch reinzuziehen, sowas überall.

00:13:06.708 --> 00:13:11.110
Ja, das stimmt, aber, mei, kannste ja machen, dann einfach den alten Kram vergessen.

00:13:13.828 --> 00:13:21.515
Ich hab jetzt hier gerade die Kommentare noch angeschaut. Also da, ich mein, das sind jetzt natürlich Internet-Kommentare, da kommt jetzt alles Mögliche.

00:13:22.003 --> 00:13:28.515
Aber was ich jetzt hier lesen kann, ist einerseits, es gibt anscheinend jetzt keine guten oder nicht genügend Shorthands.

00:13:28.515 --> 00:13:31.115
Oder auch, dass es schon Sachen gibt,

00:13:31.155 --> 00:13:34.915
die will man eigentlich dann doch nicht an der Text Direction ausrichten,

00:13:34.955 --> 00:13:38.819
wie SVG, Grafiken und Filter.

00:13:39.026 --> 00:13:46.915
Aber die meisten Kommentare, die ich jetzt doch überfliege, ist dieses Nee, einfach immer total vergessen,

00:13:46.955 --> 00:13:50.396
dass es keinen Switch gemacht, das Team nicht umtrainieren wollen.

00:13:51.089 --> 00:13:56.915
Eher solche Gründe. Ich kann mir vorstellen, dass es vielleicht auch Post-CSS-Plugins gibt,

00:13:56.976 --> 00:13:58.768
Gibt die das dann für einen übernehmen?

00:13:59.200 --> 00:14:01.072
Laut den Kommentaren, ja. Ja.

00:14:01.775 --> 00:14:05.355
Wir sagen jetzt alle ja, weil da war ein Kommentar, das das gesagt hat,

00:14:05.395 --> 00:14:07.842
und wir interpretieren das so, und auf jeden Fall.

00:14:08.265 --> 00:14:13.216
Ja, aber im Grunde ist das ja wirklich Doofarbeit, ne? Also, nur ...

00:14:13.784 --> 00:14:16.682
Vielleicht gibt's halt wirklich Stellen, wo man das dann tatsächlich mal nicht möchte.

00:14:17.915 --> 00:14:22.291
Und die würden dann wahrscheinlich hinten überfallen durch so einen Automatismus.

00:14:23.056 --> 00:14:29.435
Hm, ja. Den Kommentar, das Kommentar, egal, den ich jetzt hier am liebsten mage, ist

00:14:29.435 --> 00:14:32.670
I have used it, but to be honest, it did go well.

00:14:33.129 --> 00:14:37.333
Ja, dann?

00:14:38.108 --> 00:14:41.695
Also, das kannst du auf meine Lebenserfahrung mit Computern generalisieren.

00:14:41.862 --> 00:14:48.135
To be honest. Ja, und irgendeine Person schreibt hier schon,

00:14:48.135 --> 00:14:50.666
muss erstmal ein Tablet-Plugin dafür schreiben.

00:14:50.735 --> 00:14:58.111
Aber ich glaube, die Leute, die es tatsächlich brauchen, kamen jetzt hier auch mit den positiven Kommentaren durch.

00:15:00.037 --> 00:15:00.298
Ja.

00:15:02.630 --> 00:15:07.788
Nächstes Ding, das wir hier haben, ist Content Visibility. Jawoll!

00:15:08.274 --> 00:15:13.147
Ist irgendwie cool und zugleich natürlich, wie immer bei coolen Sachen,

00:15:13.207 --> 00:15:14.441
auch ein bisschen der Footgun.

00:15:15.269 --> 00:15:19.950
Ich glaub, wir müssen uns unbedingt erklären, was das ist. Wenn ich diese Grafik richtig verstehe,

00:15:20.207 --> 00:15:27.287
wissen jedes Jahr weniger Prozente als vorher, beziehungsweise sagen mehr Personen als vorher, never heard of it.

00:15:27.512 --> 00:15:34.047
Also wir sind hier von 2020 40 Prozent never heard of it auf 2023 knappe 70 Prozent.

00:15:34.047 --> 00:15:36.047
Und das stimmt. Großartig.

00:15:36.343 --> 00:15:43.807
Ja, das müssen wir natürlich ändern, auch um uns unseren Platz da im Voting weiterhin zu verdienen.

00:15:43.959 --> 00:15:51.927
Kontinuosibility ist ja, glaube ich, auch erst 2020 irgendwie eingeführt worden oder 2021 und ist einfach eine Möglichkeit,

00:15:51.927 --> 00:15:57.409
Content im HTML als Lazy zu rendern zu markieren.

00:15:57.499 --> 00:16:08.427
Also ähnlich wie halt Bilder lazy geladen werden, kann man eben Teile des HTML idealerweise natürlich below the fold mit Content Visibility Auto

00:16:08.427 --> 00:16:11.427
kennzeichnen.

00:16:10.957 --> 00:16:16.565
Was man allerdings dann noch tun sollte, ist Container Intrinsic Size zu setzen.

00:16:16.682 --> 00:16:19.807
Da sagt man im Grunde dem Browser,

00:16:20.166 --> 00:16:27.764
du renderst ja jetzt dieses ganze Element nicht, aber reservier mal so und so viel Platz für den Inhalt.

00:16:28.493 --> 00:16:35.245
Damit eben wenn der Benutzer oder die Benutzerin dahin scrollt und du das dann anfängst zu rendern,

00:16:35.488 --> 00:16:37.667
zum Beispiel die Scrollbar nicht auf einmal anfängt,

00:16:38.153 --> 00:16:42.447
Also wieder, also dann ist ja quasi, der Scroller würde dann schrumpfen,

00:16:42.447 --> 00:16:49.087
weil der Browser merken würde, oh, hier muss ich ja irgendwie jetzt was hinzeichnen,

00:16:49.087 --> 00:16:51.719
und dann ist die Seite ja doch viel länger,

00:16:52.295 --> 00:16:54.942
und da muss ich jetzt mal die Scroll-Leiste anpassen.

00:16:56.049 --> 00:16:59.887
Genau, und andersherum auch, bei dem Content Visibility ist es eben auch so,

00:16:59.887 --> 00:17:09.147
dass der Browser dann irgendwann aufhört, das zu painten, wenn das quasi nach oben weggescrollt ist.

00:17:09.499 --> 00:17:14.187
Wenn du da wiederum keinen Container Intrinsic Size angeben hast,

00:17:14.279 --> 00:17:16.007
dann kollabiert das halt.

00:17:16.332 --> 00:17:22.687
Und wenn das halt kollabiert, dann wird quasi der Inhalt nach oben gezogen

00:17:22.687 --> 00:17:25.145
und du bist nicht mehr an der Stelle, in der du vorher warst.

00:17:25.622 --> 00:17:26.090
Mhm.

00:17:26.873 --> 00:17:33.887
Aber weißt du, ich denk mir halt, das passt ja eigentlich ganz wunderbar in dieses ganze Style-Containment-Zeug-Genre so rein.

00:17:33.887 --> 00:17:35.479
Das funktioniert auf den ähnlichen Regeln.

00:17:36.172 --> 00:17:41.047
Und ist ja sozusagen nichts weiter als so die, ich meine, wenn du dieses Konzept schon hast von dem Style Containment,

00:17:41.047 --> 00:17:43.816
dass man wirklich sagt, weil du irgendwie eine definierte Größe hast,

00:17:44.284 --> 00:17:46.487
kann man halt irgendwie gewisse Annahmen über das Rendering machen,

00:17:46.487 --> 00:17:52.087
in dem Element drin, und dann halt eben zu sagen, dass die Annahme halt auch sein kann, wenn nicht sichtbar,

00:17:52.087 --> 00:17:57.220
dann auch sich mit dem Kram da drin nicht zu befassen, ist ja eigentlich nur eine logische Fortsetzung davon.

00:17:57.562 --> 00:18:02.495
Und ich denke halt mal, das ist ja auch vor allen Dingen anwendbar auf Dinge, die feste Größen haben.

00:18:02.747 --> 00:18:10.847
Also irgendwelche hyperinteraktiven, massiv gerenderten, Geschichten, also Canvas-Animationen oder so, oder mein Gehirn geht jetzt sofort so irgendwie...

00:18:12.569 --> 00:18:17.559
In meinen Präsentationen animierter Code, irgendwie tausende von Diffs mit zig CSS-Regeln drauf.

00:18:17.559 --> 00:18:19.933
Wie wär's, wenn die einfach weg wären, wenn sie eh keiner sieht?

00:18:22.102 --> 00:18:25.399
So, das sind ja die größten Bekannten, und dann denke ich halt eben, genau dafür ist das halt eben auch da.

00:18:25.399 --> 00:18:27.879
Aber das ist halt wirklich eine Lösung für einen Spezialfall.

00:18:27.879 --> 00:18:31.978
Und was ich halt daran besonders nice finde, ist ja das damit assoziierte Event.

00:18:32.626 --> 00:18:34.624
Content-Visibility-Auto-State-Change.

00:18:35.353 --> 00:18:37.631
Oh, das kannte ich noch gar nicht. Ja, haha.

00:18:38.000 --> 00:18:43.799
Ja, das feuert halt eben, wenn auf dem Ding Content Visibility Auto ist und wenn es halt eben entweder anfängt zu rendern oder aufhört zu rendern.

00:18:44.086 --> 00:18:50.799
Das heißt, du könntest ja theoretisch dann, wenn du sowas, ich hab jetzt keine Ahnung, ob das neu ist oder so, warte mal,

00:18:50.799 --> 00:18:55.708
nicht schlecht ist die Kompatibilitätstabelle, nicht sehr viel schlechter als das Hauptding.

00:18:56.068 --> 00:18:58.795
Also insofern ist das wahrscheinlich irgendwie so grob gleicher Jahrgang.

00:18:59.128 --> 00:19:03.799
Aber ist natürlich super, weil du damit halt eben die Animation Pausie nicht nur unsichtbar machen kannst,

00:19:03.799 --> 00:19:08.039
sondern tatsächlich auch damit assoziierte JavaScript-Funktionalitäten stoppen kannst,

00:19:08.039 --> 00:19:10.799
wenn es raus scrollt. Das kannst du sicherlich auch mit einem Intersection Observer und Zeug

00:19:10.799 --> 00:19:14.315
irgendwie hinhacken, aber wenn du sowieso irgendwie sagen willst, dieses Widget in

00:19:14.439 --> 00:19:17.799
dieser Box unterliegt Style Containment und mit dem Style Containment sind doch

00:19:17.799 --> 00:19:21.121
irgendwelche Javascript-Nebenwirkungen assoziiert, dann ist das doch ganz großartig.

00:19:22.948 --> 00:19:37.618
Ja cool ich ansonsten finde ich halt so dieses css contain gibt es ja auch und dann gibt es ja will change und so das sind ja alles so auch so dinge um irgendwelche sachen sagen wir mal zu optimieren aber die haben halt eben auch alle,

00:19:38.189 --> 00:19:51.078
irgendwelche nachteile und das ist halt so nicht irgendwie letztens auf social media will change als deine größte css enttäuschung aller zeiten angegeben ja ja der manuel matusowitsch hatte dann nämlich gefragt und,

00:19:51.531 --> 00:19:59.578
Genau, also seine, und die wird ja auch in dieser Liste der CSS-Mistakes von der CSS-Working-Group,

00:19:59.578 --> 00:20:06.458
die pflegen ja so eine Seite, wo so all unsere CSS-Fehler, die wir halt gemacht haben in der Vergangenheit,

00:20:06.458 --> 00:20:12.598
und da ist ja vertical align auch drin, und das fand er auch, weil das, also es ging mir damals auch so,

00:20:12.598 --> 00:20:17.808
ich dachte so, ah, cool, ich will was vertikal zentrieren, dann nehme ich natürlich vertical align.

00:20:17.934 --> 00:20:20.347
Oh, geht gar nicht. Warum? Wieso?

00:20:20.779 --> 00:20:26.577
Und geht das nur in Table Cells? Aber Will Change ist auch so eine Drecksproperty.

00:20:27.666 --> 00:20:33.607
Also, weil jetzt genau, was ist die Highlightung? Es tut nichts, oder was ist das Problem damit?

00:20:33.769 --> 00:20:36.538
Also, bei Watercolor Line, irgendwie falsche Erwartungen, verstehe ich.

00:20:36.538 --> 00:20:37.883
Aber was ist bei Will Change das Problem?

00:20:38.538 --> 00:20:44.779
Ja, Will Change, da ist halt das Problem, dass der Browser dann bestimmte Optimierungen vornimmt,

00:20:44.923 --> 00:20:48.902
die aber wiederum anderen Fallout produzieren.

00:20:48.983 --> 00:20:50.478
Also, das heißt ...

00:20:50.901 --> 00:20:55.878
Und durch dieses Will Change ist halt auch quasi gar nicht klar,

00:20:55.938 --> 00:20:57.238
was der Browser macht.

00:20:57.298 --> 00:21:00.678
Sondern das kann sich von Version zu Version auch unterscheiden,

00:21:00.738 --> 00:21:06.258
welche Optimierung er vorab vornimmt, um eben diesen ...

00:21:06.637 --> 00:21:11.338
Also, man sagt ja im Prinzip so was wie Will Change und dann, glaub ich, Transform oder so was.

00:21:11.338 --> 00:21:13.712
Also, hier wird irgendwann die...

00:21:14.901 --> 00:21:20.251
Irgendwie das Ding durch die Gegend geschoben. Du kannst schon mal dich darauf vorbereiten im Browser.

00:21:20.536 --> 00:21:25.251
Und eben, was der Browser dann macht, das ist halt dem Browser überlassen.

00:21:25.251 --> 00:21:28.751
Und da sind halt manche Optimierungen sehr unangenehm.

00:21:31.366 --> 00:21:36.251
Und deswegen würde ich's halt lieber nicht benutzen. Und dann soll eben der Browser machen, was er tut.

00:21:36.695 --> 00:21:40.751
Aber eben in dem Moment, wo ich's dann, wo ich die Animation oder die Transition oder so

00:21:40.751 --> 00:21:45.922
dann auch tatsächlich starte und nicht quasi vorab und danach die ganze Zeit schon.

00:21:46.760 --> 00:21:48.074
Hm. Hm, hm, hm.

00:21:51.810 --> 00:21:56.221
Tja. Im Prinzip funktioniert's wie gedacht, nur was gedacht ist, ist halt nicht so gut.

00:21:57.850 --> 00:22:03.231
Ja. Und es ist halt auch nicht reproduzierbar. Also, ich weiß noch, dass die Leute von Greenstock

00:22:03.231 --> 00:22:05.731
irgendwann auch gesagt haben,

00:22:05.731 --> 00:22:11.231
dass Will Change halt irgendwie considered harmful, weil Chrome von einer Version zur nächsten

00:22:11.231 --> 00:22:18.970
auf einmal andere Optimierung gemacht hat und dann irgendwie Bilder grisselig aussahen oder so was und und das ist halt so ist halt so eine Überraschungstüte.

00:22:19.645 --> 00:22:21.013
Ja, das geht eigentlich nicht.

00:22:22.283 --> 00:22:24.281
Ne, ich such das mal raus für die Shownotes.

00:22:25.776 --> 00:22:33.680
Ja, ich hab auch schon die Liste der CSS-Fehler so gefunden, da im Wiki von der CSS-Working Group. Der erste ist ja mein Liebster, also whitespace-no-wrap.

00:22:34.409 --> 00:22:36.902
Wenn ich Auto-Completion nicht hätte, würde ich das wahrscheinlich jedes Mal verkehrt machen.

00:22:37.280 --> 00:22:41.620
Ja, hat er so ein paar gute dabei.

00:22:42.214 --> 00:22:45.711
Ja, wobei ich mich halt fragen kann, kann man nicht irgendwie No-Rap ergänzend einfügen?

00:22:45.711 --> 00:22:47.291
Neben No ohne Dash-Rap?

00:22:48.317 --> 00:22:55.311
Könnte man, ja. Die haben ja auch, Karen Culler war ja auch da drin, das haben wir, glaube ich, letztes Jahr besprochen beim State of CSS, weil die das auch abgefragt haben.

00:22:55.311 --> 00:23:04.197
Und ich glaube, da waren auch Vanessa und ich, die wir darüber gesprochen haben, und wir haben halt uns gefragt, was jetzt genau an Karen Culler so neu sein soll.

00:23:04.494 --> 00:23:10.271
Das ist ja im Alt. Kleinschreibung. Genau, und das ist halt jetzt, gibt es ein Alias,

00:23:10.271 --> 00:23:12.218
dass es nicht mehr CamelCase ist.

00:23:12.749 --> 00:23:20.271
Weil die halt gesagt haben, nix ist CamelCase bei so Properties in CSS. Nur CurrentColor.

00:23:20.680 --> 00:23:21.563
Das ist halt doof.

00:23:24.271 --> 00:23:26.271
Das ist tatsächlich,

00:23:28.271 --> 00:23:32.248
mir nie aufgefallen, weil ist halt so lange schon im Sprachgebrauch drin.

00:23:32.527 --> 00:23:34.697
Aber ja, stimmt. Ist der komplette Fremdkörper. Krass.

00:23:35.311 --> 00:23:40.521
Genau. Und dann haben wir ... Als Nächstes haben wir Container-Querys. Ja.

00:23:41.206 --> 00:23:44.951
Habt ihr die benutzt? Ihr ... Ich weiß nicht, Vanessa macht ja auf jeden Fall

00:23:44.991 --> 00:23:48.983
komponentenbasiertes Frontend-Entwickeln.

00:23:49.560 --> 00:23:51.684
Joa. Da bieten sich die ja an.

00:23:53.350 --> 00:23:56.271
Nutzt ihr die bei euch? Für Dinge?

00:23:58.094 --> 00:24:03.511
Ich glaube ... Und du merkst schon an der Antwort, dass es sehr, sehr rare eingesetzt ist.

00:24:05.494 --> 00:24:08.924
Ich glaub, der Firefox hat's ja auch immer noch hinterm Fleck, oder?

00:24:08.984 --> 00:24:10.931
Wie war das? Oder hat der das jetzt? Ich bin grad unsicher.

00:24:12.104 --> 00:24:16.464
Ich war da nicht ... Ich dachte, irgendwas mit Edge, aber vielleicht war's Firefox.

00:24:16.524 --> 00:24:20.344
Aber ich dachte, das wär eigentlich schon fully supported.

00:24:20.698 --> 00:24:26.064
Ja, dachte ich auch. Wir haben so ein bisschen die Regel, wir benutzen nur fully supported.

00:24:26.370 --> 00:24:28.684
Sonst muss ich ja morgen gleich ... Nee.

00:24:28.744 --> 00:24:33.304
Nee, also, ich weiß, ich hab's damit mal rumgespielt, da war's im Firefox noch nicht.

00:24:33.304 --> 00:24:37.804
Genau, aber der hat fünf Versionen länger gebraucht als Chrome.

00:24:37.844 --> 00:24:39.844
Ja, aber das ist ja auch eine Ebene.

00:24:41.188 --> 00:24:46.535
Ja. Immerhin, das war ja Februar. Das ist ja für uns Frontend-Developer schon zehn Jahre her. Aber echt.

00:24:47.228 --> 00:24:52.884
Genau, ich hab's einmal so im Progressive-Enhancement-Sinne verwendet. Ähm ...

00:24:54.061 --> 00:24:58.344
Aber nur an einer Stelle. Und dann hab ich's aber erst mal wieder ausgebaut,

00:24:58.384 --> 00:25:00.384
weil irgendwie fand ich dann ...

00:25:00.424 --> 00:25:06.106
Also, mir ist auf jeden Fall aufgefallen beim Rendern, der Browser Dinge macht, und dann merkt der Browser.

00:25:07.537 --> 00:25:10.224
Oh, der Container ist aber ja so und so groß.

00:25:10.328 --> 00:25:12.308
Dann muss ich das jetzt ja doch noch mal anders machen.

00:25:13.264 --> 00:25:19.060
Und wenn mir das dann auffällt beim Rennern, dann denk ich immer, oh nö, das ist mir zu langsam.

00:25:19.798 --> 00:25:23.903
Ja, aber da muss ich jetzt mal ernsthaft die Frage stellen, fällt nur dir das auf?

00:25:24.144 --> 00:25:26.082
Also merkt das die Nutzerschaft auch?

00:25:27.224 --> 00:25:35.064
Nee, nicht unbedingt, aber das ist ja dann so ... Ich hab da immer so das Gefühl, dass das so der Death by a Thousand Papercuts ist.

00:25:35.064 --> 00:25:38.793
Also je mehr ich diese Container-Queries einsetze, je mehr Komponenten die benutzen,

00:25:39.657 --> 00:25:44.447
desto mehr extra Layoutrunden muss der Browser drehen und am Ende dann summiert sich's halt.

00:25:44.744 --> 00:25:51.711
Und deswegen, also ich find die gut, so wie ich auch HASS gut finde und das bei HASS genauso praktiziere übrigens.

00:25:52.584 --> 00:25:57.284
Aber ich benutze die sparsam, was aber eben auch an meiner...

00:25:58.544 --> 00:26:00.885
An meinem Performance-Nazitum liegt vielleicht.

00:26:02.644 --> 00:26:06.106
Bei den Container-Querys hab ich mal die Einheiten ganz gut gebrauchen können.

00:26:06.754 --> 00:26:07.789
Ja, die sind auch cool, ja. Stimmt.

00:26:08.044 --> 00:26:11.344
Das ist wirklich sehr nützlich. Also, Container-Querys an sich, keine Ahnung,

00:26:11.344 --> 00:26:13.444
ich baue ja keine ernsthaften Webseiten-Layouts,

00:26:13.444 --> 00:26:20.744
aber diese Einheiten, dass man sagen kann, ich hätte jetzt wirklich irgendwie mal dieses hier Viewport-Unit-artige Zeug,

00:26:20.744 --> 00:26:24.504
aber halt eben bezogen auf ein beliebiges Diff, das ist schon sehr nice to have.

00:26:24.786 --> 00:26:29.784
Ja, also generell finde ich es eigentlich auch total gut. Wahrscheinlich auch eher,

00:26:29.784 --> 00:26:32.438
dass ich nicht wieder sofort dran denke.

00:26:34.535 --> 00:26:48.185
Ja, da ist halt auch, da kann man ja auch dann irgendwie so Sachen lösen, wie ein Text skaliert sozusagen mit in der Horizontalen mit dem Container und so, das ist ja auch schwierig.

00:26:48.185 --> 00:27:01.585
Also man hat dann zwar immer noch nicht alle Probleme gelöst, weil man natürlich trotzdem initial eben so den Text vielleicht mit Letter Spacing irgendwie so mit Sperrschrift quasi so breit machen muss wie ein Container.

00:27:01.585 --> 00:27:10.625
Aber wenn man das einmal hat, dann kann der Container wachsen und schrumpfen, und dieser Text bleibt so in Relation immer gleich groß.

00:27:13.353 --> 00:27:17.985
Ja. Also, wie gesagt, ich find die gut, und Hass find ich auch gut.

00:27:18.045 --> 00:27:21.585
Und die guck ich mir auch ... Die zieh ich auch immer in Erwägung.

00:27:21.645 --> 00:27:26.379
Aber wenn ich irgendwie einen Weg drumherum finde, dann wähl ich den derzeit immer.

00:27:26.937 --> 00:27:27.207
Hm.

00:27:27.838 --> 00:27:32.245
Ich muss mich für Hass immer irgendwie ... Ich kann mich daran erinnern, dass es das gibt.

00:27:32.305 --> 00:27:35.868
Weil so mein Gehirn immer noch im CSS funktioniert, nur in eine Richtung Modus ist.

00:27:36.645 --> 00:27:39.964
Und HES ist voll gut und löst halt wirklich die wenigen Probleme,

00:27:40.185 --> 00:27:43.585
die man da halt echt definitiv mitlösen kann. Voll gut, aber ...

00:27:44.492 --> 00:27:49.125
Das ist, glaub ich, nicht verkehrt, wenn man darauf noch geeicht ist, in die eine Richtung zu marschieren.

00:27:50.406 --> 00:27:52.549
Und die andere nur im Notfall mal zu beschreiben. Ja, das ist schon krass.

00:27:53.045 --> 00:27:59.245
Also, so ein bisschen wie als Flexbox und Grid kam und man Inlineblock und Floats vergessen musste.

00:27:59.552 --> 00:28:07.245
Das fiel mir noch nicht so schwer, ich glaub, da gab's noch Flexbox-Froggy und dann war ich die ganze Zeit am Spielen, bis ich's konnte.

00:28:07.916 --> 00:28:13.092
Aber ich hab ja grad auch in der Vorbesprechung erzählt, dass ich mal ein riesiges Problem hatte im Kopf mit dem Not-Selector,

00:28:13.497 --> 00:28:24.245
weil das, was ich erreichen wollte, war, wenn hier jetzt eine Liste ist, also eine ul oder ol, dann möchte ich einen bestimmten Style anwenden,

00:28:24.507 --> 00:28:29.071
Außer, es gibt ein Parent-Element mit einer bestimmten Klasse.

00:28:29.593 --> 00:28:32.745
Und ich hab's in meinem Kopf nicht hinbekommen, das zu schreiben.

00:28:32.785 --> 00:28:36.930
Ich hab gefühlt alles probiert, ich hab mit Chachipiti gestritten, alles Mögliche.

00:28:37.325 --> 00:28:42.405
Und im Endeffekt hatte ich tatsächlich das Sternchen dahinter vergessen in meinem Not-Selector.

00:28:42.445 --> 00:28:48.245
Aber das kam mir so weird vor, quasi in dem Not-Selector eigentlich doch den vorderen Teil zu schreiben.

00:28:48.285 --> 00:28:50.532
Das ist schwierig, schwierig.

00:28:50.712 --> 00:28:57.445
Okay, du musstest dann quasi ... Du hast dann not gehabt und in der Klammer drin dann quasi die Klasse,

00:28:57.445 --> 00:29:00.858
an dem, was du nicht wolltest und dann freistelle Stern.

00:29:01.515 --> 00:29:02.875
Ja. Ja, okay.

00:29:03.946 --> 00:29:12.445
Ja, kuck. Aber es war einfach falsch rum. Ja, ich weiß gar nicht. Also, bist schon aus dem Fall.

00:29:12.445 --> 00:29:15.946
Ich glaube, ich hätte das schon geschrieben als not parent Stern.

00:29:16.666 --> 00:29:22.364
Nee, ich glaube, ich hätte das geschrieben als Not-Parent-OL, so hätte ich es gerne geschrieben.

00:29:22.715 --> 00:29:25.445
Aber das ging irgendwie nicht.

00:29:25.740 --> 00:29:30.085
Genau, da stimmt ja bloß ein einfacher Selektor, kein mit Kombinatoren.

00:29:31.673 --> 00:29:35.383
Ist das so? Ist das immer noch so? Ich dachte, dass die mittlerweile auch ...

00:29:35.443 --> 00:29:37.641
Das war mal so. Nee, du hast recht, das war mal so.

00:29:38.515 --> 00:29:43.183
Du hattest auch noch so ein tolles Blogpost, wo in jedem Browser das irgendwie anders rauskam,

00:29:43.243 --> 00:29:46.797
weil der Safari konnte schon komplexe Selektoren in Not.

00:29:47.043 --> 00:29:53.183
Dann konnte ein Browser gar keinen Not, und Chrome konnte nur Not mit einfachen Selektoren.

00:29:53.377 --> 00:29:57.123
Nee, das war nicht das. Das war tatsächlich so eine Frage nach dem Motto,

00:29:57.183 --> 00:29:59.193
so werte CSS-Gurus, was meint ihr, was hier rauskommt?

00:30:00.183 --> 00:30:09.563
Und die richtige antwort war natürlich jetzt kommt drauf an und das ist ja auch die botschaft gewesen daran wie du hast recht das könnte das war ja schon ewig in den spezifikationen mittlerweile können es auch alle allein.

00:30:10.500 --> 00:30:13.569
Mein verhaltenes geändert das noch gar nicht auf dem zettel dass das ja mittlerweile anders sein könnte.

00:30:15.118 --> 00:30:23.805
Ja. Ich habe mich jetzt wieder vollkommen verwirrt mit dem not springen wir schnell weiter weil ich bin mittlerweile doch überzeugt dass meine schreibweise auch funktionieren sollte.

00:30:24.021 --> 00:30:29.656
Die sollte auch funktionieren nur ich wollte was ich nur sagen wollte war ich wäre genau vor die gleiche wand gelaufen wie du aber aus anderen gründen.

00:30:29.953 --> 00:30:40.909
Auch das ist auf jeden fall task. Ja genau also du hast du hast nicht gewusst wie es geht und ich habe geglaubt zu wissen wie es geht und wäre deshalb verwirrt gewesen.

00:30:41.818 --> 00:30:50.947
Ich wollte noch hinzufügen dass es ja nachträglich noch mal in den spex umgespekt wurde und zwar dahingehend dass,

00:30:51.406 --> 00:30:57.050
dass es früher forgiving war und mittlerweile nicht mehr forgiving ist

00:30:57.392 --> 00:31:00.111
hinsichtlich der Selektoren, die darin gelistet sind.

00:31:00.516 --> 00:31:05.521
Wenn da ein Selektor drin ist, den der aktuelle Browser nicht kapiert,

00:31:06.296 --> 00:31:07.799
dann wirft er das ganze Teil weg.

00:31:08.753 --> 00:31:14.363
Das war früher nicht. Und der Grund ist, dass jQuery ein Motools gepullt hat.

00:31:14.812 --> 00:31:20.861
Und die haben quasi selber Feature Queries gemacht.

00:31:21.059 --> 00:31:26.403
Weil die hatten ja auch schon Doppelpunkt HES als Selektor ganz lange in jQuery.

00:31:26.767 --> 00:31:30.103
Und die haben halt die, was die mit ihren ganzen Selektoren machen,

00:31:30.103 --> 00:31:33.923
gegen die Browser-Feature testen, aber was sie eben...

00:31:35.040 --> 00:31:39.630
Gemacht haben, ist HES zu testen, aber mit einem komischen Selektor,

00:31:39.690 --> 00:31:43.628
sowas wie Doppelpunkt Visible, der auch jQuery-spezifisch ist.

00:31:43.979 --> 00:31:49.173
Und dann hat der Browser gesagt, ah, cool, kann ich. Ich schmeiß keinen Fehler,

00:31:49.344 --> 00:31:52.432
weil sonst würde er einen quasi einen Fehler werfen.

00:31:53.230 --> 00:31:56.582
Und dann hat jQuery gesagt, ah, cool, dann kümmerst du dich darum.

00:31:56.790 --> 00:31:57.708
Ich brauch nix machen.

00:31:58.356 --> 00:32:04.081
Nur, dass der Browser halt eben keinen Fehler geworfen hat, aber dennoch nicht zum Beispiel Doppelpunkt Visible konnte.

00:32:04.918 --> 00:32:12.435
Und dann musste das noch mal umgespeckt werden. Und jetzt wirft das eben in Jackery einen Fehler.

00:32:12.498 --> 00:32:16.342
Und Jackery weiß dann, aha, okay, ich muss das jetzt selber übernehmen mit meiner Engine.

00:32:16.396 --> 00:32:21.770
Und deswegen haben wir aber keine forgiving-Selektoren.

00:32:21.770 --> 00:32:25.570
Und wenn man die haben will, dann muss man das Ganze eben noch mal in einen Doppelpunkt-Is

00:32:25.570 --> 00:32:29.954
oder in einen Doppelpunkt-Were kapseln, die wiederum forgiving sind.

00:32:31.700 --> 00:32:33.970
Ja, ich meine, bei denen macht das ja auch ein bisschen Sinn.

00:32:34.617 --> 00:32:37.970
Dass die forgiving sind, bei Hass hätte mich das jetzt auch eher so ein bisschen überrascht.

00:32:39.064 --> 00:32:41.970
Weil ich meine, es ist ja eine relativ klare Ansage bezüglich dessen, was los sein muss.

00:32:41.970 --> 00:32:45.492
Und wenn das nicht zu interpretieren ist, dann ist es halt Sense.

00:32:46.329 --> 00:32:49.102
So. Und dass der andere ist ja eine Auswahl, mehr oder minder.

00:32:51.316 --> 00:32:57.970
Joa. Ja, ich finde es jetzt auch nicht schlimm. Manchmal ist es halt blöd, weil man dann

00:32:57.970 --> 00:33:01.804
für Vendor-gepräfixten Kram,

00:33:02.551 --> 00:33:09.050
Also, wenn man jetzt nicht is- oder weart nochmal nutzt, dann muss man eben Selektoren einfach mehrfach hinschreiben,

00:33:09.050 --> 00:33:17.770
damit eben alle Browser die nehmen und nicht verwerfen, weil, keine Ahnung, Safari ein Modding da drin gefunden hat

00:33:17.770 --> 00:33:24.390
und Firefox ein WebKitding da drin gefunden hat und die dann irgendwie alle die Zusammenarbeit verweigern.

00:33:25.399 --> 00:33:28.130
Ich finde das sehr schön, dass auch Jackquery ein Mood Rule prügeln kann.

00:33:28.130 --> 00:33:32.050
Das finde ich eine sehr schöne Formulierung Und mir als ehemaligem Noodles-Anhänger

00:33:32.110 --> 00:33:34.510
ist das natürlich ein innerer Reichsparteitag.

00:33:34.570 --> 00:33:37.426
Ja, das denk ich mir. Das denk ich mir.

00:33:38.173 --> 00:33:44.550
So, letzter Punkt im Layout sind die Viewport-Units. Die gibt's ja auch schon ganz, ganz, ganz lange.

00:33:44.610 --> 00:33:50.710
Aber neu hinzugekommen sind, sagen wir mal, Abwandlungen der Viewport-Units.

00:33:50.770 --> 00:33:57.210
Und zwar die dynamische Viewport-Unit-Familie, die Small-Viewport-Unit-Familie

00:33:57.270 --> 00:33:58.887
und die Large-Viewport-Unit-Familie.

00:34:00.246 --> 00:34:06.096
Die ich auch jetzt neulich, also neulich habe ich die Small Viewport Unit Familie genutzt.

00:34:06.350 --> 00:34:09.654
Die sind notwendig geworden, weil ja mobile Browser,

00:34:10.446 --> 00:34:18.096
ihr Browser Chrome oder ihr Browser UI, je nachdem, wo man jetzt irgendwie, ob man gescrollt hat oder was man so treibt mit

00:34:18.096 --> 00:34:21.474
seinem Smartphone, eben quasi,

00:34:22.096 --> 00:34:29.063
einblenden und wieder wegfahren. Und damit Es ändert sich dann der Viewport,

00:34:29.134 --> 00:34:34.096
beziehungsweise auch die Erwartung, was der Viewport sein soll denn jetzt gerade.

00:34:34.096 --> 00:34:39.096
Also wo möchte ich Dinge denn verankern? Soll das jetzt quasi in dieser Safe Area sein,

00:34:39.096 --> 00:34:41.441
die jetzt immer zu sehen ist, also dem Small Viewport?

00:34:42.539 --> 00:34:47.292
Soll das verankert sein im Large Viewport, sodass es vielleicht auch von Browser Chrome verdeckt werden kann?

00:34:48.096 --> 00:34:52.596
Oder möchte ich einen dynamischen Viewport-Unit verwenden,

00:34:53.126 --> 00:34:57.942
der halt wächst und schrumpft, je nachdem, ob Browser Chrome gerade raus- oder reinfährt.

00:34:58.096 --> 00:35:06.575
Und ich glaube, dass die klassischen Viewport-Units, die sind gealiast zu den, zur Large Viewport-Unit.

00:35:08.321 --> 00:35:12.596
Also die sind quasi auf ihren Browsern dasselbe, eigentlich.

00:35:13.480 --> 00:35:19.596
Genau, und früher haben auch noch die Browser, waren sich auch noch uneins darüber, ob der Viewport

00:35:19.596 --> 00:35:27.433
quasi dynamisch, also ob der Viewport betroffen ist davon, wenn das Virtual Keyboard hochkommt.

00:35:28.108 --> 00:35:34.596
Und jetzt hat man sich eben darauf geeinigt, also Chrome ist eingeschränkt auf die Safari-Linie,

00:35:34.596 --> 00:35:43.596
dieses virtuelle Keyboard über die Seite zu legen, ohne dass quasi der Viewport dadurch verkleinert wird.

00:35:44.033 --> 00:35:47.256
Also der dann quasi unten drunter weiter.

00:35:47.788 --> 00:35:55.596
Und du kannst in Chrome, wenn du jetzt das alte Verhalten besser fandst, kannst du in Chrome über so ein Viewport-Metatext ein Opt-out machen,

00:35:55.596 --> 00:35:57.528
dass du wieder quasi das alte Verhalten hast.

00:35:58.437 --> 00:36:02.596
Okay. Und das ist nicht irgendwie spezifiziert, wie sowas sich zu verhalten hat?

00:36:03.073 --> 00:36:08.596
Nee, das ist auch so eine quasi Lücke, so wie ganz früher war ja bei den Viewport-Units

00:36:08.596 --> 00:36:12.596
gab es eine Diskrepanz bei den Browsern, ob die Scrollbars sozusagen,

00:36:12.967 --> 00:36:19.596
also beeinflussen die die Viewport-Breite zum Beispiel oder nicht.

00:36:20.160 --> 00:36:27.596
Dann hat man sich halt irgendwann auch im Sinne von, das verhindert so Endless Loops in unserem CSS,

00:36:27.596 --> 00:36:32.596
hat man sich darauf geeinigt, eben zu sagen, okay, 100 Viewport Width geht halt quasi,

00:36:32.596 --> 00:36:34.596
da zählt die Scrollbar nicht dazu.

00:36:35.257 --> 00:36:38.110
Also das ist quasi, das geht dann unter der Scrollbar weiter.

00:36:38.695 --> 00:36:42.596
Ist aber wahrscheinlich auch nicht spezifiziert, weil ich könnte mir vorstellen, so das Konzept Scrollbar

00:36:42.596 --> 00:36:44.097
kannst du ja auch so oder so umsetzen.

00:36:44.596 --> 00:36:46.212
Nee, ist spezifiziert, ja.

00:36:47.031 --> 00:36:56.036
Okay. Es aber stinkt, weil manchmal will ich halt Sachen quasi so breit haben wie der Sichtbauplatz.

00:36:57.465 --> 00:37:03.315
Es gibt halt keine Möglichkeit zu erfahren, wie viel Platz eben diese Scrollbar einnimmt.

00:37:03.375 --> 00:37:09.155
Außer indem du am Anfang Feature-Tests machst, wo du Elemente erzeugst, wo der Scrollbar drin ist,

00:37:09.215 --> 00:37:15.255
und du dann ausmisst, wie viel Platz dann quasi ein Diff, was du da reinplatzierst mit 100 Prozent Breite,

00:37:15.315 --> 00:37:17.055
also wie viel das dann noch ist.

00:37:17.115 --> 00:37:20.826
Und dann weißt du, aha, da muss der Rest quasi die Scrollbar sein.

00:37:21.195 --> 00:37:27.451
Ja, und halt eben so das Konzept von Platzverbrauch, ne? Also, wenn du jetzt so einen Windows-95-artigen grauen Block da an der Seite hast, okay.

00:37:28.487 --> 00:37:33.135
Aber wenn du jetzt so ein modernes Lightweight-UI hast, wo irgendwie die Scrollbar sowieso nicht da ist,

00:37:33.339 --> 00:37:37.210
und nur wenn du die Maus auf dem Fenster hast, ist irgendwie da so eine ganz leichte Andeutung von so einem Ding,

00:37:37.363 --> 00:37:42.233
weil du ja eh irgendwie über dein Touchpad oder per Geste oder per Touchscreen scrollst.

00:37:42.648 --> 00:37:46.175
Wahrscheinlich schwierig, das auch irgendwie so definitiv festzunageln, wie es zu sein hat,

00:37:46.175 --> 00:37:49.759
aufgrund der vielen, vielen Möglichkeiten, wie das ausgestaltbar sein könnte.

00:37:51.632 --> 00:37:57.555
Ja, genau, also da wünsche ich mir aber dann, dass es so, es gibt ja diese Env,

00:37:57.555 --> 00:37:59.788
diese Env, weiß ich nicht,

00:38:00.607 --> 00:38:06.555
Environment-Variablen, also diese eigentlich grundsätzlich so funktionieren wie Custom-Properties, da gibt's ja so

00:38:06.909 --> 00:38:09.555
irgendwie Save, Inset, Top und so Zeugs auf Safari.

00:38:09.555 --> 00:38:15.555
Und da wäre es eigentlich ganz cool, wenn die da mal eine Env-Variable für eben

00:38:15.555 --> 00:38:20.961
Scrollerbar-Breite nochmal anbieten würden. würden, fände ich, glaube ich, ganz, ganz cool.

00:38:22.284 --> 00:38:26.555
Aber was ist denn die Breite? Also, wenn ich jetzt hier mein, ich gucke mir mein Chrome-Fenster an,

00:38:26.555 --> 00:38:28.514
wie es jetzt ist, so mit dem, mit dem Zen-Caster da drin.

00:38:28.676 --> 00:38:31.555
Und ich habe die Maus jetzt auf der anderen Seite von meinem Bildschirm,

00:38:31.555 --> 00:38:37.555
wo unser Google-Doc ist. So, das heißt, ich habe auf dem Zen-Caster jetzt keinen sichtbaren Scroll-Balken, aber sobald ich die Maus rüberschiebe,

00:38:37.912 --> 00:38:43.458
äh, dann kommt er da und ich kann da jetzt in dem Chat-Fenster zum Beispiel umscrollen. Wie breit ist denn jetzt die Scrollbar?

00:38:45.384 --> 00:38:48.454
Die ist wahrscheinlich null, aber das liegt daran, dass es nichts mehr drin ist.

00:38:49.948 --> 00:38:50.246
Also was steht in der Endvariable?

00:38:50.574 --> 00:38:55.774
Ja, genau, in der Endvariable würde dann null stehen, weil die, also es gab auch lange Zeit,

00:38:55.774 --> 00:38:57.774
das haben die Browser auch entfernt, es gab

00:38:58.186 --> 00:39:05.955
Overflow Overlay, das heißt, du konntest quasi dann eine Scrollbar haben, aber die war dann sozusagen,

00:39:06.431 --> 00:39:12.220
überlagert, also die überlagerte den Content, und das heißt, wenn du dann eine Width 100% hattest,

00:39:12.409 --> 00:39:14.786
ging das halt unter diese Scrollbar.

00:39:16.325 --> 00:39:22.974
Und das hast du dann bei diesen Scrollbars, die sozusagen On Demand sich einblenden oder wieder ausblenden, hättest du das auch.

00:39:22.974 --> 00:39:30.974
Die sind ja auch so halbtransparent, du kannst da durchgucken und die manifestieren sich halt mit null Pixeln in deinem Layout.

00:39:31.548 --> 00:39:35.662
Aber so diese Windows 95 Scrollbars, die manifestieren sich halt doch.

00:39:36.220 --> 00:39:41.674
Und dann soll da, dann wäre es natürlich cool, wenn, ich meine du kannst natürlich

00:39:41.674 --> 00:39:50.012
irgendwie so educated guesses machen, wie breit die wohl sind, aber ist irgendwie alles, alles nur gefummeln.

00:39:51.299 --> 00:39:54.834
Ja, und das ist halt der Preis dann von der Plattform-Unabhängigkeit, dass es halt eben

00:39:54.834 --> 00:39:56.304
so oder so oder so sein kann.

00:39:56.889 --> 00:40:00.034
Wenn du irgendwie ein iOS-Ding baust, dann hast du das Problem natürlich nicht, aber

00:40:00.034 --> 00:40:01.850
dann hast du halt auch nur ein iOS-Ding. Ja.

00:40:05.730 --> 00:40:14.034
So, da haben wir den Layout-Block abgeschlossen. Shapes and Graphics, Intrinsic Sizing Keywords,

00:40:14.034 --> 00:40:18.034
das ist, glaube ich, hier so Fit-Content, Max-Content, Mint-Content.

00:40:18.279 --> 00:40:20.709
Großer Fan. Super, ne?

00:40:21.376 --> 00:40:25.034
Ist total toll. Also, mir geht das da so wie früher Internet Explorer 6 debugging.

00:40:25.034 --> 00:40:28.034
Das sieht irgendwie nicht aus, also probiere ich die Dinger durch,

00:40:28.034 --> 00:40:32.637
bis es aussieht, wie ich will. Aber ich hab da keinen nicht intuitiven Zugang zu.

00:40:33.394 --> 00:40:38.434
Okay. Nee, Moment, du hast da keinen intuitiven Zugang zu, richtig?

00:40:38.651 --> 00:40:41.235
Äh, nein, ich hab da keinen nicht intuitiven Zugang zu.

00:40:41.414 --> 00:40:45.614
Weil wenn ich einen nicht intuitiven Zugang hätte, wüsste ich ja, was ich tue.

00:40:45.654 --> 00:40:48.130
Aber ich rate halt, dass das eventuell mein Problem löst.

00:40:48.751 --> 00:40:49.048
Ja.

00:40:49.734 --> 00:40:55.994
Moment, ich versuch's mal. Also, MinContent bedeutet, die Zelle, Container, egal,

00:40:56.259 --> 00:40:59.320
ist jetzt so lange, wie mindestens der Content lang sein wird.

00:40:59.950 --> 00:41:08.007
Max-Content, jetzt, ich weiß auch gar nicht, warum Max, aber da im Notfall brechen die Buchstaben in einzelne Zeilen um.

00:41:09.124 --> 00:41:11.473
Und Fit-Content ist das, was gut ausschaut.

00:41:13.084 --> 00:41:16.766
Also fit Content ist, wo die Zelle so lang ist, dass der Content da reinfittet.

00:41:17.946 --> 00:41:23.680
Oder war Min und Max genau andersrum? Nee, ich denke schon, dass Min ist eben mindestens so lang, wie der Content lang ist.

00:41:24.697 --> 00:41:29.055
Also ich glaube Min Content, ich überlege auch gerade, was fit Content nochmal macht,

00:41:29.055 --> 00:41:34.942
aber Min Content ist quasi dann, das geht dann so... Du machst den Content so klein, wie du kannst.

00:41:35.275 --> 00:41:37.345
Genau, und zwar... Max macht den Content so groß, wie er geht.

00:41:37.922 --> 00:41:41.306
Nee, ich glaube, es ist andersrum. Ich dachte, es wäre mindestens so lang.

00:41:42.189 --> 00:41:47.915
Nee, nee, also bei MinContent, da guckt er sich quasi das längste Wort an, das da drin steht.

00:41:47.915 --> 00:41:53.703
Und das ist sozusagen, also, wenn da nicht Hyphenation an ist, dann kriegt er das ja nicht kleiner.

00:41:54.432 --> 00:42:05.847
Und das ist dann sozusagen die Mindestbreite. Max ist, glaube ich, tatsächlich dann, dass der ganze Text ohne Zeilenumbruch in eine Reihe passt, glaube ich.

00:42:06.522 --> 00:42:08.016
Bei mir so sehe er das andersherum.

00:42:08.979 --> 00:42:14.435
Und Fit-Content, da muss ich jetzt selber überlegen. Fit-Content kann dir zum Beispiel einen coolen Effekt erzeugen,

00:42:14.495 --> 00:42:20.195
wenn du jetzt eine Headline schreiben möchtest, und du möchtest, dass die Headline einen Textmarkeffekt hat,

00:42:20.255 --> 00:42:21.871
dass die eine Background-Color hat.

00:42:22.175 --> 00:42:25.335
Aber wirklich eben davon abhängig, wie lang dieser Text ist,

00:42:25.395 --> 00:42:27.635
je nachdem, welche Sprache eingestellt ist,

00:42:27.695 --> 00:42:32.795
dann kannst du schreiben, dass das Diff-Block hier hat die Breite des Textes,

00:42:32.855 --> 00:42:39.295
und dann kannst du eine Background-Color blau geben, und dann ist das wirklich wie so ein bisschen Textmarker-mäßig

00:42:39.355 --> 00:42:40.755
unterstrichen zum Beispiel.

00:42:42.909 --> 00:42:46.595
Mhm. Da müsste MaxContent was anderes sein, aber ... Genau, aber das ...

00:42:46.655 --> 00:42:54.295
Hey, hey, pass auf. Ich hab hier grad mal MDN aufgemacht. Sagt mir hier zum Thema FitContent in Practice, bla bla bla,

00:42:54.630 --> 00:42:57.988
the box will use the available space never more than MaxContent.

00:42:58.321 --> 00:43:00.375
Also, die sind sich dann schon sehr ähnlich.

00:43:01.274 --> 00:43:04.335
Ah, okay. Außerdem ist FitContent anscheinend auch eine Funktion.

00:43:04.335 --> 00:43:05.514
Anscheinend parametrisieren.

00:43:07.224 --> 00:43:17.451
Also ich hab nachgeschaut, ihr hattet recht, Peter, ich mach das dann einfach, ich gehe einfach in die Dev-Tools und ich drück so lange, ich will auch schauen, wie es ausschauen soll.

00:43:17.640 --> 00:43:20.746
So, das ist mein Weg zum Erfolg, das muss...

00:43:21.457 --> 00:43:24.851
Ja, ich glaube, das ist aber generell bei CSS oft ein Weg zum Erfolg, oder?

00:43:25.751 --> 00:43:32.332
Ja, muss ja nicht, also ich meine, mein Hauptbetätigungsfeld ist das nicht. Ich glaube, bitte?

00:43:32.917 --> 00:43:38.094
Bei Flexbox neigt man ja auch, eher so rumzuprobieren.

00:43:38.930 --> 00:43:44.614
Ja, gut, wenn man dann landet bei Minwulf Zero. Ja, Minwulf Zero ist sehr wichtig, das braucht man immer.

00:43:45.079 --> 00:43:50.974
Ja, aber andererseits ist ja Flexbox ... Das mag zutreffen, aber du holst ja heutzutage wahrscheinlich,

00:43:51.416 --> 00:43:55.314
die Flexbox-Kanone, sagen wir mal, für eher kleine Spatzen raus.

00:43:56.097 --> 00:43:58.774
Also, das war ja früher so das einzige vernünftige Layoutmittel,

00:43:58.814 --> 00:44:01.157
weil irgendwie hier ... Grid war noch nicht so weit.

00:44:01.534 --> 00:44:08.449
Aber Floats haben schon immer genervt, also hast du halt Flexbox genommen und dann war das halt tatsächlich irgendwie schwierig, weil du halt irgendwie dein ganzes Layout damit irgendwie orchestrieren musstest.

00:44:09.655 --> 00:44:18.459
Und jetzt, wenn ich halt irgendwie so mein großes Layout, meinen großen Layoutwurf machen möchte, dann greife ich halt eben schon eher zum Grid und das ist selbst in Abwesenheit von Subgrid ja noch relativ klar zu strukturieren.

00:44:18.783 --> 00:44:23.446
Also da ist der Weg von so, ich hätte gern das zur Umsetzung, die dem relativ nahe kommt, recht direkt.

00:44:24.292 --> 00:44:28.534
Und wenn ich bei Flexbox so was machen will, wie einfach nur die Navigationsleiste gleichmäßig spacen,

00:44:29.631 --> 00:44:32.971
da muss ich da auch selten dran rumfummeln, weil einfach dann der Problemscope so klein ist, weißt du?

00:44:34.069 --> 00:44:36.534
Mhm. Also, ich glaub, du hast recht, aber das spielt, glaub ich,

00:44:36.534 --> 00:44:40.839
heutzutage nicht mehr ganz so die Rolle wie früher, als wir nur Flexbox und nichts Besseres hatten.

00:44:41.919 --> 00:44:42.333
Ja.

00:44:43.503 --> 00:44:48.896
Aber MinContent kann man auch einsetzen in Grid CSS, zum Beispiel bei so GridTemplateColumns.

00:44:49.034 --> 00:44:57.457
Kannst du die angeben mit MinContent, Max-Content. Ich weiß jetzt nicht, ob die beiden zusammen Sinn machen, aber man kann sie auf jeden Fall drin einsetzen.

00:44:57.547 --> 00:45:00.534
Es fehlt auf jeden Fall noch Moritz-Content.

00:45:00.878 --> 00:45:04.534
Aber ja, ich hatte das eben, Schäfer-Düdels gerade meinte das.

00:45:04.534 --> 00:45:07.534
Wo wir sind, ist vorne, Podcast. Nicht bei uns.

00:45:07.534 --> 00:45:16.534
Das mal in einer, nicht Tabellenzelle, also doch Tabellenzelle sogar, mit wo ich die Hyphens anhatte.

00:45:16.534 --> 00:45:23.534
Und dann hat das mit meinem Min- oder Max-Content nicht so funktioniert, wie ich das wollte.

00:45:23.534 --> 00:45:28.534
Wahrscheinlich war es dann tatsächlich eben MinWiff, weil dann konnte jedes Wort dann doch gesplittet werden.

00:45:28.534 --> 00:45:33.124
Und dann war das doch nicht so. Ich glaube, ich hatte da einen recht coolen Weg.

00:45:34.555 --> 00:45:37.274
Ich schau mal kurz nach. Redet mal über was anderes.

00:45:38.976 --> 00:45:42.765
Genau, wir können nächstes, als nächstes habe ich Linear Easing Function hier.

00:45:43.801 --> 00:45:46.826
Kennt ihr die? Die ist auf jeden Fall hot off the press sozusagen.

00:45:46.826 --> 00:45:52.826
Nee, die kann ich noch nicht erzählen. Da geht es darum, dass du mit den bisherigen

00:45:52.826 --> 00:45:56.826
Bezierkurven ja bestimmte Konstellationen nicht abbilden kannst.

00:45:57.241 --> 00:46:04.826
Also wenn du jetzt irgendwie sowas machen willst wie so Bounce mit Nachbouncen oder sowas und

00:46:04.826 --> 00:46:09.326
Die CSS-Working-Group hat halt irgendwie sich lang in den Kopf darüber zerbrochen,

00:46:09.326 --> 00:46:13.326
wie kann man das, also macht man dann irgendwie noch mehr Bézier-Anfasser und

00:46:13.652 --> 00:46:17.289
Problem ist nur, das kriegt halt keine Programmiererin oder Programmierer gebaut,

00:46:17.397 --> 00:46:21.326
also einfach, weil es so ist, einfach schwierig.

00:46:21.502 --> 00:46:29.326
Kann man nur noch irgendwie mit einem Grafikprogramm machen und die Linear Function, da ist man eben auf die Idee gekommen, so hey, Moment, eigentlich

00:46:29.326 --> 00:46:33.326
ist das auch gar nicht wichtig, dass die Kurve überall glatt ist, weil wenn wir

00:46:33.326 --> 00:46:39.126
hinreichend viele Punkte einzeichnen können, dann ist sie sozusagen geglättet genug und

00:46:39.126 --> 00:46:40.926
das Auge merkt es nicht.

00:46:40.926 --> 00:46:46.970
Und das ist eben, was diese Linear Easing Function jetzt einem anbietet, dass man eben

00:46:47.284 --> 00:46:53.486
beliebig viele Punkte dort hineinsetzt und die aber alle eben nicht weich verbunden sind,

00:46:53.486 --> 00:46:59.606
also nicht mit einem Easing oder in einer Bezierkuhr, sondern alle quasi wie, wenn man

00:46:59.606 --> 00:47:04.786
dass man halt diese Zahlen, Bilder, Malt quasi alle verbunden sind

00:47:04.846 --> 00:47:05.874
mit einer geraden Linie.

00:47:06.513 --> 00:47:12.707
Genau, also früher war Linie einfach nur ein Keyword für einfach, das geht halt von null nach eins konstant durch.

00:47:13.166 --> 00:47:19.186
Und jetzt ist das ja im Prinzip eine Funktion, mit der du beliebig viele lineare Schritte machen kannst.

00:47:19.246 --> 00:47:24.486
Und dann hast du sozusagen deine runde Animation aus diskreten Schritten zusammengesetzt,

00:47:24.546 --> 00:47:28.722
statt wirklich über eine original Bezierkurve, weil man die nicht verkomplizieren wollte.

00:47:31.486 --> 00:47:38.026
Genau, und Vanessa, hast du gefunden, was du suchtest? Ja, den Effekt, den ich haben wollte, war bei einer Tabelle,

00:47:38.201 --> 00:47:42.541
die sich auch über quasi Pagination über mehrere Seiten erstrecken kann,

00:47:42.829 --> 00:47:47.126
gab es eine Spalte, die gar nicht so oft wirklich befüllt ist.

00:47:47.186 --> 00:47:51.746
Das war so ein bisschen ein special Ding. Gerade je nachdem, wie man die benutzt hat,

00:47:51.806 --> 00:47:54.686
steht da vielleicht auch nie was drin in dieser Spalte.

00:47:54.746 --> 00:47:58.426
Deswegen wollte ich nicht, dass diese Spalte immer 200 Pixel wegnimmt,

00:47:58.486 --> 00:48:03.498
obwohl da vielleicht gar nix drinsteht. weil da eben auch teilweise mit Hyphen und keine Ahnung was,

00:48:03.926 --> 00:48:08.026
der Content kann sehr dynamisch sein, dass sich das viel zu schnell umbricht.

00:48:08.606 --> 00:48:10.906
Und den Mix, den ich gemacht hab, war ...

00:48:11.726 --> 00:48:18.280
Die Width auf Max Content zu setzen und zusätzlich eine Max Width von ...

00:48:18.866 --> 00:48:20.782
220 Pixeln anzugeben.

00:48:21.421 --> 00:48:25.066
Mhm. Und dann hatte ich genau den Effekt, den ich haben wollte,

00:48:25.126 --> 00:48:29.992
dass wenn wirklich in gar keiner von diesen Zellen der Spalte was drinsteht, war die so minimal.

00:48:30.206 --> 00:48:36.346
Wie sie sein konnte, also dann ausgerichtet an dem Spaltenkopf, an dem Titel.

00:48:36.770 --> 00:48:41.965
Und wenn da jetzt aber sehr viel Content drinsteht, dann wurde es trotzdem jetzt nicht breiter als 220 Pixel.

00:48:42.901 --> 00:48:46.686
Okay. Und mein Kopf hatte dann auch wieder so ein bisschen die Probleme,

00:48:46.726 --> 00:48:51.326
gleichzeitig eine Worth Max Content zu benutzen und eine Max Worth, die festgesetzt ist.

00:48:51.366 --> 00:48:52.767
Aber hat super funktioniert.

00:48:53.806 --> 00:48:54.505
Ja.

00:48:57.025 --> 00:49:04.906
All right, dann haben wir jetzt noch hier drinstehen als letzten Punkt bei Shapes & Graphics die

00:49:04.906 --> 00:49:09.706
View Transition API. Da habe ich auch letztens mich mal mit dem Peter ein bisschen drüber unterhalten.

00:49:09.706 --> 00:49:11.870
Ich glaube, das war auch nicht Vorbesprechung, das war ...

00:49:11.986 --> 00:49:15.466
Nee, genau. Und ich habe gesagt, Chep, das ziehe ich mir als nächstes rein.

00:49:16.254 --> 00:49:23.942
Und? Weißt du, was ich mir nicht reingezogen habe seitdem? Long story short, wir haben ja schon ein bisschen drüber gesprochen, also die sind schon echt

00:49:24.005 --> 00:49:32.786
cool, aber es gibt einfach noch so Use Cases, die ich hab das zwischenzeitlich auch gesehen, dass die, glaub ich, die auch ins Visier genommen haben.

00:49:32.786 --> 00:49:36.266
Aber es gibt Use Cases, wo die eben noch nicht so gut funktionieren.

00:49:36.266 --> 00:49:39.786
Und ich persönlich bin da an Grenzen gestoßen,

00:49:40.299 --> 00:49:49.226
als ich, als ich eben mehrere Dinge auf der Seite hatte, die alle irgendwie zu ihrer, zu ihrem Zeitpunkt,

00:49:49.226 --> 00:49:52.946
an dem sie meinten, dass sie fertig sind, eben View Transitions angestoßen haben,

00:49:52.946 --> 00:49:57.206
um Dinge weich in den nächsten Zustand übergehen zu lassen.

00:49:58.583 --> 00:50:04.433
Und da ist eben das Problem, dass die View-Transition immer nur bezogen auf die gesamte Seite funktioniert.

00:50:04.433 --> 00:50:12.257
Und wenn dann irgendwo zwischendurch noch mal ein Element eine Transition anstößt, dann grätscht die,

00:50:12.779 --> 00:50:17.136
in die globale View-Transition rein, und dann funktioniert das eben nicht mehr.

00:50:17.532 --> 00:50:24.433
Das heißt also, was man braucht, ist idealerweise immer nur eine View-Transition, die auf einmal läuft.

00:50:24.433 --> 00:50:33.513
Und alle anderen dürfen dann nicht laufen. Buchführen drüber, ob die gerade läuft oder nicht, und das muss man aber eben einbauen, und dann darf eben keine weitere angestoßen werden, bis,

00:50:34.160 --> 00:50:38.653
eben die erste nicht fertig ist. Nein, nein, nein, also es kann doch nicht angehen, dass meine tolle Komponente,

00:50:39.147 --> 00:50:42.550
irgendwie über irgendwelche globalen Belange buchführt, das ist doch voll anti.

00:50:43.495 --> 00:50:48.313
Ja, deswegen hast du ja wahrscheinlich eine View Transition, einen View Transition Manager,

00:50:49.148 --> 00:50:55.633
eine zentrale Instanz, an die du dich wendest, und der macht das dann. Also ich habe ja eine View Transition Manager

00:50:55.633 --> 00:50:57.899
Aber ich weiß ja nicht, wie das bei dir aussieht.

00:50:58.619 --> 00:51:03.525
Mit Decorators oder ohne? Immer mit Decorators, du kennst mich doch. Ja.

00:51:03.669 --> 00:51:07.273
Meine Frage ist, gibt's da wirklich keinerlei Containment-Mechanismus,

00:51:07.313 --> 00:51:08.793
den man da draufwerfen kann?

00:51:08.833 --> 00:51:12.753
Wir haben vorhin drüber gesprochen, dass man alles Mögliche containen kann.

00:51:12.793 --> 00:51:15.193
Warum gibt's kein View-Transition-Containment?

00:51:15.233 --> 00:51:20.953
Also, gibt's halt noch nicht. Es sind ja noch ein paar Dinge offen bei den View-Transitions.

00:51:20.993 --> 00:51:23.798
Momentan gibt's hier nur sozusagen für ...

00:51:24.185 --> 00:51:29.533
Also innerhalb der aktuellen Seite, und dann eben für Single-Page-Applications

00:51:29.533 --> 00:51:40.992
dementsprechend, was noch ansteht, ist eben für Multi-Page-Applications das auch zu implementieren, das kann man auch schon in Chrome hinter Flex testen,

00:51:41.191 --> 00:51:48.013
und ich habe gesehen, dass die eben auch diese Probleme mit eben mehrere Bereiche

00:51:48.013 --> 00:51:52.767
parallel transizieren, dass die auch ein Thema sind.

00:51:53.587 --> 00:51:58.133
Stelle ich mir aber auf jeden Fall nicht so ganz einfach vor.

00:51:59.384 --> 00:52:03.849
Insgesamt. Nee, konzeptionell halt nicht. Ich glaub, das ist, ähm,

00:52:04.984 --> 00:52:10.952
also, was ich an CSS ganz spannend finde, ist, man kann da eher durch die Features durchscrollen,

00:52:11.034 --> 00:52:13.887
die da echt so aus der Benutzung rausgefallen sind.

00:52:14.337 --> 00:52:19.674
Also, das Beste sind irgendwie so die Media Features, Media Types, nee, nee, äh, Media Types, genau.

00:52:19.714 --> 00:52:22.781
Also so Print, Screen und Handheld und so Zeug.

00:52:23.015 --> 00:52:24.069
Mhm, ja, TV.

00:52:24.555 --> 00:52:27.594
Ja, TV, genau, genau. Wo man halt echt einfach so sieht,

00:52:27.594 --> 00:52:30.874
der damals aktuelle Tech-Tree einfach in CSS reingeflossen ist

00:52:30.874 --> 00:52:34.874
und einfach so da reingewirkt hat und sich das da jetzt so festgebissen hat

00:52:34.874 --> 00:52:36.874
und so als Rodiment noch drin ist,

00:52:37.203 --> 00:52:40.777
obwohl das einfach keinerlei Kategorien mehr sind, die in der heutigen Welt noch irgendwie Sinn ergeben.

00:52:41.983 --> 00:52:45.287
Und ich hab ja manchmal so den Eindruck, dass ich bei so gewissen,

00:52:45.908 --> 00:52:47.874
CSS-Features, die heute reinkommen, mich halt so frage,

00:52:47.874 --> 00:52:51.874
sind die nicht arg aus unserer Smartphone-Sicht geboren?

00:52:52.300 --> 00:52:55.874
Weil, was du jetzt ja beschreibst als Problem, du hast mehrere View-Transitions und Integration

00:52:55.874 --> 00:52:58.565
und die Grätsche und sich gegenseitig irgendwie in die Parade.

00:52:59.348 --> 00:53:03.165
Um das Problem zu haben, brauchst du ein hinreichend komplexes User-Interface.

00:53:03.494 --> 00:53:06.914
Wenn du nur eine Spalte hast, eine Page auf so einer Mobile-App,

00:53:06.954 --> 00:53:08.414
dann hast du das halt nicht.

00:53:08.454 --> 00:53:13.275
Und dann löst das natürlich auch super dein Problem, dass du aussehen willst wie eine native App.

00:53:13.614 --> 00:53:18.574
Ja, ja, nee, also die sind schon gut, aber man muss eben auch so ein bisschen so ...

00:53:18.766 --> 00:53:20.603
Wie das halt immer so ist, ne?

00:53:20.936 --> 00:53:24.024
Also man muss ein bisschen aufpassen. Sind die gut? Also wirklich?

00:53:24.798 --> 00:53:33.334
Oder ist das ein konzeptionelles Versagen, zu sagen, aha, es gibt jetzt halt hier genau diese Devices und die sind heutzutage der wichtigste Part und so, das mag ja alles sein,

00:53:33.334 --> 00:53:36.334
aber dass man dann sozusagen dieses Feature auf eine Art und Weise konzipiert,

00:53:36.334 --> 00:53:37.572
dass dieses Problem passieren kann.

00:53:39.561 --> 00:53:47.366
So ähnlich wie du halt die annahme fortschreit ein tv gerät wird immer eine distinct abzugrenzende art von device sein mit seinem crt bildschirm und zeug.

00:53:49.653 --> 00:53:58.331
Wo man ja eventuell auch einfach irgendwie mal in den fernseher hätte reingucken können sich startrekette angucken können und so auf die idee kommen können möglicherweise ist eine andere zukunft was bildschirme angeht denkbar.

00:53:59.780 --> 00:54:16.411
Ja, also ich sag mal so, wenn du verschiedene Komponenten auf der Seite hast, die, sagen wir mal, Dinge nachladen und die dann eine Transition gerne ausführen möchten, also von Zustand alt auf Zustand neu, dann hast du das eigentlich idealerweise ja auf jeder Plattform.

00:54:16.813 --> 00:54:21.171
Also, weil du hast ja auf Mobile nur ein anderes Arrangement,

00:54:21.171 --> 00:54:23.971
aber im Grunde die gleichen Elemente drauf.

00:54:24.168 --> 00:54:29.596
So sollte man ja Responsive Web Design idealerweise machen, dass man eben nicht Teile weglässt.

00:54:30.280 --> 00:54:35.171
Also, das ist ja immer ärgerlich, wenn irgendwie auf Mobile Dinge gar nicht da sind.

00:54:37.230 --> 00:54:43.171
Deswegen, und auch wenn sie eben nicht im Viewport sind, dann werden sie das, wenn sie halt irgendwie als Teil

00:54:43.171 --> 00:54:46.171
ihres Update-Mechanismus ja auch View Transitions triggern,

00:54:46.171 --> 00:54:58.169
außer du hängst da noch irgendwelchen Intersection Observer dran, der dann sagt so hey, diese Komponente ist ja sowieso nicht da, die braucht keine Transition, die musst du dann auch nicht triggern, dann sitzt du wieder auf Mobile, ein Vorteil.

00:54:58.610 --> 00:55:00.690
Helfen mir vielleicht iFrames ganz einfach.

00:55:02.851 --> 00:55:10.746
Äh, na ja, iframes helfen in bestimmten Belangen, und in anderen Belangen sind die halt wieder totale Scheiße, ne?

00:55:10.998 --> 00:55:14.103
Natürlich sind die total scheiße, aber ich meine, um das spezifische Problem zu lösen.

00:55:15.420 --> 00:55:19.960
Ja. Also, ich meine, wenn ich jetzt wirklich vernestete Dokumente habe,

00:55:20.020 --> 00:55:23.840
so iframes in iframes und Zeug, und die View-Transitions da drin abfeuere.

00:55:23.900 --> 00:55:28.160
Ich glaub, ich muss mir das Zeug mal anschauen und genau diese Dinge ausprobieren.

00:55:28.220 --> 00:55:31.415
Gibt ja auch noch so Grauen wie Object Tags und so, Konsorten.

00:55:31.520 --> 00:55:36.654
Also, ich glaube, ich bin insgesamt immer noch ein Proponent dieser neuen API.

00:55:38.720 --> 00:55:43.520
Ich finde die ganz gut. Aber wie das eben so bei vielen Dingen so ist,

00:55:44.220 --> 00:55:48.600
völlig ohne Sinn und Verstand kann man dann Dinge nicht benutzen.

00:55:49.950 --> 00:55:52.714
Ich hätte vielleicht als 1.0 die Multi-Page-Version netter gefunden.

00:55:54.740 --> 00:55:58.320
Ja. Wenn du jetzt wirklich irgendwie so gehst, du, ich will die größte Anzahl an Web-Applikationen

00:55:58.602 --> 00:56:01.617
maximal irgendwie aufwerten können, mit irgendwie ein paar Zeilen.

00:56:01.860 --> 00:56:07.320
Dann wären doch wirklich diese ganz klassischen MVC-Backendlastigen Geschosse,

00:56:07.847 --> 00:56:11.980
die wären damit so instantan sehr viel besser geworden, sehr viel Single-Page-Appiger,

00:56:12.020 --> 00:56:15.020
ohne dass man das ganze Ding in React neu schreiben muss.

00:56:15.060 --> 00:56:19.320
Versus du jetzt eine bessere Möglichkeit hast, das Ding in React neu zu schreiben.

00:56:19.360 --> 00:56:22.480
Vielleicht hätte man ohne diesen Schritt das machen können.

00:56:22.520 --> 00:56:26.770
An sich schon, aber es wird wohl seinen Grund haben, dass das noch nicht freigeschaltet ist.

00:56:27.634 --> 00:56:35.400
Yes. Ja, aber wenn, wenn ihr coole Demos habt, die ihr damit gebaut habt, also da gibt's ja durchaus echt richtig geiles Zeugs,

00:56:35.400 --> 00:56:43.802
schickt sie doch rüber oder schmeißt sie uns als Links in unseren Community Slack, zu dem wir euch herzlich einladen.

00:56:44.666 --> 00:56:56.000
Und dann bringt ihr uns alle mal hier schön zum Staunen. Ansonsten haben wir uns gerade Chat technisch darauf verständigt, dass wir hier einfach mal einen Cut machen.

00:56:57.431 --> 00:57:04.255
Weil CSS ja dann doch umfangreicher ist. Und genau, wir machen das dann wie beim State of HTML.

00:57:05.191 --> 00:57:14.364
Dass wir dann einfach uns noch mal zusammen raufen. Und den nächsten Teil uns dann zu Gemüte führen.

00:57:14.734 --> 00:57:17.164
Du, aber dann reden wir wirklich über das geplante Thema, ne?

00:57:17.821 --> 00:57:22.081
Nicht abschweifen hier mit obskuren Event-Händlern und so. Auf gar keinen Fall.

00:57:22.141 --> 00:57:24.978
Bis dahin haben wir uns ja auch alle die API angeschaut.

00:57:25.338 --> 00:57:26.221
Ja, haben wir.

00:57:26.842 --> 00:57:27.895
Ja, schön die Hausaufgaben machen.

00:57:29.236 --> 00:57:34.221
Genau. Okay. Genau, wir können ja mal gucken, wann wir das machen,

00:57:34.261 --> 00:57:37.221
denn wir haben auf jeden Fall auch bald wieder Gäste da.

00:57:37.261 --> 00:57:43.521
Und der Peter und ich müssen ja noch wirklich unseren dritten Teil und letzten hoffentlich von State of HTML machen.

00:57:43.561 --> 00:57:46.721
Zu dem du natürlich auch herzlich eingeladen bist, Vanessa.

00:57:46.926 --> 00:57:49.438
Genau, aber das steht ja auch noch auf unserer To-do-Liste.

00:57:51.490 --> 00:58:00.061
Wir gucken mal. Was jetzt nicht bedeutet, falls hier gerade jemand zuhört und sich gedacht hat, heute ist der Moment, an dem werde ich schreiben. Ich habe ein Thema.

00:58:00.061 --> 00:58:04.507
Trotzdem gerne schreiben. Wir haben noch ganz viel Platz. Ja, auf jeden Fall. Genau.

00:58:05.261 --> 00:58:08.861
Nee, da freuen wir uns. Und wir finden immer Platz. Das ist doch alles kein Problem.

00:58:09.495 --> 00:58:10.661
Genau. Wir sind sehr nett.

00:58:11.394 --> 00:58:16.021
Ich weiß nicht, ob ich dazu jetzt ja sagen kann. Dazu brauchen wir eine externe Expertenmeinung.

00:58:16.021 --> 00:58:19.981
Ich bin die externe Expertenmeinung. Ihr seid sehr nett.

00:58:20.711 --> 00:58:35.529
Super. Dankeschön. Genau und ihr Hörerinnen und Hörer seid auch sehr nett, vor allem, dass ihr so schön immer zuhört bei uns. Vielen Dank dafür und genau, habt eine schöne Woche und dann hören wir uns nächste Woche wieder.

00:58:36.249 --> 00:58:38.419
Bis dann. Tschüssi. Tschüss.

00:58:39.120 --> 00:59:01.680
Music.

00:59:01.672 --> 00:59:06.056
Musik.