WEBVTT

NOTE
Podcast: Wo wir sind ist vorne.
Episode: Jäger der verlorenen CSS-Features – Kapitel I
Publishing Date: 2020-06-28T14:00:48+02:00
Podcast URL: https://wowirsindistvorne.show
Episode URL: https://wowirsindistvorne.show/jaeger-der-verlorenen-css-features-kapitel-i/

00:00:00.000 --> 00:00:05.400
 Wo wir sind, ist vorne, Folge 10. Heute geht's um sechs CSS-Träume, die bislang unerfüllt geblieben sind.

00:00:05.400 --> 00:00:21.600
 Herzlich willkommen bei Wo wir sind, ist vorne.

00:00:21.600 --> 00:00:28.420
 Frontend-Fakten-Frotzelein, der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.

00:00:30.000 --> 00:00:40.100
 Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jongleur Konstantin Groß.

00:00:56.780 --> 00:00:58.540
 Was ist das denn?

00:00:58.540 --> 00:01:03.500
 Ich dachte, da wir mal diese zehn Folgen voll machen, können wir mal am Anfang ein bisschen Applaus gleich mal machen, oder?

00:01:03.500 --> 00:01:05.200
 Damit habe ich nicht gerecht.

00:01:05.200 --> 00:01:08.980
 Liebe CSS-Coderinnen.

00:01:08.980 --> 00:01:11.680
 Und wir hatten direkt gleich mal einen Aussetzer, irgendwie wieder von zwei Sekunden.

00:01:11.680 --> 00:01:14.200
 Naja, da machen wir jetzt einfach trotzdem weiter, oder?

00:01:14.200 --> 00:01:15.020
 Natürlich.

00:01:15.020 --> 00:01:16.860
 Hallo, liebe ... oder nicht?

00:01:16.860 --> 00:01:17.600
 Ja doch, doch.

00:01:17.600 --> 00:01:18.160
 Oder wer?

00:01:18.160 --> 00:01:18.780
 Okay, gut.

00:01:18.780 --> 00:01:19.100
 Sprich, sprich.

00:01:19.100 --> 00:01:29.360
 Ja, ich wollte heute einsteigen mit einem merkwürdigen Witz, der mir mal erzählt wurde, für den ich lang gebraucht habe, um ihn zu verstehen, weil es ja heute um CSS geht.

00:01:29.360 --> 00:01:33.700
 CSS, ich weiß nicht, ob ich den hoffen will, hatten wir den schon mal? Wir werden es gleich rausfinden.

00:01:33.700 --> 00:01:35.940
 CSS ist kein Kannibalismus.

00:01:38.160 --> 00:01:49.380
 Also, wie gesagt, CSS ist kein Kannibalismus. Wer weiß, was es damit auf sich haben könnte, schreibt es in die Kommentare, nachdem ihr auf die Glocke gedrückt habt.

00:01:49.380 --> 00:01:50.320
 Ach nee, es gibt ja gar keine Glocke.

00:01:50.320 --> 00:01:50.640
 Fall auf die Glocke.

00:01:50.640 --> 00:01:52.700
 Aber wir haben jetzt erklärt bekommen, wofür die Glocke ist bei YouTube.

00:01:54.500 --> 00:01:55.960
 Fangen wir mal an mit dem Bier, oder?

00:01:55.960 --> 00:01:56.700
 Ja.

00:01:56.700 --> 00:02:08.520
 Das Bier heute ist gesponsert, wollte ich erst mal sagen, also mein Bier zumindest ist heute gesponsert von den WWS-IV-Fanboys, von denen ich bis heute Morgen auch nicht wusste, dass es sie gibt.

00:02:08.520 --> 00:02:18.440
 Ich frage mich, gibt es vielleicht dann irgendwann auch nochmal die Konkurrenzgruppe WWS-IV-Ultras? Das gibt es bei manchen anderen Podcasts von Tim Pridloff.

00:02:18.840 --> 00:02:25.680
 Also, ich bin gespannt, aber Fanboys nehme ich auch. Ich würde aber auch Fangirls nehmen oder Fan-Divers und Fan-Fan, was es alles so gibt.

00:02:26.640 --> 00:02:35.840
 Deswegen trinke ich heute gesponsert von den WWS-IV-Fanboys ein Braustübelpilsner Feinhopfick aus Darmstadt.

00:02:35.840 --> 00:02:42.540
 An der Stelle vielen Dank, Stefan, den Spender. Das ist, glaube ich, momentan das einzige Mitglied der WWS-IV-Fanboys.

00:02:42.540 --> 00:02:44.680
 Aber vielleicht sind es auch noch mehr, das weiß ich nicht.

00:02:44.680 --> 00:02:46.220
 Hat noch Potenzial, auf jeden Fall.

00:02:46.220 --> 00:02:47.580
 Habe ich nicht nachgefragt.

00:02:48.620 --> 00:02:52.400
 Okay, aber dann würde ich sagen, ich habe hier so eine Plop-Flasche.

00:02:52.400 --> 00:02:54.020
 Eine Bügelflasche. Oh, schick, schick.

00:02:54.020 --> 00:02:54.580
 Genau.

00:02:54.580 --> 00:02:57.400
 Bei mir gibt es einen Estrella-Damm aus Barcelona.

00:02:57.400 --> 00:03:00.340
 Und dann würde ich sagen ...

00:03:00.340 --> 00:03:01.220
 Ich mache mal ... Moment.

00:03:01.220 --> 00:03:04.080
 Oh, das klang gut.

00:03:04.080 --> 00:03:04.480
 Zum Wohl.

00:03:04.480 --> 00:03:05.480
 Dann zum Wohl.

00:03:05.480 --> 00:03:12.200
 Jetzt haben wir gar nicht den Leuten Zeit gelassen, irgendwie ...

00:03:12.200 --> 00:03:16.300
 Selber eins aufzumachen, na ja, gut, wir reden ja jetzt schon irgendwie wieder drei Minuten.

00:03:16.300 --> 00:03:25.360
 Aber ihr dürft selbstverständlich zwischendurch Pause drücken und dann euer eigenes Bier aufmachen.

00:03:25.360 --> 00:03:26.460
 Oder ein Saft.

00:03:26.460 --> 00:03:27.740
 So, okay.

00:03:27.740 --> 00:03:28.200
 Oder ein Wasser.

00:03:28.200 --> 00:03:28.800
 Alles klar.

00:03:28.800 --> 00:03:30.040
 Ja, genau.

00:03:30.040 --> 00:03:30.420
 So.

00:03:30.420 --> 00:03:37.980
 Und dann würden wir jetzt ja vielleicht schon zur ersten Rubrik kommen, nämlich ...

00:03:41.200 --> 00:03:45.360
 BWS-IV präsentiert die Retrospektive.

00:03:45.360 --> 00:03:49.360
 Ja, was ist passiert?

00:03:49.360 --> 00:03:57.260
 Mein Windows hat mit irgendeinem Update vor einer Woche oder so den alten Edge durch Edge-Chromium ersetzt.

00:03:57.260 --> 00:03:58.060
 Endlich.

00:03:58.060 --> 00:04:05.520
 Und wenn ich dann nicht der Einzige bin, bei dem das passiert ist, und ich glaube, das läuft jetzt schon sogar seit irgendwie April oder Mai eigentlich, der Rollout,

00:04:05.520 --> 00:04:10.820
 dann haben wir jetzt inzwischen noch mehr Rechner, die standardmäßig einen Evergreen-Browser.

00:04:11.200 --> 00:04:13.460
 auf dem System installiert haben.

00:04:13.460 --> 00:04:15.360
 Ich glaube, das ist auch kurz ein Applaus wert.

00:04:18.720 --> 00:04:28.460
 Nee, also das macht mich echt glücklich, dass wir langsam jetzt eigentlich nur noch Evergreen-Browser haben, außer vielleicht im Firmenumfeld, wo noch irgendwelche IEs rumgeistern.

00:04:29.400 --> 00:04:32.160
 Aber damit kann man doch recht ganz gut arbeiten inzwischen.

00:04:32.160 --> 00:04:35.820
 Dann habe ich noch ein ... oder wolltest du dazu noch was sagen?

00:04:35.820 --> 00:04:38.560
 Du hast so zustimmend genickt, der Moritz.

00:04:38.680 --> 00:04:40.400
 Ich stimme auf jeden Fall zu.

00:04:40.400 --> 00:04:46.800
 Ein Follow-up zur letzten Folge, wo ich so ein bisschen großkotzig meinte, sag nicht Jay Query.

00:04:46.800 --> 00:04:53.500
 Zwei Tage später oder sowas habe ich ein YouTube-Video von der Muttersprachnamen gehört, der Australier war.

00:04:53.500 --> 00:04:59.160
 Und natürlich Jay Query sagte, und teilweise auch im US-Amerikanischen Englisch sagt man auch Query.

00:04:59.620 --> 00:05:05.600
 Da wollte ich einfach nochmal von meiner Großspurigkeit zurückrudern und sagen, ja, sagt's, wie ihr wollt.

00:05:05.600 --> 00:05:07.640
 Sag, was ihr wollt.

00:05:07.640 --> 00:05:09.340
 Sag einfach immer, was ihr wollt.

00:05:09.340 --> 00:05:10.060
 Genau.

00:05:10.460 --> 00:05:15.140
 Und dann habe ich zu guter Letzt noch ein Follow-up, nämlich tatsächlich mal eine Retro, was ich denn so gemacht habe.

00:05:15.140 --> 00:05:22.260
 Ich bin gerade dabei, ein Kundenprojekt mit ganz viel Legacy-Code zu überarbeiten und das alles mal ein bisschen sicherer zu machen.

00:05:22.260 --> 00:05:26.840
 Hauptsächlich MySQL-E umzuschreiben auf PDO.

00:05:26.840 --> 00:05:35.500
 Weil gut, mit MySQL-E könnte man zwar auch Prepared-Statements machen, aber die sind aus Gründen, die sich der Moritz vielleicht denken kann, damals nicht so umgesetzt worden.

00:05:37.500 --> 00:05:41.520
 Und, ja, wenn ich schon dabei bin, es umzuschreiben, schreibe ich es gleich auf PDO um.

00:05:41.520 --> 00:05:43.760
 Ist jetzt eher Backend, aber …

00:05:43.760 --> 00:05:45.240
 Ich weiß nicht mal, wovon du sprichst.

00:05:45.240 --> 00:05:48.340
 Nein, ich, können wir im Nachgeplänkel noch drüber reden.

00:05:48.340 --> 00:05:55.340
 Es gibt da auch zwei Klassen, die zur PDF-Generierung benutzt werden, TC-PDF und FPDI.

00:05:55.340 --> 00:06:00.400
 Und die habe ich dann auch gleich aktualisiert, noch ein bisschen was anpassen müssen, dass die laufen in der neuen Version.

00:06:00.400 --> 00:06:07.140
 Und dann habe ich zum Testen einfach mal ein paar Smileys eingegeben und das bringt uns dann wieder zurück, den Bogen zu Folge 7.

00:06:07.140 --> 00:06:11.180
 Ich bin so oldschools, ich sage noch Smileys.

00:06:11.180 --> 00:06:16.300
 Ich nutze ja auch noch hier Doppelpunkt, Minus, Klammer zu und so als Smiley.

00:06:16.300 --> 00:06:21.060
 Emoji ist natürlich der Bogen zu unserer Folge Nummer 7, wer die noch nicht gehört hat.

00:06:22.140 --> 00:06:30.920
 Und ich wollte da eigentlich nur mal gucken, so und habe festgestellt, in den PDFs funktionieren die natürlich nicht, weil da ja die Fonts entsprechend anders zusammengebaut werden und so.

00:06:31.560 --> 00:06:34.320
 Habe gedacht, ja, muss doch möglich sein, die durch Grafiken zu ersetzen.

00:06:34.320 --> 00:06:39.160
 Und dachte, ich mache das nur mal eben kurz, weil es ist ja eigentlich gar nicht beauftragt.

00:06:39.160 --> 00:06:41.440
 Das hat mich nur interessiert, wie das technisch möglich ist.

00:06:41.440 --> 00:06:46.080
 Und schwuppdiwupp sitze ich da seit zwei Tagen und bastle mein erstes Composer-Package,

00:06:46.660 --> 00:06:52.620
 um eine Library zu haben, mit der man Emojis in Grafiken übersetzen kann, in PHP.

00:06:52.620 --> 00:07:00.260
 Gibt es demnächst wahrscheinlich auf Packagist, wie das Ding heißt, über Composer.

00:07:00.260 --> 00:07:04.140
 Ist aber noch nicht fertig geworden, deswegen sage ich jetzt auch nicht, wie es heißt, weil sonst schnappt mir vielleicht noch jemand den Namen weg.

00:07:04.700 --> 00:07:08.940
 Aber kannst du mir sagen, warum möchtest du Emojis in Grafiken?

00:07:08.940 --> 00:07:11.320
 Für die PDF-Generierung.

00:07:11.320 --> 00:07:12.920
 Ach so.

00:07:12.920 --> 00:07:18.340
 Also die werden aus HTML zusammengebaut und in den PDFs, da sind ja keine TTF-Fonds,

00:07:18.340 --> 00:07:24.580
 sondern die sind dann umgewandelt in solche, in irgendwelche Binärdaten, keine Ahnung.

00:07:24.580 --> 00:07:26.500
 Und da sind halt alles mit Emojis, das funktioniert nicht.

00:07:26.500 --> 00:07:29.960
 Also bis vor ein paar Versionen von der Library ging, glaube ich, auch UTF-8 noch nicht richtig.

00:07:29.960 --> 00:07:34.360
 Da hatte ich mal Probleme mit chinesischen Schriftzeichen bei der Rechnungsgenerierung.

00:07:34.880 --> 00:07:38.080
 Also ist nicht ganz so einfach, deswegen als Grafiken ist man da auf der sicheren Seite.

00:07:38.080 --> 00:07:41.540
 Ach so, okay, ja, im PDF kann ich gut nachvollziehen.

00:07:41.540 --> 00:07:48.100
 Und in dem Zuge habe ich dann entdeckt, dass man in Gmail-Adressen inzwischen Emojis benutzen kann.

00:07:48.100 --> 00:07:50.060
 In den Adressen selbst?

00:07:50.060 --> 00:07:55.400
 Also wenn du jetzt zum Beispiel example.gmail.com als Adresse hast, dann kannst du ja bei Gmail,

00:07:55.400 --> 00:08:02.180
 kannst du ja ein Pluszeichen nach deiner eigentlichen Adresse eingeben und dann irgendwie für irgendwelche Spam-Registrierungen oder so,

00:08:02.180 --> 00:08:04.540
 dass du nachvollziehen kannst, wer deine Adresse weitergegeben hat.

00:08:04.700 --> 00:08:08.040
 Kannst du ja example-plus-fuba-at-gmail.com auch machen.

00:08:08.040 --> 00:08:10.460
 Und zumindest da habe ich getestet mit meiner Adresse.

00:08:10.460 --> 00:08:16.300
 Also du kannst wirklich example-plus-zungensmiley-at-gmail.com eine E-Mail hinschicken und die kommt auch tatsächlich an.

00:08:16.300 --> 00:08:19.460
 Also dann die Aubergine für deinen Pornhub-Account zum Beispiel.

00:08:19.460 --> 00:08:24.320
 Genau, genau das. Weiß ich nicht, warum man das unbedingt machen sollte, aber man kann es tun.

00:08:24.320 --> 00:08:32.480
 Es gibt ja auch Emoji-Domains inzwischen. Also du kannst dann irgendwie aubergine-at-smiley.com oder was weiß ich.

00:08:33.000 --> 00:08:34.420
 Ja, fand ich interessant.

00:08:34.420 --> 00:08:35.580
 Ja, cool.

00:08:35.580 --> 00:08:37.080
 Und das war es eigentlich auch von mir.

00:08:37.880 --> 00:08:39.100
 Ja, meine Retro.

00:08:39.100 --> 00:08:44.160
 Ich habe ein paar nachtragende, nee, nachtragende Elemente, wollte ich gerade sagen.

00:08:44.160 --> 00:08:49.520
 Ein paar Nachträge, Nachträge, Nachtrag, was ist denn der Plural von Nachtrag?

00:08:49.520 --> 00:08:51.400
 Nachtrage, Nachträge?

00:08:51.400 --> 00:08:52.260
 Nachträge.

00:08:52.260 --> 00:08:53.280
 Nachträge.

00:08:53.280 --> 00:09:18.060
 Ich habe ein paar Nachträge für, auch zu vorherigen Folgen. Und zum Beispiel, das erste ist die römischen Zahlen bei Listen. Da hat ein Kollege sich nochmal bei mir gemeldet und hat mir, naja, hat versucht mir zu erklären, warum das denn bei 3999 aufhört, beziehungsweise wir haben dann auch gemeinsam versucht, eine Erklärung zu finden.

00:09:19.280 --> 00:09:38.660
 Interessanterweise ist genau das im Standard spezifiziert. Also in dem Fall beziehe ich mich auf, wir werden es in den Shownotes haben, den WG-Standard. Also ich weiß nicht genau, ob das im W3C-Standard, doch, ich glaube im W3C-Standard habe ich es auch gesehen und da war das auch so.

00:09:38.660 --> 00:10:00.040
 Und zwar, interessanterweise sind da diese römischen Ziffern spezifiziert und zwar als Beispiele 1, 2, 3 und dann geht es interessanterweise weiter, dann kommt Punkt, Punkt, Punkt in dieser Tabelle und dann kommen 3999 und 4000 und 4001 als Beispiele.

00:10:00.420 --> 00:10:13.280
 Und die Schreibweise, die da gewählt wurde, oder ich habe mich jetzt nicht in der Tiefe mit der Theorie da auseinandergesetzt, ist, dass da dann so ein Strich über den Symbolen ist.

00:10:13.580 --> 00:10:21.020
 Also die Schreibweise für 4000 wäre dann beispielsweise mit über Strichen i und v.

00:10:23.020 --> 00:10:35.680
 Ich nehme mal an, also bei mir im Browser sieht es auch, die Striche sind nicht über den Zeichen und ich nehme mal an, dass es diese Schreibweise vielleicht gar nicht gibt oder vielleicht nur in manchen Schriftarten und es deswegen vielleicht nie implementiert wurde.

00:10:35.680 --> 00:10:45.580
 Also im Standard ist das drin, es ist explizit spezifiziert, wie Zahlen über, also ab 4000 aussehen sollen, aber irgendwie hat es keinen Browser implementiert.

00:10:46.140 --> 00:10:59.040
 Was mir jetzt gerade auch noch aufgefallen ist, interessanterweise, dass diese Speck, in der ich mich da befinde, das ist eine Seite mit der kompletten Speck, die ist so groß, dass mein Browser gerade Probleme hat, das Ding zu rendern.

00:10:59.040 --> 00:11:05.140
 Ich kann nicht mal Text markieren in Echtzeit, sondern muss dann immer ein paar Sekunden warten, bis das erscheint, so groß ist die Seite.

00:11:05.480 --> 00:11:07.840
 Gut, ich habe auch ein altes Laptop, das gerade auseinanderfällt.

00:11:07.840 --> 00:11:16.900
 Ja, also das noch als Nachtrag, es ist richtig spezifiziert, wir haben auch noch einen Link dazu, aber offenbar haben es die Browserhersteller nicht eingebaut.

00:11:16.900 --> 00:11:23.120
 Aber interessant, dass sich da dann mal alle Browserhersteller einig waren, das nicht umzusetzen.

00:11:23.780 --> 00:11:43.380
 Ja, wir haben auch gemutmaßt, dass das wahrscheinlich, dass das vielleicht ein Update ist von der Speck, die es früher gab und einfach es nie jemand angepasst hat, weil, naja, das hat halt für früher immer, ich weiß auch nicht, ob es schon jemals einen Fall gegeben hat, wo jemand an diese Grenze gestoßen ist, aber ich finde, es ist eine interessante.

00:11:44.740 --> 00:11:46.160
 Also das ist der erste Nachtrag.

00:11:46.160 --> 00:11:57.440
 Also wir hatten da gerade schon wieder einen Aussetzer drin, vorhin auch schon mal vielleicht noch dazu sagen, wir haben heute ein bisschen technische Probleme, wenn da irgendwie zwischendrin mal eine Sekunde Moritz fehlt, dann liegt das nicht an euren Kopfhörern.

00:11:57.440 --> 00:12:01.760
 Nein, das liegt dann an mir, weil ich einfach dann nichts gesagt habe.

00:12:01.760 --> 00:12:05.200
 Zwischendrin Sekundenschlaf.

00:12:05.200 --> 00:12:13.060
 Ja, damit ist es nicht zu spaßen, Narkolepsie gibt es ja, also Leute, naja, müssen wir nicht weiter darauf eingehen.

00:12:13.720 --> 00:12:30.460
 Der zweite Nachtrag ist, auch ein anderer Kollege hat mich darauf hingewiesen, ich hatte es, ich weiß gar nicht, war das die letzte oder die vorletzte Folge, wo ich dieses One Line of Code vorgestellt habe und auch gesagt habe, es gab mal dieses 140 Bytes Projekt, aber ich finde da die Beispiele nicht mehr, habe ich gesagt.

00:12:31.540 --> 00:12:40.280
 Ich wurde darauf hingewiesen, dass man die bei GitHub noch finden kann, bei den Gists und habe da auch noch einen Link dazu, der noch in die Shownotes kommt.

00:12:40.500 --> 00:12:53.280
 Also da gibt es noch einige von den damaligen 140 Bytes Beispielen, wo innerhalb von, mit 140 Bytes halt wirklich crazy JavaScript Stuff gemacht wird, dann am Ende nicht mehr lesbar, aber krasse Sachen, die in den Tweet passen.

00:12:53.940 --> 00:12:58.000
 Also der Link sei dann an der Stelle noch nachgereicht, da kann man da nochmal reingucken.

00:12:58.000 --> 00:13:01.800
 Ich habe jetzt nicht genau geguckt, was da für Beispiele sind, aber es sind sehr, sehr, sehr viele.

00:13:01.800 --> 00:13:05.520
 Also es ist eine lange Liste bei GitHub, die man da runter scrollen kann mit den ganzen Forks.

00:13:06.860 --> 00:13:12.760
 Und das, ah, und dann genau, jetzt sind wir mit dem Nachtragen, mit dem Nachtragen sind wir jetzt fertig.

00:13:12.760 --> 00:13:24.280
 Ich habe aber noch einen Retro-Punkt, nämlich, weil es auch mich persönlich betrifft, die Bootstrap 5 ist raus, die erste Alpha-Version.

00:13:24.280 --> 00:13:32.160
 Und ich glaube, die größte Änderung daran ist, dass sie nicht mehr auf jQuery setzen beim JavaScript, sondern komplett alles, wenn wir leist.

00:13:33.880 --> 00:13:36.080
 Das überrascht mich jedes Mal, wenn es einfach so kommt.

00:13:36.080 --> 00:13:38.920
 Ja, weil, also das ist tatsächlich auch ein Applaus wert.

00:13:38.920 --> 00:13:43.440
 Also heutzutage jQuery, ja, sehr gute Entscheidung.

00:13:43.440 --> 00:13:45.240
 Ja, finde ich auch.

00:13:45.240 --> 00:13:51.500
 Und was ich auch sonst noch so in der Ankündigung gelesen habe, war, dass sie zum Beispiel das Grid-System jetzt aber nicht komplett umwerfen wollen.

00:13:51.500 --> 00:13:53.560
 Da wollen sie erst mal, das soll erst mal so bleiben.

00:13:53.560 --> 00:13:58.580
 Und ich glaube, auch auf Flexbox basiert, finde ich auch okay bei so einem Framework, dass man sagt, wir werfen jetzt nicht alle.

00:14:00.080 --> 00:14:09.880
 Aber ich glaube, das mit dem jQuery rauswerfen ist schon ein Schritt, der ist groß genug, dass es auch eine neue Major-Version rechtfertigt, sage ich mal.

00:14:09.880 --> 00:14:11.280
 Ich finde, das ist eine gute Sache.

00:14:11.280 --> 00:14:16.360
 Wir bleiben da dran, gucken mal, wann das dann wirklich auch final rauskommt.

00:14:16.360 --> 00:14:17.820
 Ich finde es aber cool.

00:14:18.180 --> 00:14:24.640
 Und da das auch bei mir im Einsatz ist, bin ich mal gespannt, wann wir dann da drauf irgendwie auch umziehen können.

00:14:24.640 --> 00:14:29.480
 Jo, damit ist meine Retro am Ende.

00:14:29.480 --> 00:14:31.200
 Mensch, wir sind ja richtig schnell heute.

00:14:31.200 --> 00:14:32.260
 Wahnsinn.

00:14:32.260 --> 00:14:36.520
 Dann kommt die ...

00:14:36.520 --> 00:14:39.540
 Die Property der Woche.

00:14:41.540 --> 00:14:45.560
 Ja, und die ist heute ein kleines Firefox 78 Special.

00:14:45.560 --> 00:14:51.660
 Firefox 78 Release Date ist am, ist am oder war am, je nachdem, wann man die Folge hört, 30.06.

00:14:51.660 --> 00:14:53.360
 Ich bräuchte so einen Sound zu.

00:14:53.360 --> 00:14:59.060
 Das haben wir schon mehrfach, ich glaube, es ist schon dreimal jetzt die Situation, wo wir ein Oh oder so gebraucht hätten.

00:14:59.060 --> 00:15:01.760
 Wir müssen die Library noch ein bisschen erweitern.

00:15:01.760 --> 00:15:08.640
 Genau, das ist von Aufnahmedatum abgesehen der nächste Dienstag, das heißt in vier Tagen.

00:15:09.520 --> 00:15:16.220
 Und da gibt es einige Neuerungen und ich habe jetzt mal was rausgepickt, einmal zum CSS und einmal zum JavaScript.

00:15:16.220 --> 00:15:20.280
 Und beim CSS sind das die Pseudoklassen Is und Where.

00:15:20.280 --> 00:15:21.940
 Hast du dich damit schon mal auseinandergesetzt?

00:15:21.940 --> 00:15:24.560
 Nee, tatsächlich gar nicht.

00:15:24.560 --> 00:15:26.360
 Dann kannst du auch noch was lernen.

00:15:26.360 --> 00:15:27.980
 Ich lerne von mir ständig.

00:15:27.980 --> 00:15:37.300
 Und genau, also Is und Where, verlinke ich auch einen Artikel dazu, von dem ich auch die Information bezogen habe zum Teil.

00:15:38.920 --> 00:15:45.780
 Kommt jetzt wie gesagt in Firefox 78, ist aber auch schon im Safari Tag Preview 106 von Mitte Mai schon drin.

00:15:46.660 --> 00:15:51.540
 Und bei Chrome ist zumindest Is, soweit ich weiß, hinter einem Flag versteckt.

00:15:51.540 --> 00:15:59.060
 Da kann man ein bisschen nachhelfen, das zu beschleunigen, indem man die Bug-Tickets mit einem Sternchen versieht.

00:15:59.060 --> 00:16:02.100
 Da werde ich die Links auch in die Shownotes posten.

00:16:02.100 --> 00:16:03.480
 Ich lese die jetzt nicht vor.

00:16:04.420 --> 00:16:12.040
 Aber man kann tatsächlich so ein bisschen, je mehr Leute da auf Sternchen klicken, umso eher sehen die Chromium-Entwickler, aha, das ist ein viel gewünschtes Feature.

00:16:13.540 --> 00:16:23.160
 Ja, wie dem auch sei, ist, war vorher schon als Minus-Mod-Minus-Any verfügbar, als Pseudo-Element, äh Pseudo-Klasse, Entschuldigung.

00:16:24.300 --> 00:16:26.060
 Und ist jetzt eben als Is verfügbar.

00:16:26.060 --> 00:16:27.620
 Und was macht das Ganze?

00:16:27.620 --> 00:16:32.880
 Man kann damit viel kompakter komplexe Selektoren schreiben.

00:16:32.880 --> 00:16:41.160
 Also wenn ich jetzt zum Beispiel alle Paragraphs in Header, Main und Footer jeweils irgendwie stylen will, oder vielleicht sogar noch mit dem Hover,

00:16:41.640 --> 00:16:49.060
 Dann hätte ich jetzt also Header, P-Hover, Main, P-Hover und Footer, P-Hover, ähm, das ist natürlich relativ lang.

00:16:49.060 --> 00:16:55.080
 Klassischerweise, wenn man jetzt den Pre-Prozessor nutzt, LESS oder SAS, ähm, kann man die Verschachtelung nutzen.

00:16:55.080 --> 00:17:01.960
 Und, äh, das ist, erlaubt mir das so ein bisschen ohne Verschachtelung zwar, ähm, in normalem CSS zu nutzen.

00:17:01.960 --> 00:17:10.660
 Das heißt, ich kann sagen, Doppelpunkt ist, Klammer auf, dann schreibe ich einen Selektor, zum Beispiel Header, Komma, Main, Komma, Footer, Klammer zu und dann P-Hover.

00:17:11.320 --> 00:17:23.060
 Und dann wird das, ja, dieses Query ausgeführt und steht dann quasi für ein Element und das nachfolgende Query wird, äh, das Selektor wird ganz normal ausgeführt.

00:17:23.060 --> 00:17:32.380
 Und, ähm, genau, das ist einfach eine einfache Schreibweise, dass man sich Tipperei spart und das Ganze auch ein bisschen übersichtlicher ist.

00:17:32.380 --> 00:17:38.800
 Ähm, die Spezifizität ist ein wichtiger Punkt. Ich hab, ich hab schon wieder Spezifizität gesagt, oder?

00:17:38.800 --> 00:17:39.820
 Ja.

00:17:41.000 --> 00:17:53.980
 Flashback, äh, zu unserer Folge Nummer 8, wer die noch nicht gehört hat. Wir spannen heute viele Bogen. Äh, die Spezifität, ich glaub, ich krieg das auch nicht raus, also für mich wird das immer die Spezifizität bleiben. Ähm, die richtet sich nach dem

00:17:53.980 --> 00:18:22.960
 Danke, danke, danke, danke, danke, danke, danke, danke, danke.

00:18:22.960 --> 00:18:28.640
 Wie die sich, äh, wie die sich, äh, wie die sich, äh, verändert, äh, je nachdem, was ich da reinschreibe, äh, das ist ganz nett, das mal zu sehen.

00:18:29.040 --> 00:18:43.140
 Und dann gibt's, äh, und dann gibt's noch, äh, das macht, äh, das macht im Endeffekt genau das Gleiche. Also, die Syntax ist genau die Gleiche und die Funktionalität ist genau die Gleiche, aber, weder die Pseudoklasse selbst noch die Argumente, die ich ihr übergebe, haben eine Auswirkung auf die Spezifität.

00:18:44.080 --> 00:18:45.080
 Ja, sehr gut.

00:18:45.080 --> 00:19:02.540
 Das heißt, ähm, das ist gedacht für, für Regeln, die einfach überschreibbar sein sollen, ja. Also, wenn ich irgendwelche Standardwerte übergebe, zum Beispiel in, in Style Sheets für Normalisierung, es gibt diese Normalized CSS und, äh, ja, diverse, oder, oder ich schreib selber ein Base CSS, äh, das ich dann für meinen Dienst irgendwie überschreiben will.

00:19:02.760 --> 00:19:32.260
 Und dann hab ich ja das Problem, wenn ich das dann, äh, festgelegt habe, dann muss ich das mindestens mit der gleichen Spezifität überschreiben oder ich muss Important nutzen, was ich ja möglichst vermeiden will, äh, zum Beispiel für SVG-Farben hab ich irgendwo als Beispiel gesehen, ja, dass man bei, bei SVGs, die, die man Inline einbaut und die man irgendwie färben will, dass man da die Stroke-Farbe, die Standardfarbe irgendwie festlegt und dann muss ich das natürlich immer mit der entsprechenden Spezifizität, ah, jetzt ist das wieder daneben gegangen, Spezifität, ähm, überschreiben, das kann ich mir daneben sparen.

00:19:32.760 --> 00:19:53.800
 Genau, das soweit zum CSS, gibt natürlich noch einige andere Änderungen, äh, die ich mir jetzt aber ersparen will und euch, und, äh, es hat sich aber auch in der JavaScript-Engine was getan, äh, Firefox JavaScript-Engine heißt ja Spider-Monkey und die erhält mit dem nächsten Release eine komplett neue RegEx-Engine.

00:19:54.700 --> 00:20:13.460
 äh, komplett neu ist eigentlich nicht ganz richtig, äh, das war vorher ein Fork von, von der, äh, ERAG-Exp-Library, die in, in V8 benutzt wird, V8 ist ja die, die, äh, JS-Engine von Chromium, das heißt, die haben das einfach geforkt und haben das für ihre Bedürfnisse angepasst, um das in, in Spider-Monkey zu integrieren,

00:20:13.700 --> 00:20:26.380
 aber es wurde immer schwerer, neue Features, äh, da reinzubringen und zu updaten, weil natürlich die, die Stände der Repositories immer weiter auseinander gelaufen sind und die Anpassungen, die da für die Firefox-Engine gebraucht wurden,

00:20:27.060 --> 00:20:44.840
 immer, immer mehr wurden und dann hat man einen neuen Ansatz gewählt und zwar einen sogenannten Shim-Layer erstellt zwischen Spider-Monkey und ERAG-Exp, das heißt, man kann einfach ERAG-Apps, wer hat sich denn diesen Namen ausgedacht, ERAG-Exp, ähm, benutzen, ohne das anzupassen

00:20:44.840 --> 00:21:13.620
 und das greift dann über so einen Zwischenlayer auf die, auf die, auf die APIs aus dem, aus der anderen JS-Engine, äh, zu und, äh, das Schöne ist, dass, äh, das Mozilla-Team auch, äh, den Upstream, also das eigentliche Repository von ERAG-Exp, äh, mit Patches, äh, versorgt und ich finde, das ist ein tolles Beispiel, ähm, ja, für die Zusammenarbeit, ähm, ja, trotz, trotz, trotz Konkurrenz, sowohl es eigentlich zwei unterschiedliche konkurrierende Browser-Hersteller sind, aber am Ende profitieren alle davon, also Open-Source lohnt sich.

00:21:13.620 --> 00:21:42.400
 Und ganz kurz noch, was das für neue Features sind, also das sind alle Features, die mit ECMAScript 2018, äh, vorgestellt wurden, das heißt, Look-Behind, ähm, das heißt, das, das, was nur gematcht wird, wenn, wenn, wenn was anderes vorausgeht, ähm, ähm, Dot-All-Flags, das ist dieser S-Modifier, den ich hinten bei REG-Ex, äh, anstellen kann, äh, das heißt, der entscheidet, dass, äh, das Punktzeichen, äh, auch Zeilenumbrüche mitmatcht, was normalerweise nicht der Fall ist, äh, dann Unicode-Property-Escapes,

00:21:42.400 --> 00:21:58.300
 Das sind benammte Unicode-Zeichengruppen, ähm, wo man zum Beispiel bestimmte Sprachen rausfiltern kann, also ich möchte alle, äh, alle Zeichen folgen, die, äh, die der chinesischen Sprache entsprechen, oder der japanischen, oder koreanischen, oder hindu, oder was weiß ich,

00:21:58.400 --> 00:22:07.400
 Oder eben zum Beispiel auch Emojis, weil wir es vorhin von Emojis hatten, also es gibt da auch, äh, Match-Gruppen im, äh, Unicode-Bereich, mit denen ich rausfiltern kann, äh, ja, das ist ein Emoji.

00:22:07.680 --> 00:22:15.340
 Geht übrigens bei PHP nicht so schön, wie das jetzt bei, äh, JavaScript der Fall ist, weil das diese Match-Gruppen nur sehr eingeschränkt unterstützt.

00:22:15.340 --> 00:22:25.420
 Aber das nur am Rande. Äh, und zu guter Letzt, named Capture Groups, das heißt, ich kann, ähm, eine Gruppe, mit runden Klammern mache ich die ja auf, äh, ganz normal aufmachen,

00:22:25.560 --> 00:22:35.600
 Und ganz vorne schreibe ich Fragezeichen, dann wie ein HTML-Tag, Spitze, Klammer auf, Spitze, Klammer zu, und dazwischen dann irgendeinen, äh, Namen, den ich mir aussuche, ja, also Name, sag ich jetzt mal,

00:22:35.600 --> 00:22:45.960
 Und kann dann die Gruppen benamen, und dann später, wenn ich die mit, äh, mit exec ausführe, die RegEx, äh, über Matches, Punkt, Groups, Punkt, und dann den Namen der Gruppe drauf zugreifen.

00:22:45.960 --> 00:22:55.220
 Und das finde ich eine ziemliche Erleichterung, weil man bei sehr komplexen RegEx-Ausdrücken schon das Problem hat, dass man irgendwann nicht mehr durchblickt, welche Klammer ist denn jetzt,

00:22:55.220 --> 00:23:05.800
 Welche Gruppe, und dann habe ich vielleicht noch Non-Matching-Groups drin, äh, die dann am Schluss nicht mehr drin sind, also, da kommt man schon mal gerne durcheinander, und mit dem Naming kann man sich da sicherlich einiges an Zeit und Nerven sparen.

00:23:05.800 --> 00:23:20.940
 Auf die Gefahr, dass ich mich wiederhole, äh, ein, ich glaube, ich habe das schon mal erzählt, aber ein ehemaliger Kollege von uns hat immer gesagt, ähm, wenn du ein Problem hast, und dann RegEx, also, das versuchst du mit RegEx zu lösen, hast du zwei Probleme.

00:23:22.880 --> 00:23:35.660
 Ich kenne das als, äh, ich, I had 99 Problems, and then I used RegEx, and I had 100 Problems, ja, ähm, ja, aber es ist, ist natürlich auch ein mächtiges Werkzeug, und wenn man sich da ein bisschen die Arbeit erleichtern kann, umso besser.

00:23:36.920 --> 00:23:52.680
 Absolut, also, ganz kurz noch, äh, CSS is und where, ich habe mir das jetzt kurz parallel mal angeschaut, echt coole Geschichte, gefällt mir, gefällt mir wirklich gut, möchte ich gerne jetzt einsetzen, sofort, weil, ich glaube, da kannst du, da kannst du echt eine Menge Zeilen CSS sparen, äh, also, das.

00:23:52.760 --> 00:23:58.980
 Also, nachher gleich, gleich direkt mal die Bug-Tickets, äh, mit Sternchen versehen, damit das in Chrome auch ganz schnell kommt.

00:23:58.980 --> 00:24:06.700
 Genau, sofort, ihr macht das jetzt auch, zu Hause an den Empfangsgeräten, sofort, äh, sofort hier Sternchen für unsere Tickets, die wir gerne machen.

00:24:06.700 --> 00:24:11.820
 Man kann ja, der Spam-Spot ist heute recht lang, das heißt, man kann das ja während des Spam-Spots machen, den kann man ja nebenher hören.

00:24:11.820 --> 00:24:16.300
 Ah, wegen dem Spam-Spot, ähm, hätte ich auch eine Alternative gehabt, aber dann machen wir die nächstes Mal.

00:24:16.600 --> 00:24:17.360
 Nee, du kannst auch.

00:24:17.360 --> 00:24:17.740
 Kein Problem.

00:24:17.740 --> 00:24:17.920
 Ja?

00:24:17.920 --> 00:24:21.940
 Kein Problem, nee, lass uns, wir nehmen mal den Spam-Spot heute noch.

00:24:21.940 --> 00:24:24.160
 Gut, okay, dann lasse ich ihn laufen.

00:24:24.160 --> 00:24:32.760
 Warte mal, stopp, stopp, stopp, wir müssen vielleicht kurz nochmal erklären für die Hörer, die das heute zum ersten Mal hören, oder die uns vielleicht heute zum ersten Mal hören, was denn der Spam-Spot eigentlich ist.

00:24:32.760 --> 00:24:36.620
 Das hätte ich hinterher gemacht, aber erzähl, dann darfst du mal erklären, ich habe ihn mal die letzte Mal erklärt.

00:24:36.620 --> 00:24:36.900
 Ich, ich, ich, ich, ich, ich erkläre mal.

00:24:36.900 --> 00:24:46.200
 Der Spam-Spot ist, äh, in, in sehr gut vertont, weil der Konstantin, ähm, eigentlich gerne mal Synchronsprecher oder Radiomoderator geworden wäre.

00:24:46.420 --> 00:24:48.040
 Nein, also das unterstelle ich ihm nicht einfach mal.

00:24:48.040 --> 00:24:52.180
 Er wäre auf jeden Fall ein guter geworden, ein, ein, äh, vor allem ein guter Spot-Moderator.

00:24:52.180 --> 00:25:01.100
 Ähm, der Spam-Spot ist eine echte Spam-Mail, die wir bekommen haben, beziehungsweise, ich weiß nicht, ob es in dem Fall wirklich eine ist, die wir bekommen haben oder zugesendet bekommen haben.

00:25:01.100 --> 00:25:05.820
 Ähm, das, es kommt auch vor, dass wir sowas zugesendet bekommen, wenn ihr eine geile Spam-Mail habt, schickt sie uns.

00:25:06.340 --> 00:25:14.300
 Und, äh, er vertont das dann, also es ist, äh, selbst, selbst vertonte Spam-Mails auf die ganz eigene Art und Weise und sehr unterhaltsam, kann ich auf jeden Fall nur sagen.

00:25:14.300 --> 00:25:17.280
 Und heute etwas länger, aber nicht weniger unterhaltsam.

00:25:17.860 --> 00:25:18.600
 Spam-Spot ab.

00:25:47.680 --> 00:25:48.460
 Sensor-Dienste.

00:25:48.460 --> 00:25:53.380
 Mehr als das haben wir vollständige Speicherauszüge von diesen Daten.

00:25:53.380 --> 00:25:57.720
 Wir sind uns ihrer kleinen und großen Geheimnisse bewusst.

00:25:57.720 --> 00:26:01.420
 Oh ja, sie haben das ganze heimliche Leben.

00:26:01.420 --> 00:26:07.020
 Wir haben geguckt und aufgezeichnet, wie sie Spaß auf Webseiten für Erwachsene hatten.

00:26:07.020 --> 00:26:11.480
 Herrgott, was für Geschmack und Leidenschaften haben sie.

00:26:12.360 --> 00:26:18.800
 Aber die interessanteste Sache ist, dass wir sie zeitweise auf der Webkamera ihres Geräts aufgenommen haben.

00:26:18.800 --> 00:26:23.660
 Die Webcam wurde mit dem synchronisiert, was sie gerade sich angesehen haben.

00:26:24.360 --> 00:26:32.980
 Ich bin der Meinung, dass sie nicht wollen, dass ihre Kameraden und Angehörigen alle ihre Geheimnisse sehen und natürlich die Person, die ihnen am nächsten ist.

00:26:33.800 --> 00:26:48.320
 Ab dem Zeitpunkt, in dem dieser Bericht gelesen ist, funktioniert der Timer.

00:26:48.320 --> 00:26:52.980
 Sie haben 48 Stunden, um das oben gedachte Geld einzuzahlen.

00:26:52.980 --> 00:26:58.600
 Sobald dieses Geld auf unserem Konto ist, löschen wir alle kompromittierende Materiale.

00:26:58.600 --> 00:27:02.380
 Betrüblicherweise, sie müssen über ihre Sicherheit denken.

00:27:02.380 --> 00:27:07.360
 Wir hoffen, dass sie diese Geschichte lehrt ihnen, ihre Geheimnisse korrekt zu bewahren.

00:27:08.060 --> 00:27:09.320
 Geben sie Acht auf sich.

00:27:09.320 --> 00:27:14.240
 Zu Risiken und Nebenwirkungen lesen sie die Dokumentationen oder fragen sie ihren Systemadministrator.

00:27:15.420 --> 00:27:19.340
 Also der Spam, der wird immer länger und auch technisch immer gewiefter.

00:27:19.340 --> 00:27:23.960
 Also die erkennen, sobald ich fertig gelesen habe und lassen dann den Timer laufen.

00:27:23.960 --> 00:27:24.980
 Das ist schon ...

00:27:24.980 --> 00:27:27.620
 Nein, der Timer funktioniert dann. Das heißt nicht, dass er läuft.

00:27:27.620 --> 00:27:31.680
 Ach, diese Leidenschaft, Mensch.

00:27:31.680 --> 00:27:36.020
 Also ich kann jetzt auf jeden Fall nochmal sagen, ich wusste jetzt nicht genau, was kommt.

00:27:36.020 --> 00:27:38.200
 Das ist eine Spam-Mail, die ich bekommen habe.

00:27:38.200 --> 00:27:43.340
 Und falls ihr wissen wollt, was ich so auf was für Erwachsenen-Seiten, die ich mich so rumtreibe,

00:27:43.340 --> 00:27:45.040
 da müsst ihr einfach die Kollegen mal anschreiben.

00:27:45.420 --> 00:27:49.020
 Die können euch das sagen, für nur 983 Dollar.

00:27:49.020 --> 00:27:52.000
 Das ist auch so eine komische Summe, oder?

00:27:52.000 --> 00:27:53.520
 Ja, das ist der Wechselkurs wahrscheinlich.

00:27:53.520 --> 00:27:53.800
 So spezifisch.

00:27:53.800 --> 00:27:57.500
 Man müsste jetzt mal gucken, welcher Wechselkurs eine gerade Zahl ergibt,

00:27:57.500 --> 00:28:00.080
 dann weiß man, aus welchem Land die Erpresser kommen.

00:28:00.080 --> 00:28:02.000
 Ja, aber meinst du wirklich?

00:28:02.000 --> 00:28:02.860
 Man kann es natürlich auch lassen.

00:28:02.860 --> 00:28:07.220
 Ich würde echt, also ich kann es mir nicht so richtig erklären,

00:28:07.220 --> 00:28:09.100
 wie kommen die auf 983 Dollar?

00:28:09.100 --> 00:28:11.400
 Also ich habe die, das war ja wirklich ein deutscher Text, ne?

00:28:11.400 --> 00:28:12.960
 Also erst einmal, die wollen Dollar.

00:28:12.960 --> 00:28:14.660
 Warum wollen die Dollar und nicht Euro?

00:28:15.420 --> 00:28:17.080
 Und dann 983?

00:28:17.080 --> 00:28:18.840
 Na gut, vielleicht sind das irgendwie…

00:28:18.840 --> 00:28:22.060
 Also ich meine, man hört ja, dass das durch ein Übersetzungsprogramm gejagt wurde.

00:28:22.060 --> 00:28:24.960
 Vielleicht hat das gleichzeitig auch noch den Wechselkurs umgerechnet.

00:28:24.960 --> 00:28:25.620
 Man weiß es nicht.

00:28:28.520 --> 00:28:35.000
 Das neue Feature von Google Translate, jetzt auch mit Wechselkurs.

00:28:35.540 --> 00:28:38.540
 Aber genug der Mutmaßungen, machen wir weiter.

00:28:38.540 --> 00:28:43.020
 Hier ist WWS IV mit dem Tagesthema.

00:28:49.460 --> 00:28:50.500
 Jetzt wird es ernst.

00:28:50.500 --> 00:28:55.060
 Jetzt kommt der Teil, woraus kommt, dass ich mich wieder nicht richtig vorbereitet habe.

00:28:55.060 --> 00:28:58.920
 Aber ich denke mir immer, wenn ich euch sage, dass ich mich nicht vorbereitet habe,

00:28:58.920 --> 00:29:00.140
 dann ist es auch kein Problem.

00:29:00.140 --> 00:29:01.420
 Finde die Kritik sanfter aus.

00:29:01.420 --> 00:29:05.060
 Wir haben gar nicht ausgemacht, wer das Thema vorstellt, anspricht.

00:29:05.060 --> 00:29:06.080
 Weiß nicht, willst du, soll ich?

00:29:06.800 --> 00:29:11.260
 Da, glaube ich, das erste Thema des Themas von mir ist, fange ich mal damit an.

00:29:11.260 --> 00:29:16.940
 Also wie schon ganz am Anfang angekündigt, es geht um CSS, das wir gerne hätten und das

00:29:16.940 --> 00:29:21.640
 noch bislang ein feuchter Traum geblieben ist, ein feuchter WWS IV Traum.

00:29:21.640 --> 00:29:24.600
 Dann möchte ich, bevor du loslegst, noch ganz kurz was einschieben.

00:29:24.600 --> 00:29:26.580
 Wir haben ganz vergessen am Anfang…

00:29:26.580 --> 00:29:35.560
 Wir haben ganz vergessen am Anfang unsere Hörerinnen und Hörer zu loben, weil die Interaktion nämlich

00:29:35.560 --> 00:29:37.100
 viel, viel besser geworden ist schon.

00:29:37.100 --> 00:29:38.900
 Also das hat mich richtig gefreut.

00:29:38.900 --> 00:29:43.440
 Ich habe, wie schon öfter mal in der Vergangenheit, geschrieben so, hey, wir haben das und das

00:29:43.440 --> 00:29:45.680
 als nächstes Thema, schreib doch mal was und wir reden drüber.

00:29:45.680 --> 00:29:50.540
 Und es kamen diesmal tatsächlich auch mehrere Antworten zurück auf Twitter und auch die Kommentare

00:29:50.540 --> 00:29:51.220
 auf dem Blog und so.

00:29:51.220 --> 00:29:53.220
 Also es wird und das freut uns sehr.

00:29:53.220 --> 00:29:56.860
 Also es macht natürlich umso mehr Spaß, das Ganze hier zu betreiben, wenn da auch was

00:29:56.860 --> 00:29:59.780
 zurückkommt und es kam sogar Bier zurück jetzt inzwischen.

00:29:59.780 --> 00:30:03.280
 Und Kommentare, also immer her damit und super.

00:30:04.320 --> 00:30:07.740
 Vielleicht liegt es auch am Thema, wer weiß, wer weiß.

00:30:07.740 --> 00:30:10.800
 Oder vielleicht hast du nur diesmal besser gefragt, was weiß ich, keine Ahnung.

00:30:10.800 --> 00:30:14.420
 Wir freuen uns auf jeden Fall, dass wir Dinge von euch gehört haben.

00:30:14.420 --> 00:30:20.060
 Ich kann jetzt schon mal sagen, wir haben insgesamt so viele Themen gesammelt, die wir…

00:30:20.060 --> 00:30:27.200
 Wir haben jetzt gerade wieder irgendwie drei Sekunden aussetzen, aber ich glaube, man weiß, was du gesagt hast.

00:30:27.540 --> 00:30:28.540
 Wir haben so viele Themen gesammelt, dass…

00:30:28.540 --> 00:30:30.260
 Wir haben so viele Themen gesammelt, dass…

00:30:30.260 --> 00:30:31.600
 Ich weiß, was ich gesagt habe.

00:30:31.600 --> 00:30:33.240
 Das reicht ja.

00:30:33.240 --> 00:30:34.120
 Ich kann auch nochmal anfangen.

00:30:36.180 --> 00:30:41.320
 Wir haben so viele Themen gesammelt, dass wir, dass das zu viel ist für eine Folge.

00:30:41.320 --> 00:30:46.940
 Das heißt, wir werden ziemlich sicher noch eine Folge machen mit den weiteren Themen.

00:30:46.940 --> 00:30:53.120
 Also falls ihr jetzt uns ein Thema genannt habt und das jetzt heute nicht drankommt, es kommt noch dran.

00:30:53.120 --> 00:30:56.000
 Nur nicht jetzt in dieser Folge, sondern dann wahrscheinlich in der nächsten.

00:30:56.000 --> 00:30:58.640
 Oder wer weiß, vielleicht machen wir sogar noch eine dritte Folge.

00:30:59.320 --> 00:31:01.300
 Dann aber vielleicht noch mit was anderem dazwischen.

00:31:01.300 --> 00:31:13.700
 Wer weiß, wir sind damit noch nicht durch nach heute, weil es gibt einfach, haben wir dann gemerkt, sehr, sehr viele Sachen, die wir uns wünschen würden, aber die es in der Form noch nicht gibt oder die noch zu weit weg sind.

00:31:13.700 --> 00:31:20.100
 Manche von den Sachen, die wir hier haben, sind teilweise schon anspezifiziert, aber halt noch in keinem Browser verfügbar.

00:31:20.100 --> 00:31:21.620
 Genau.

00:31:22.160 --> 00:31:23.980
 Und ich fange jetzt einfach mal an.

00:31:23.980 --> 00:31:33.080
 Und zwar, was viel gewünscht war, wo auch schon viel drüber gesprochen wurde und auch schon, das ist, das Thema ist auch schon lang unterwegs, ist der Parent Selector in CSS.

00:31:33.080 --> 00:31:44.300
 Also ein Selector, mit dem ich nicht nach innen gehe von meinem HTML-Baum aus, sondern nach außen, mit dem ich auf ein Eltern-Element zugreifen kann und das stylen kann.

00:31:45.640 --> 00:31:51.300
 Der erste Artikel, den ich da, oder der älteste Artikel, den ich zu dem Thema gefunden habe, ist tatsächlich von 2008.

00:31:51.300 --> 00:32:05.400
 Der hat eine Syntax vorgeschlagen mit einem Größerzeichen oder sogar mit Ausrufezeichen Größerzeichen, um nicht Parent zu nehmen.

00:32:05.400 --> 00:32:07.020
 Fand ich auch ganz interessant.

00:32:07.020 --> 00:32:09.840
 Meinst du das Kleinerzeichen?

00:32:09.840 --> 00:32:12.780
 Weil Größerzeichen ist ja Direct Child.

00:32:13.320 --> 00:32:16.900
 Entschuldigung, ja, genau, ich meine das, ja, ich meine das Kleinerzeichen.

00:32:16.900 --> 00:32:19.320
 Korrekt, falsch gesagt.

00:32:19.320 --> 00:32:26.040
 Macht ja auch Sinn, also, ne, Direct Child nach rechts zeigen und wenn ich Parent will, eben nach links zeigen.

00:32:26.040 --> 00:32:29.320
 Jetzt habe ich wieder so einen peinlichen Fehler gemacht, Mensch.

00:32:29.320 --> 00:32:32.700
 Aber ich bin sofort hier Konstantin to the rescue.

00:32:32.700 --> 00:32:37.100
 Ist sofort, sofort zur Stelle, Konstantin rettet mich jedes Mal, wenn ich Quatsch rede.

00:32:38.340 --> 00:32:49.340
 Genau, so, der Artikel, den ich da gefunden habe, ich weiß nicht, vielleicht gab es das auch schon noch früher, aber der älteste, den ich gefunden habe dazu, war, ist von Sean Inman von 2008, der eben da diese Syntax vorgeschlagen hat.

00:32:50.040 --> 00:32:59.740
 Und dann gab es irgendwie witzigerweise 2010 nochmal so ein Boost, wo zwei bekannte Leute aus der Webszene darüber geblockt haben.

00:32:59.740 --> 00:33:07.060
 Und zwar Remy Sharp hat damals etwas vorgeschlagen wie so eine Art Pseudoselektor, nämlich Doppelpunkt Parent.

00:33:08.720 --> 00:33:19.140
 Dann nehme ich mal an, nur auf den direkten Parent zugreifen kann, also nicht irgendeinen, sondern nur den, ja genau, das direkte Eltern-Element, also das nächste Element, eins oben drüber.

00:33:19.140 --> 00:33:27.720
 Und interessanterweise, das habe ich jetzt vorhin auch erst gelesen, hat Jonathan Snook 2010 auch Has vorgeschlagen.

00:33:28.580 --> 00:33:36.640
 Und Has, das habe ich dann gesehen, das ist ja schon quasi, das ist schon tatsächlich in Überlegung, das wirklich richtig umzusetzen.

00:33:36.640 --> 00:33:43.460
 Genau, es gibt eine Seite dafür bei MDN tatsächlich schon mal, also es ist als Experimental Technology gekennzeichnet.

00:33:44.980 --> 00:33:52.040
 Normalerweise hat aber noch nicht mal Firefox das implementiert, also wenn man sich diese Matrix da anschaut, Browser-Compatibility, da ist alles rot.

00:33:52.040 --> 00:33:56.760
 Aber es ist wohl schon mal in Überlegung, sonst würde es diese Seite nicht geben.

00:33:56.760 --> 00:34:01.740
 Ja, es ist auch bei Canary Use schon mit drin und da ist halt auch alles rot.

00:34:01.740 --> 00:34:05.500
 Ja, also es ist Selector's Level 4 Working Draft aktuell.

00:34:05.500 --> 00:34:08.560
 Ja, es wird Zeit, dass das kommt.

00:34:08.560 --> 00:34:14.900
 Ich habe schon öfter gehört, naja, dass es wohl Probleme gibt mit der Performance beim Rendering.

00:34:14.980 --> 00:34:27.480
 Und dass das der Grund ist, warum das noch nicht umgesetzt ist, weil wohl das Problem ist, dass man, dass jede CSS-Eigenschaft, die den Parent Selector hat, quasi nochmal auf alles Einfluss nehmen kann, was drumherum ist.

00:34:27.480 --> 00:34:29.500
 Also auf alles bis zum Root-Element.

00:34:29.500 --> 00:34:34.880
 Und dass das eben Rendering-Performance-Probleme machen würde, wenn man das umsetzt.

00:34:35.520 --> 00:34:52.240
 Vielleicht ist das der Grund, das ist jetzt nur eine Mutmaßung, weil ich mich mit den Technikalitäten da im Hintergrund nicht auskenne mit dem Rendering, warum man diesen Weg gewählt hat, dass man eben nicht sagt, ich mache den Selector und sage dann und davon möchte ich das Parent Element, sondern dass man mit Has eigentlich den umgekehrten Weg geht.

00:34:52.340 --> 00:34:57.180
 Das heißt, ich wähle ein Element und ich gucke dann, ob dieses Element irgendwas enthält.

00:34:57.180 --> 00:35:06.920
 Weiß ich nicht, ob das damit zusammenhängt, weil ich habe mir so überlegt, was fände ich denn eigentlich den geschickteren Weg, weil unter Parent Selector stellt man sich halt eben vor, ich kann explizit das Parent auswählen.

00:35:07.440 --> 00:35:10.040
 Aber Has ist ja eigentlich so ein bisschen von hinten durch die Brust ins Auge.

00:35:10.040 --> 00:35:13.460
 Weiß nicht, ob das technische Gründe hat oder ja.

00:35:13.460 --> 00:35:15.180
 Ach, ist mir am Ende egal.

00:35:15.180 --> 00:35:16.540
 Im Endeffekt ist es egal, genau.

00:35:16.540 --> 00:35:28.000
 Ich muss jetzt auch dazu sagen, die Sachen, die wir heute vorschlagen, da ist mir ziemlich egal, wie realistisch das ist oder wie einfach oder schwer das umzusetzen ist.

00:35:28.000 --> 00:35:32.800
 Ich bin da komplett der CSS-Anwender und sage, ich will es einfach haben, setzt mir das um.

00:35:32.800 --> 00:35:38.960
 Und naja gut, die Syntax sollte am Ende halbwegs verständlich sein, aber mit Has käme ich jetzt auch klar.

00:35:38.960 --> 00:35:49.540
 Wobei das Kleinerzeichen ist, finde ich jetzt auch nicht unelegant, finde ich auch relativ selbsterklärend, finde ich, wenn man es im CSS sich anschauen würde.

00:35:49.540 --> 00:35:54.000
 Aber ja, da gibt es, wie gesagt, es gibt einige Artikel dazu, die sich schon damit beschäftigt haben.

00:35:54.000 --> 00:36:00.900
 Es gibt auch einen CSS-Tricks-Artikel, der verschiedene Sachen da auflistet, die schon mal vorgeschlagen wurden.

00:36:00.900 --> 00:36:03.820
 Ich sage einfach nur, haben wollen.

00:36:03.820 --> 00:36:09.100
 Hast du Beispiele für Anwendungsfälle? Sonst hätte ich jetzt noch zwei oder drei.

00:36:09.100 --> 00:36:12.560
 Warte, ich muss kurz gucken.

00:36:12.560 --> 00:36:26.160
 Ich meine, was mir noch einfällt, wo ich das gerne gehabt hätte, wäre, wenn ein Input-Element invalid ist, dass ich dann zum Beispiel das Label dazu stylen kann.

00:36:26.160 --> 00:36:27.980
 Ja, den Fall hatte ich auch tatsächlich schon.

00:36:27.980 --> 00:36:29.000
 Der klassische Fall.

00:36:31.500 --> 00:36:34.780
 Also ich meine, da gibt es ja auch den Pseudo-Selector-Invalid, glaube ich.

00:36:34.780 --> 00:36:37.600
 Ja, aber da kriege ich dann halt wieder das Parent-Element nicht.

00:36:37.600 --> 00:36:43.860
 Genau, und da möchte ich dann unter Umständen auch zum Beispiel das komplette Label rot hinterlegen oder so, irgendwie sowas.

00:36:43.860 --> 00:36:46.400
 Das wäre sehr, sehr praktisch für so einen Fall.

00:36:46.400 --> 00:36:51.060
 Ja, damit, also ich, wenn du nichts mehr dazu hast.

00:36:51.500 --> 00:37:01.100
 Ich hätte noch so ein paar Beispiele, also zum Beispiel A-Doppelpunkt-Has, Klammer auf, dann direkter Child-Selector-Image für einen Link, der ein Bild enthält.

00:37:01.100 --> 00:37:08.280
 Oder H1-Doppelpunkt-Has mit plus P, also alle Überschriften, auf die direkt ein Absatz folgt.

00:37:08.280 --> 00:37:10.240
 Ja, das sind so Standardfälle.

00:37:10.240 --> 00:37:18.080
 Oder zum Beispiel, fand ich interessant, Section und dann Not und Has und dann H1, H2, H3, H4, H5, H6.

00:37:18.080 --> 00:37:20.700
 Das heißt, alle Sections, die keine Überschrift enthalten.

00:37:21.180 --> 00:37:38.120
 Also wenn ich die Seite schön gegliedert habe in mehrere Sections und aber nur manche davon enthalten tatsächlich eine untersche Überschrift, könnte man das interessant, also bei unserer Seite, zum Beispiel bei 4.8 Design, hätte ich das tatsächlich gebrauchen können, um da bestimmten Einfluss zu nehmen, wie die Sections dann hell oder dunkel hinterlegt sind.

00:37:38.120 --> 00:37:46.100
 Also es gibt auf jeden Fall genug Anwendungsfälle und deswegen ist der Parent-Selector auch was, was ja tatsächlich bei mir auf der Liste auch ganz oben steht.

00:37:46.100 --> 00:37:50.800
 Also das war auch, als wir das Thema angegangen sind, so das erste, was mir eingefallen ist, ja, Parent-Selector ist so ein klassisches Ding.

00:37:50.860 --> 00:37:55.400
 Beziehungsweise nächstes war das zweite, auf das erste, was mir eingefallen ist, kommen wir gleich als nächsten Punkt.

00:37:55.900 --> 00:38:04.220
 Aber ich wollte noch sagen, der geschätzte Kollege Jan Wiemers hat auf Twitter auch auf den Tweet reagiert und hat gemeint, Parents Until wäre er sofort dabei.

00:38:04.940 --> 00:38:07.260
 Das klingt für mich so ein bisschen wie jQuery.

00:38:07.260 --> 00:38:08.380
 JQuery, richtig, genau.

00:38:08.380 --> 00:38:09.960
 Warte mal, wie hieß das denn?

00:38:09.960 --> 00:38:11.260
 Das heißt Parents Until.

00:38:11.260 --> 00:38:13.900
 Also es gibt Closest, aber es gibt auch Parents Until.

00:38:13.900 --> 00:38:20.680
 Closest fängt beim Node selbst an und geht dann, wenn der nicht matcht, hoch bis zum nächsten, der trifft.

00:38:20.680 --> 00:38:28.440
 Und Parents Until fängt beim Parent-Node an und geht so weit, bis er auf den Node trifft, aber inkludiert den Node dann nicht, den Parent-Node, den er findet.

00:38:29.100 --> 00:38:33.400
 Genau, also ich verliege nochmal auf jQuery, auf die entsprechende Dokumentationsseite.

00:38:33.400 --> 00:38:41.280
 Ja, weiß ich nicht, ob das, hm, ist das sinnvoller als Parent?

00:38:42.860 --> 00:38:46.320
 Also, ja, ja, keine Ahnung, es ist natürlich schwer zu sagen.

00:38:46.320 --> 00:38:48.780
 Das nächste Match, um der Element zu treffen, ist natürlich schon nicht.

00:38:48.780 --> 00:38:55.740
 Also es ist im Endeffekt wie ein Parent Selector, nur dass ich halt zusätzlich noch einen Selector angeben kann, welches Parent ich dann treffen will.

00:38:55.740 --> 00:39:01.760
 Genau, bei Parents Until, beziehungsweise bei Closest matcht ja am Ende nur eins, ne?

00:39:01.760 --> 00:39:05.500
 Und bei CSS Parent Selector würden ja alle matchen, oder?

00:39:05.500 --> 00:39:10.400
 Parents würde alle matchen, aber Parents Until natürlich nur bis dahin, wo er das erste Mal drauf trifft.

00:39:11.520 --> 00:39:18.180
 Ja, genau, also wir wollen es haben, Browser, Händler, alle Sorten, einfach mal bitte einbauen.

00:39:18.180 --> 00:39:19.820
 Ganz, ganz einfach ist es bestimmt.

00:39:19.820 --> 00:39:23.020
 Deswegen ist es auch schon noch nicht da.

00:39:23.020 --> 00:39:24.020
 Genau.

00:39:24.020 --> 00:39:25.920
 Ja, nächster Punkt, oder?

00:39:25.920 --> 00:39:27.480
 Ja, nächster Punkt.

00:39:28.000 --> 00:39:31.400
 Das wäre Nth Letter, beziehungsweise Nth Word, Nth Line.

00:39:31.400 --> 00:39:40.820
 Das hätte ich ganz gut gebrauchen können, als ich eine lustige Spielerei gemacht habe auf, wo wir sind, ist vorne.show.

00:39:40.820 --> 00:39:45.100
 Wenn man da über die Headline fährt, dann bewegen sich da so ein paar Buchstaben.

00:39:46.100 --> 00:39:58.420
 Und damit die das tun, musste ich dann tatsächlich jeden Buchstaben in ein Span rappen, was nicht sehr elegant ist und halt auch aus Accessibility-Sicht suboptimal, sage ich mal.

00:39:59.200 --> 00:40:08.600
 Und man fragt sich halt so ein bisschen, also wir haben schon Firstline und wir haben Firstletter als Pseudo-Elementselektoren.

00:40:09.360 --> 00:40:17.240
 Wir haben außerdem, ja, First Child, Last Child, Nth Child, Nth Last Child sogar, kannte ich zum Beispiel auch noch nicht, dass man da auch von hinten selektieren kann.

00:40:17.240 --> 00:40:25.740
 First of Type, Nth of Type, dann, was ich auch nicht kannte, Last of Type, Nth Last of Type, Only Child und Only of Type.

00:40:25.740 --> 00:40:28.440
 Die vier habe ich zum Beispiel auch noch nicht.

00:40:28.440 --> 00:40:37.300
 Also ich wusste tatsächlich nicht, dass es das gibt und habe da auch gar nicht danach gesucht und hatte aber tatsächlich mal so einen Fall, wo ich das gebraucht hätte.

00:40:37.300 --> 00:40:39.640
 Und dann habe ich irgendwie, wie habe ich denn das gemacht?

00:40:39.640 --> 00:40:45.720
 Ich weiß gar nicht mehr, ich glaube, ich habe dann ja, also First Child und Last Child einfach kombiniert.

00:40:45.720 --> 00:40:48.720
 Hätte ich das mal gewusst, dass es auch Only Child gibt.

00:40:48.720 --> 00:40:52.520
 Ich möchte ganz, ganz kurz, jetzt muss ich kurz abschweifen.

00:40:52.520 --> 00:41:02.960
 Nur, falls du mal Firstletter verwenden willst, ich weiß nicht, bei welchen von den anderen, die du erwähnt hast, das auch noch gilt, aber bei Firstletter auf jeden Fall,

00:41:02.960 --> 00:41:07.120
 darauf kann man nicht alle CSS-Eigenschaften anwenden, leider.

00:41:07.300 --> 00:41:10.160
 Man kann damit leider nicht alles machen, was man gerne möchte.

00:41:10.160 --> 00:41:16.200
 Das sei an der Stelle mal kurz angemerkt, weil da bin ich schon mal ziemlich auf die Nase gefallen, weil ich gedacht habe,

00:41:16.200 --> 00:41:20.620
 hey, ich will hier jetzt, ich weiß gar nicht mehr, was ich machen wollte, Position Absolut oder irgendwie sowas.

00:41:20.620 --> 00:41:23.380
 Ich wollte den Buchstaben wild durch die Gegend schieben und verrückte Sachen damit machen.

00:41:23.380 --> 00:41:25.720
 Und das ging dann leider nicht.

00:41:25.720 --> 00:41:27.700
 Und ich habe mir nicht erklären können, warum nicht.

00:41:27.700 --> 00:41:31.220
 Nämlich, weil es tatsächlich im Standard steht, dass nur bestimmte Eigenschaften da drauf wirken.

00:41:31.220 --> 00:41:37.080
 Gut, ist halt auch ein Pseudo-Element, ist halt kein richtiges Element, da greifen halt bestimmte Einschränkungen.

00:41:37.080 --> 00:41:42.660
 Genau, also es gibt entsprechende analog aufgebaute Selektoren und da ist halt dann schon die Frage,

00:41:42.660 --> 00:41:48.900
 warum, wenn wir Firstline und Firstletter haben und bei anderen Sachen auch Enth selektieren können,

00:41:48.900 --> 00:41:52.740
 warum funktioniert das bei Buchstaben nicht oder bei Wörtern oder bei Zeilen?

00:41:53.800 --> 00:41:58.820
 Also ich finde, das ist auch, das war das Erste, was mir eingefallen ist, eben weil wir diesen konkreten Fall da hatten,

00:41:58.820 --> 00:42:00.120
 als wir die Webseite gebastelt haben.

00:42:00.120 --> 00:42:05.160
 Und ja, deswegen steht das bei mir eigentlich auf der Wunschliste auch ganz oben, zusammen mit dem Parent-Selektor.

00:42:05.160 --> 00:42:06.880
 Kann ja nicht so schwer sein.

00:42:06.880 --> 00:42:14.280
 Nee, eben. Und es gibt eine JavaScript-Library, Enth-Everything heißt die, und die simuliert das Ganze.

00:42:14.280 --> 00:42:16.600
 Wenn ich das richtig, ich habe es mir jetzt gar nicht so tief angeschaut,

00:42:16.720 --> 00:42:22.120
 Wenn ich das richtig sehe, kann man tatsächlich dann die Selektoren in Style-Blocken zumindest verwenden

00:42:22.120 --> 00:42:26.380
 und dann wird das irgendwie umgebogen mit JavaScript.

00:42:26.380 --> 00:42:28.760
 Ja, aber da brauchen dann auch Elemente drum, oder?

00:42:28.760 --> 00:42:33.540
 Ja, ja, klar. Natürlich, das muss dann auch Spans drumherum bauen, um die einzelnen Buchstaben und so.

00:42:33.540 --> 00:42:35.360
 Also es ist nicht sehr schön.

00:42:35.360 --> 00:42:38.940
 Und das hat dann vielleicht auch wieder Seiteneffekte, wenn ich dann irgendwie einen Selektor habe,

00:42:38.940 --> 00:42:41.660
 der dann auf das Span-Auswirkungen hat, was ich vielleicht gar nicht will.

00:42:42.160 --> 00:42:49.480
 Also, ja, nicht sehr schön solche Workarounds und wäre natürlich toller, wenn wir das mit CSS einfach machen könnten.

00:42:49.480 --> 00:42:55.500
 Ja, also hier plus eins von mir. Ich weiß aber nicht, ob das schon in irgendeiner Liste steht. Keine Ahnung.

00:42:55.500 --> 00:43:04.460
 Habe ich tatsächlich in der Vorbereitung jetzt vergessen zu gucken, ob es tatsächlich schon Bug-Reports vielleicht gibt bei den verschiedenen Browser-Herstellern.

00:43:04.460 --> 00:43:10.560
 Das können wir ja den Lesern einfach, äh, den Lesern sag ich, den Hörern, den Hörerinnen einfach mal auftragen.

00:43:10.560 --> 00:43:17.820
 Schaut doch mal nach, ob es irgendwo Proposals gibt oder irgendwelche Listen, wo man Sternchen klicken kann für nth Letter, nth Word oder nth Line.

00:43:17.820 --> 00:43:19.220
 Und dann schreibt uns den Link.

00:43:19.220 --> 00:43:20.140
 Und schreibt es in die Kommentare.

00:43:20.140 --> 00:43:21.260
 Schreibt es in die Kommentare.

00:43:22.340 --> 00:43:24.580
 Ist das jetzt irgendwie schon so ein dummer Running-Gag geworden?

00:43:24.580 --> 00:43:25.400
 Keine Ahnung.

00:43:25.400 --> 00:43:34.580
 Ja, vor allem schickt uns den Link, dann können wir da auch irgendwie Sternchen klicken oder Daumen hoch oder Pfeil nach oben oder plus eins oder sowas.

00:43:35.400 --> 00:43:39.700
 Also, äh, auch da wäre ich, wäre ich sofort dabei, möchte ich gerne haben.

00:43:39.700 --> 00:43:47.680
 Ähm, ich weiß jetzt nicht, bei nth Letter, ja doch, also immer dann, immer dann, wenn man so ein bisschen crazier rumdesignt und, äh, dann braucht man sowas.

00:43:47.680 --> 00:43:54.280
 Natürlich, wenn ich jetzt nur irgendwelche statischen, äh, langweiligen Dokumente haben will, also irgendwie API-Dokumentation, dann brauche ich das wahrscheinlich eher nicht.

00:43:54.280 --> 00:43:59.100
 Ja, vielleicht, vielleicht ist nth Letter gar nicht so das beste Beispiel, weil das natürlich wirklich sehr kleinteilig ist.

00:43:59.620 --> 00:44:11.400
 Ähm, aber nth Word, wenn man irgendwas highlighten will, ohne dann darum ein Span zu machen und vor allem nth Line, also wenn ich die ersten beiden Zeilen markieren will, zum Beispiel in einem Absatz, dass die irgendwie schöner hervorgehoben sind.

00:44:11.400 --> 00:44:15.880
 Also, ich finde, auf jeden Fall gibt's genug Use Cases für diese Geschichte.

00:44:15.880 --> 00:44:20.740
 Ja, dafür nutze ich normalerweise First Child und nutze dann halt den ersten Absatz oder so.

00:44:20.740 --> 00:44:23.760
 Also, ja, was mit Textumbruch dann halt wieder Probleme macht.

00:44:23.760 --> 00:44:28.620
 Ja, macht das mit Textumbruch Probleme? Wie meinst du?

00:44:28.640 --> 00:44:44.960
 Naja, wenn, wenn, je nachdem, wie breit der Text ist und wie der im Browser gerendert wird und der User hat vielleicht eine höhere Schriftgröße eingestellt bei sich im Browser-Style-Sheet oder im User-Style-Sheet, dann liest der Text anders und dann hast du halt nicht die ersten beiden, sondern die ersten drei Zeilen vielleicht anders farbig markiert.

00:44:44.960 --> 00:44:49.420
 Ach so, nee, ich meinte den ersten Absatz, egal wie viele Zeilen der dann hat.

00:44:49.420 --> 00:44:49.960
 Ja.

00:44:50.780 --> 00:45:02.580
 Aber ja, also, ich hab halt gerade so an klassisches Buchdesign gedacht, also so wirklich klassisch im wörtlichen Sinne, also alte Typografie.

00:45:03.680 --> 00:45:12.300
 Und CSS versucht ja oft genau diese Dinge, die man da, die man da findet, in so klassischer Typografie nachzubilden und genau diese Fälle anzubieten.

00:45:12.300 --> 00:45:24.360
 Deswegen kommt, glaube ich, auch First Letter, daher kommt auch First Letter, weil es oft in älteren Büchern so war, dass der erste Buchstabe von einem Absatz besonders gestylt ist oder besonders groß nebendran steht oder so.

00:45:25.060 --> 00:45:34.860
 So ein klassischer Fall. Oder, dass der erste Absatz von einem Kapitel in einer anderen Schriftgröße oder irgendwie fett gedruckt ist, ist auch so ein klassisches Ding.

00:45:34.860 --> 00:45:39.520
 Auch in Zeitungen, glaube ich, gibt es das teilweise. Also, das sind so Sachen, die aus der klassischen Typografie kommen.

00:45:39.520 --> 00:45:49.800
 Wobei jetzt End Letter, klar, das konntest du damals auch machen, aber es ist eher ungebräuchlich, dass du nicht den ersten Buchstaben nimmst, sondern den dritten oder den fünften oder den 125.

00:45:51.020 --> 00:45:58.820
 Das ist dann tatsächlich in unseren modernen Zeiten mit so Spielereien, wie wir sie auf der Seite gemacht haben, eher verwendbar als im Buchdruck, ja, tatsächlich.

00:45:58.820 --> 00:46:07.680
 Also, es gibt auch, ich werde noch einen CSS-Tricks-Artikel zu dem Thema verlinken und da sieht man auch so ein paar grafische Beispiele, was man damit machen könnte.

00:46:07.680 --> 00:46:09.840
 Genau.

00:46:09.840 --> 00:46:12.260
 Okay, sind wir damit durch?

00:46:12.260 --> 00:46:13.500
 Dann kommen wir doch zum nächsten Punkt.

00:46:13.500 --> 00:46:15.380
 Kommen wir zum nächsten Punkt.

00:46:16.160 --> 00:46:26.580
 Ein No-Brainer, da hat wahrscheinlich jeder, stand jeder schon mal davor, der mal Formulare designen musste, beziehungsweise der vielleicht, so in meinem Fall am häufigsten,

00:46:26.580 --> 00:46:36.260
 ein Grafiker hat eine total tolle Idee, wie ein Formular aussehen soll oder irgendein bestimmtes Formularelement, also ein Select, eine Checkbox, ein Radio-Button

00:46:37.520 --> 00:46:46.980
 oder noch weitergehend, mittlerweile gibt es ja auch sowas wie Data, Date-Widgets und sowas, ist ja auch überhaupt gar nichts gegen einzuwenden.

00:46:46.980 --> 00:46:54.580
 Die Grafiker und die UX-Designer, die haben oft ziemlich gute Ideen, aber setzt das dann mal um, ohne es komplett neu zu bauen.

00:46:56.140 --> 00:47:06.300
 Also ich sage, ich möchte gerne vernünftigen Zugriff beim Stylen von Formularelementen haben und ich glaube, da gibt es mittlerweile, das haben die Browser-Hersteller teilweise auch mittlerweile schon verstanden,

00:47:06.920 --> 00:47:20.620
 weil ich weiß, dass, mir ist auf einer Konferenz, es war, glaube ich, die JS-Conf in Berlin, ist mir mal Greg Whitworth, glaube ich, das ist für Deutsche, glaube ich, schwer auszusprechen, der Name, über den Weg gelaufen,

00:47:20.620 --> 00:47:30.640
 der damals, also der hat, wenn ich es richtig weiß, damals für Microsoft an Edge gearbeitet und das war ihm ein Anliegen, dass da ein bisschen Bewegung reinkommt.

00:47:30.640 --> 00:47:36.440
 Und der hat damals auch irgendwie Umfragen gemacht, was ist denn dein größter Pain-Point bei Formulardesign oder bei Formularen im Allgemeinen.

00:47:36.440 --> 00:47:46.180
 Ich glaube, mittlerweile ist er nicht mehr bei Microsoft, aber die haben auch mal einen Vortrag, der hat auch mal einen Vortrag gehalten, zusammen mit der Nicole Sullivan,

00:47:46.180 --> 00:47:55.380
 die vielleicht auch dem einen oder anderen bekannt ist von Object-Oriented CSS, damals noch, und beide arbeiten am Formulardesign oder haben zusammen am Formulardesign gearbeitet,

00:47:55.380 --> 00:48:07.040
 Nicole Sullivan bei Google für Chrome und Greg Whitworth bei Microsoft für Edge und die wollten das da so ein bisschen vorantreiben.

00:48:07.040 --> 00:48:14.100
 Und ich sage nur, macht bitte weiter, auch wenn jetzt Greg nicht mehr dabei ist und nicht mehr da mithelfen kann, das ist extrem wichtig.

00:48:14.940 --> 00:48:19.680
 Ein paar Früchte hat das jetzt schon getragen, leider noch nicht das, was ich mir jetzt wünschen würde.

00:48:19.680 --> 00:48:32.500
 Ich glaube, das Erste, was jetzt vor kurzem auch mal rauskam, war, dass jetzt Chrome bzw. Chromium-basierte Browser jetzt ein anderes oder ein aufgefrischtes Standard-Styling von Formularelementen bekommen haben.

00:48:32.600 --> 00:48:38.020
 Das sieht jetzt ein bisschen frischer aus und da waren ja wirklich Sachen dabei, die sind ja unglaublich hässlich gewesen.

00:48:38.020 --> 00:48:46.960
 Also sowas wie, wie heißt das denn, Progress-Element und sowas, das sind ja Sachen, die man nicht so oft verwendet und ich glaube, unter anderem, weil sie so wahnsinnig hässlich sind.

00:48:47.740 --> 00:49:00.440
 Was ich mir aber wünsche ist, ich meine, irgendwann hat man ja angefangen mit so Shadow-Dom-Selektoren mal so bestimmte Sachen stylbar zu machen, also zum Beispiel bei einem Select, dass man ...

00:49:00.440 --> 00:49:09.700
 Ja, ich glaube, Select ist so das klassische Element dafür, was man ganz oft sieht in Formularen, was dann selber nachgebaut wird und da leidet dann halt die Accessibility drunter.

00:49:09.700 --> 00:49:16.740
 Da hatten wir es ja auch schon in einer anderen Folge davon und das wäre echt wünschenswert, wenn man da Standard-Elemente neu formatieren kann.

00:49:16.740 --> 00:49:25.140
 Ja, weil man sich dann sowas selber basteln spart und einfach die, so wie die Elemente funktionieren sollen, funktionieren sie dann halt auch, auch mit der Tastatur.

00:49:25.140 --> 00:49:41.440
 Ich meine, es muss ja gar nicht alles gehen. Also ich verstehe auch, dass sowas einen großen Anspruch hat, auch an Security und so. Also da ist wahrscheinlich, da darf nicht alles erlaubt sein, damit das irgendwie für Browser noch funktioniert.

00:49:41.440 --> 00:49:57.740
 Also ich kann mir sehr gut vorstellen, dass es da eine Menge Kriterien gibt, die ich jetzt als Anwender, der irgendwo in seinen HTML, Spitze Klammer auf Select, Spitze Klammer zuschreibt, die ich nicht sehe, die wichtig, die trotzdem wichtig sind bei der Umsetzung von sowas.

00:49:58.160 --> 00:50:14.620
 Trotzdem muss es meiner Meinung nach möglich sein, irgendwie eine Standardschnittstelle zum Stylen davon zu definieren, sodass ich wirklich eine Möglichkeit habe, auf alle oder möglichst alle Elemente zuzugreifen und zu sagen, hey, da würde ich jetzt gerne die Farbe ändern und da hätte ich gerne noch einen Border und da hätte ich gerne einen Verlauf hinten dran.

00:50:14.620 --> 00:50:27.260
 Und da würde ich gerne die Textgröße ändern und so weiter. Und ja, also ich würde total gerne den Designern das geben, was sie wollen, weil meistens wollen die ja keinen Quatsch. Die wollen ja, dass es am Ende auch noch gut benutzbar ist.

00:50:28.460 --> 00:50:48.660
 Und Formdesign, also wir haben da auch zu einem Vortrag noch einen YouTube-Link dann in den Shownotes und es gab auch mal einen Artikel von der Filament Group, Styling a Select like it's 2019, also logischerweise von 2019, wo da mal gezeigt wird, was jetzt schon geht.

00:50:48.660 --> 00:51:04.220
 Und wir sind mittlerweile schon relativ weit gekommen, zumindest was das Select-Feld selbst angeht, also die Box, auf die ich draufklicke, aber sobald sich was öffnet, ist es im Prinzip, da ist es dann vorbei.

00:51:04.220 --> 00:51:10.820
 Da hast du wieder irgendwie dieses hässliche Blau im Hintergrund, du hast irgendwie keinen so richtigen, ich weiß nicht, ob man Einfluss nehmen kann auf diese Hintergrundfarbe von dem Text.

00:51:12.620 --> 00:51:32.180
 Es ist, ja, es ist so irgendwie so halb, es ist irgendwie so halb okay. Und dann haben die auch unten noch Screenshots aus allen möglichen Browsern und dann siehst du dann halt wieder, okay, gut, die ganz alten, eh würde ich jetzt auch gar nicht in Anspruch erheben, dass es irgendwie funktioniert, aber ach, es sind so viele kleine Probleme, die man irgendwie damit hat.

00:51:32.180 --> 00:51:52.940
 Und es ist sehr verführerisch, da selbst was zu bauen, aber ich kann meistens nur davon abraten, du nimmst dir damit meistens Funktionalität weg, beziehungsweise, wir haben da auch schon öfter drüber gesprochen, sowas zu reimplementieren mit allen Interaktionsmöglichkeiten und so weiter, das ist wirklich, wirklich schwer, das macht man nicht mal so eben.

00:51:52.940 --> 00:52:01.580
 Auch wenn man glaubt, dass man nichts vergessen hat, man hat meistens noch was vergessen. Also eigentlich muss man sich dann hingehen und den Standard reimplementieren und wer macht das schon.

00:52:02.460 --> 00:52:17.320
 Ja, also ich glaube, vielleicht dabei sei noch gesagt, also sowas wie Checkboxen und Radio Buttons funktioniert eigentlich mittlerweile ganz gut, weil da haben sich viele jetzt drauf geeinigt, dass man eben das Label stylt und nicht die Checkbox oder den Radio Buttons selbst.

00:52:17.320 --> 00:52:18.260
 Wenn die Checkbox dann einfach versteckt, ja.

00:52:18.260 --> 00:52:21.600
 Genau, Checkbox und Radio Button werden versteckt, das Label wird gestylt.

00:52:21.600 --> 00:52:29.720
 Dann halt wieder dran denken, Fokus-Zustand entsprechend umzusetzen, das wird dann auch gerne vergessen, was dann wieder Accessibility mäßig.

00:52:29.720 --> 00:52:34.560
 Genau, Fokus oder auch in manchen Browsern, auch Hover, es hat auch Hover einen bestimmten Style bei Checkboxen und Radio Buttons.

00:52:34.560 --> 00:52:38.940
 Ja, also wie gesagt, liebe Browser-Hersteller, jetzt komme ich mal ganz nah zu euch.

00:52:38.940 --> 00:52:41.360
 Bitte setzt mir das um.

00:52:41.360 --> 00:52:45.060
 Ich weiß, dass es schwer ist, aber standardisiert das mal.

00:52:45.060 --> 00:52:50.760
 Hört mal auf mit so einem fancy Shit wie WebAssembly und macht mal so ihr Brot und Futter, bitte.

00:52:50.940 --> 00:52:52.840
 Meinst du, die Browser-Hersteller hören uns auch zu?

00:52:52.840 --> 00:52:54.900
 Natürlich hören die uns zu.

00:52:54.900 --> 00:52:56.860
 Na klar, davon gehe ich aus.

00:52:56.860 --> 00:53:00.480
 Wir haben ja schon mehr Downloads, als es Menschen auf dem Planeten gibt.

00:53:00.480 --> 00:53:03.300
 Natürlich hat uns einer zugehört von den Browser-Herstellern.

00:53:03.300 --> 00:53:05.740
 Jetzt habe ich unsere Statistiken verraten, gell?

00:53:05.740 --> 00:53:06.320
 Ja, Mist.

00:53:06.320 --> 00:53:11.080
 Ihr könnt euch jetzt selbst überlegen, ob das realistisch ist oder nicht.

00:53:11.080 --> 00:53:15.800
 Ich bin gerade am überlegen, ob ich dazu jetzt noch ein Beispiel habe.

00:53:15.800 --> 00:53:18.060
 Muss man das eigentlich jetzt noch genauer erklären?

00:53:18.060 --> 00:53:20.280
 Nee, also ich glaube, wir haben jetzt

00:53:20.280 --> 00:53:23.140
 Anwendungsbeispiele haben wir dafür genannt.

00:53:23.140 --> 00:53:27.260
 Also Select und Checkbox-Radio-Button sind so die wichtigsten.

00:53:27.260 --> 00:53:30.600
 Ah ja, vielleicht, ah stimmt, jetzt hat es noch was angetriggert in meinem Hirn.

00:53:30.600 --> 00:53:32.840
 Ich hatte vor kurzem da ein Positivbeispiel.

00:53:32.840 --> 00:53:37.340
 Nicht die Stylbarkeit, aber das Styling an sich hat mich überrascht.

00:53:38.020 --> 00:53:41.800
 Und zwar habe ich tatsächlich ein Input-Type Date vor kurzem gesehen.

00:53:41.800 --> 00:53:44.660
 Es war in Firefox, muss ich dazu sagen.

00:53:45.000 --> 00:53:47.980
 Und ich habe nicht gemerkt, dass es das war.

00:53:47.980 --> 00:53:52.660
 Ich habe gedacht, es ist ein Widget, ein selbstgebautes Kalender-Widget.

00:53:52.660 --> 00:53:56.760
 Und habe dann irgendwann gedacht, ja, aber wieso ist denn diese eine Farbe,

00:53:56.760 --> 00:53:58.560
 also diese eine Farbe passt ja jetzt nicht zum Rest.

00:53:58.560 --> 00:54:02.940
 Aber der Rest sieht super aus, weil es war halt eine Seite, die relativ minimalistisch gestaltet war.

00:54:03.620 --> 00:54:05.420
 Ziemlich weiß und mit grau und so.

00:54:05.420 --> 00:54:10.060
 Und das hat erstaunlich gut ausgesehen.

00:54:10.060 --> 00:54:13.020
 Also im Firefox das Input-Type Date-Widget.

00:54:13.020 --> 00:54:14.980
 Ich weiß nicht, ob man dafür jetzt noch irgendwie ein Beispiel schreibt.

00:54:14.980 --> 00:54:18.140
 Das komplette Default-Widget, oder?

00:54:18.140 --> 00:54:19.060
 Das Default.

00:54:19.060 --> 00:54:21.420
 Ich glaube, das war gar nicht gestylt in dem Augenblick.

00:54:21.420 --> 00:54:25.680
 Und das sah zumindest auf dieser einen Seite so aus, als ob es wirklich dazugehört.

00:54:25.680 --> 00:54:28.180
 Hat mich extrem überrascht, dass das so aussah.

00:54:28.180 --> 00:54:31.580
 Weil ich erinnere mich noch an, ich weiß nicht, wie aktuell das noch ist,

00:54:31.580 --> 00:54:34.700
 als ich zum ersten Mal das Date-Widget, Input-Type Date gesehen habe.

00:54:34.700 --> 00:54:37.080
 Das war, glaube ich, ich weiß nicht, ob das der erste Browser war,

00:54:37.080 --> 00:54:38.160
 das implementiert hat, Opera.

00:54:38.160 --> 00:54:39.960
 Und das sah furchtbar aus.

00:54:39.960 --> 00:54:45.300
 Das war wirklich so, als wärst du noch mal zu Windows, keine Ahnung, 3.11 zurück.

00:54:45.300 --> 00:54:48.200
 Also so in dem Style war das.

00:54:48.200 --> 00:54:51.240
 Und dann halt in einem Browser von vor drei, vier Jahren, wo du gedacht hast,

00:54:51.240 --> 00:54:55.360
 alter Schwede, wie könnt ihr in einem Interface oder in einem Browser,

00:54:55.360 --> 00:55:00.960
 der so modern ist, so ein altgestyltes Stück Scheiße unterbringen,

00:55:01.580 --> 00:55:07.860
 ich hoffe, dass jetzt, jetzt kriege ich bestimmt von den Leuten von Opera auf die Nüsse,

00:55:07.860 --> 00:55:12.920
 aber mittlerweile ist da ja auch, glaube ich, die Chromium Engine dahinter, oder?

00:55:13.840 --> 00:55:19.480
 Ich meine, ich habe mich mit Opera tatsächlich nicht mehr beschäftigt seit, keine Ahnung, 2000 irgendwas.

00:55:19.480 --> 00:55:21.320
 Naja, wie auch immer.

00:55:21.320 --> 00:55:23.720
 Also, Form machen, bitte.

00:55:23.720 --> 00:55:24.280
 Danke.

00:55:24.280 --> 00:55:26.180
 Next.

00:55:26.180 --> 00:55:29.220
 Next, ja genau, wir müssen, wir haben ja keine Zeit.

00:55:30.060 --> 00:55:35.460
 Ja, das habe ich auch schon als Feedback bekommen, dass ich sehr hinterher wäre, auf die Zeit zu schauen,

00:55:35.460 --> 00:55:36.800
 dass das schon auffällig wäre.

00:55:36.800 --> 00:55:40.880
 Ich habe es heute, ich bin heute ganz, ich habe noch gar nichts dazu gesagt,

00:55:40.880 --> 00:55:43.680
 außer am Anfang, dass wir schon drei Minuten reden, aber ich bin ganz…

00:55:43.680 --> 00:55:48.040
 Moment, Moment, Moment, jetzt muss ich aber kurz die Wahrheit sagen, liebe Hörerinnen und Hörer.

00:55:48.720 --> 00:55:53.940
 Der Konstantin hat im Vorfeld, bevor wir angefangen haben aufzunehmen, schon ein paar Mal gesagt,

00:55:53.940 --> 00:55:56.740
 Mensch, jetzt müssen wir aber, jetzt müssen wir mal anfangen, es ist jetzt schon so spät.

00:55:56.740 --> 00:56:00.480
 Ja, also wir haben ja schon irgendwie eine Stunde geredet, bevor wir überhaupt auf Aufnahmen geklickt haben

00:56:00.480 --> 00:56:07.680
 und uns irgendwie drüber unterhalten, wie wir jetzt das Intro, also das noch vor dem Intro, vor der Musik,

00:56:07.680 --> 00:56:09.100
 was wir denn da sagen.

00:56:09.100 --> 00:56:14.360
 Ja, das ist eigentlich schon ganz schön peinlich, dass ich zehn Minuten oder eine Viertelstunde gebraucht habe,

00:56:14.360 --> 00:56:17.900
 um mir dieses, das aus den Fingern zu saugen, was ihr heute davor gehört habt.

00:56:17.900 --> 00:56:21.820
 Also, dass ich dafür so lange gebraucht habe, dafür ist es gar nicht so gut geworden.

00:56:21.820 --> 00:56:28.420
 Ja, vor allem, ich merke schon, wir kommen relativ gut durch und es wird, ich sage jetzt mal, unter einer Stunde 30 bleiben.

00:56:28.420 --> 00:56:32.960
 Und damit sind wir ja tatsächlich schon deutlich kürzer wieder als…

00:56:32.960 --> 00:56:34.920
 Ich kann noch weit abschweifen.

00:56:34.920 --> 00:56:35.840
 Schauen wir mal, schauen wir mal.

00:56:35.840 --> 00:56:36.460
 Da geht noch einiges.

00:56:36.460 --> 00:56:39.100
 Ich glaube, die letzten beiden Folgen knacken wir nicht.

00:56:39.100 --> 00:56:41.340
 Gut, nächster Punkt.

00:56:41.340 --> 00:56:42.920
 Nächster Punkt.

00:56:43.040 --> 00:56:48.200
 Ja, Animation und Transition zu Height Auto oder eigentlich, ja, nicht nur unbedingt zu Height,

00:56:48.200 --> 00:56:50.760
 aber Height ist so der klassische Fall, aber generell zu Auto-Werten.

00:56:50.760 --> 00:56:55.400
 Also, das ist so ein Ding, da bin ich echt schon mehrfach drauf gestoßen.

00:56:55.400 --> 00:57:00.080
 Also, dass man irgendwie, ja, irgendwas mit Overflow hidden hat und wenn man drüber fährt,

00:57:00.080 --> 00:57:02.460
 will man irgendwie den kompletten Text anzeigen lassen oder so.

00:57:02.460 --> 00:57:07.300
 Und dann willst du eigentlich von, sagen wir mal, irgendwie auf ein EM hast du die Höhe begrenzt

00:57:07.300 --> 00:57:10.100
 und dann willst du zu dem Height Auto zurück und das geht halt so nicht.

00:57:10.100 --> 00:57:15.580
 Also, da muss man sich dann wieder mit JavaScript behelfen, wo man dann den Endzustand quasi

00:57:15.580 --> 00:57:19.340
 kurz herstellt, sodass es gar nicht gerendert wird oder zumindest nicht sichtbar für den

00:57:19.340 --> 00:57:23.540
 User, um dann die Höhe zu ermitteln und dann wieder auf den Ursprungswert zurück und

00:57:23.540 --> 00:57:24.840
 dann kann man die Animation starten.

00:57:25.380 --> 00:57:27.360
 Aber das ist ja Quatsch, das so zu machen.

00:57:27.360 --> 00:57:33.140
 Oder es gibt auch ein Hack, in Anführungsstrichen, ich nehme einfach einen besonders großen Wert,

00:57:33.140 --> 00:57:37.240
 also ich setze dann irgendwie die Höhe auf 9999 Pixel.

00:57:37.240 --> 00:57:42.600
 Aber dann habe ich natürlich das Problem, dass das wiederum die Dauer des eigentlichen sichtbaren

00:57:42.600 --> 00:57:45.200
 Animations- oder Transition-Effektes beeinflusst.

00:57:45.540 --> 00:57:50.500
 Weil, wenn ich einen Riesenwert habe und ich sage, die soll die Animation so eine Sekunde dauern,

00:57:50.500 --> 00:57:55.320
 dann ist, also das macht man dann mit Height und mit Max-Height natürlich, weil man will

00:57:55.320 --> 00:57:59.900
 ja nicht über die eigentliche Höhe drüber schießen.

00:57:59.900 --> 00:58:04.020
 Das beeinflusst, wie gesagt, die Dauer, weil ich dann so einen Riesenwert habe und dann ist

00:58:04.020 --> 00:58:08.560
 die, dauert die Animation nicht nur eine Sekunde, sondern vielleicht nur 300 Millisekunden.

00:58:09.400 --> 00:58:14.580
 Also es ist nicht schön und es ist so ein Ding, wo man sich echt denkt, warum funktioniert das noch nicht.

00:58:14.580 --> 00:58:19.380
 Er hat aber wahrscheinlich den Grund, dass man eben, also dass der Browser, um zu ermitteln,

00:58:19.380 --> 00:58:25.400
 was wäre denn, wo will ich denn hin, natürlich kurzzeitig auch den Zustand herstellen muss,

00:58:25.400 --> 00:58:30.220
 so wie man das mit JavaScript macht, um das eben zu ermitteln und dann zu diesem Wert hin

00:58:30.220 --> 00:58:33.040
 die Animation oder Transition laufen zu lassen.

00:58:33.040 --> 00:58:39.220
 Der Browser müsste doch eigentlich diese Maximal-Ausdehnung kennen.

00:58:39.400 --> 00:58:44.480
 Naja, wenn ich jetzt aber beim Seitenladen schon vom Style her das beschnitten habe,

00:58:44.480 --> 00:58:48.860
 auf 1-EM-Höhe oder 10-Pixel-Höhe oder was auch immer, woher soll der Browser dann wissen,

00:58:48.860 --> 00:58:52.800
 wie der Text läuft, wenn das Ding ausgefahren ist?

00:58:52.800 --> 00:58:56.800
 Liebe Browser-Hersteller, ihr hört uns ja zu, ich gehe mal ganz nah zu euch.

00:58:56.800 --> 00:58:58.700
 Sagt uns mal, wie das ist.

00:58:58.700 --> 00:59:02.280
 Ich weiß es tatsächlich nicht, aber auch gerne jeder andere, der das weiß.

00:59:02.280 --> 00:59:06.600
 Also ich war immer der Meinung, dass der Browser eigentlich beim Rendern das schon weiß.

00:59:07.380 --> 00:59:13.100
 Natürlich nicht, während er gerade das CSS irgendwie sich anguckt, aber danach müsste der doch eigentlich ...

00:59:13.100 --> 00:59:14.440
 Naja, aber du kannst das ja theoretisch ändern.

00:59:14.440 --> 00:59:18.900
 Also du machst im eingeklappten Zustand, setzt du plötzlich die Font-Wate auf 700

00:59:18.900 --> 00:59:20.980
 und dadurch floated der Text an das um.

00:59:20.980 --> 00:59:25.340
 Da muss aber der Browser nichts neu rendern, weil der Text ist ja abgeschnitten und gar nicht sichtbar.

00:59:25.340 --> 00:59:30.780
 Aber das muss ja berücksichtigt werden, wenn ich das Ding dann ausklappe und sichtbar machen will.

00:59:31.460 --> 00:59:35.140
 Ich hatte witzigerweise genau heute den Fall, dass ich das gerne gemacht hätte.

00:59:35.140 --> 00:59:37.180
 Was war dein konkretes Beispiel?

00:59:37.180 --> 00:59:43.500
 Mein konkretes Beispiel ist, was ich immer wieder versuche, in Projekten einzusetzen und dann an der Realität scheitere,

00:59:43.500 --> 00:59:45.480
 an der Browser-Unterstützungsrealität.

00:59:45.480 --> 00:59:51.980
 Und ich habe das jetzt, glaube ich, schon drei-, viermal versucht und am Ende sind wir wieder davon abgekommen, es zu benutzen,

00:59:51.980 --> 00:59:53.460
 nämlich Details und Summary.

00:59:53.900 --> 01:00:01.920
 Und Details und Summary zu animieren, das wäre nämlich, das wäre super, also für die, die nicht wissen, was Details und Summary ist,

01:00:01.920 --> 01:00:09.220
 das ist im Prinzip so ein Aufklapp-Dings, aber ich weiß gar nicht, wie nennt man das, was ist denn das richtige Wort dafür?

01:00:09.220 --> 01:00:12.240
 Also versteckter Content aufklappen und zuklappen?

01:00:12.240 --> 01:00:18.360
 Ja, aber ein Akkordeon klappt ja normalerweise alle anderen zu, wenn ich eins aufklappe.

01:00:18.360 --> 01:00:19.980
 Ja, gibt's so oder so, aber ja.

01:00:19.980 --> 01:00:24.860
 Also ähnlich kann man sich das vorstellen, man hat irgendwie eine FAQ zum Beispiel, ist so ein Anwendungsfall.

01:00:24.860 --> 01:00:30.540
 Ich habe eine FAQ, genau, das ist das gut, ich habe eine FAQ und ich habe eine Überschrift und ich habe den Inhalt dazu

01:00:30.540 --> 01:00:32.440
 und ich kann das aufklappen und zuklappen.

01:00:32.540 --> 01:00:36.220
 Ich sehe einmal die Erklärung zu der Überschrift und einmal nicht.

01:00:36.220 --> 01:00:42.020
 Und das ist eben, das ist eben nativ mit HTML, mit Details und Summary kann man das umsetzen,

01:00:42.020 --> 01:00:44.820
 beziehungsweise ich brauche dafür dann kein JavaScript mehr, um auf und zu zu klappen,

01:00:44.820 --> 01:00:50.940
 sondern genau, Details und Summary sorgt dafür, dass diese Funktionalität im Browser standardmäßig schon mit eingebaut ist.

01:00:50.940 --> 01:00:58.760
 Und ich glaube, verwendet wird das zum Beispiel bei GitHub in den Readme-Dateien, glaube ich, kann man das auch einbauen, da gibt's das auch.

01:00:59.340 --> 01:01:03.500
 Das ist das Einzige, was mir jetzt gerade bekannt ist, wo das wirklich sichtbar eingesetzt wird.

01:01:03.500 --> 01:01:05.980
 Und du hast dann so einen kleinen Pfeil nebendran, wie sowas halt aussieht.

01:01:05.980 --> 01:01:11.200
 Und da wäre es halt total schön, wenn man in beide Richtungen animieren könnte.

01:01:11.200 --> 01:01:17.100
 Man kann, warte mal, ach nee, ich glaube, genau Heid ist da das Problem,

01:01:17.100 --> 01:01:21.460
 weil er würde ich nämlich gerne, dass das schön auffährt, hätte ich gerne.

01:01:21.460 --> 01:01:26.500
 Und ich glaube, zum Auffahren geht es, da habe ich Beispiele heute gesehen bei CodePen,

01:01:26.840 --> 01:01:29.880
 aber beim Zuklappen auf jeden Fall geht es nicht, da ist es sofort zu.

01:01:29.880 --> 01:01:34.740
 Ja, also das war mein Beispiel heute, wo ich das gerne gehabt hätte.

01:01:34.740 --> 01:01:39.500
 Ich weiß nicht, ob es da irgendwie noch irgendeinen Hack gibt, wie man das irgendwie machen kann.

01:01:39.500 --> 01:01:42.200
 Es gibt ja Leute, die machen die verrücktesten Sachen in CSS,

01:01:42.200 --> 01:01:45.220
 aber da ist mir jetzt nichts bekannt, wie man das machen kann.

01:01:45.960 --> 01:01:50.460
 Ich habe an einer Stelle, wo ich das mal eingebaut habe, so eine Art Fake-Animation,

01:01:50.460 --> 01:01:55.900
 dass es halt im Prinzip in der Höhe direkt aufklappt, aber der Inhalt dann so ein bisschen animiert reinfährt.

01:01:55.900 --> 01:02:00.880
 Das geht natürlich dann auch nur beim Aufklappen, weil beim Zuklappen ist es sofort komplett zu.

01:02:00.880 --> 01:02:04.940
 Da gibt es dann, ja, da hat das Ding keine Gnade.

01:02:04.940 --> 01:02:08.880
 Das kann nicht warten, sondern es ist dann einfach, ich klicke und sofort ist alles weg.

01:02:09.640 --> 01:02:11.360
 Ja, also das ist mein Beispiel dazu.

01:02:11.360 --> 01:02:14.740
 Ihr könnt ja eure Beispiele mal in die Kommentare schreiben.

01:02:14.740 --> 01:02:18.820
 Ja, gerne, also für die nächsten Folgen, da wir das ja wie gesagt noch fortsetzen werden, diese Serie.

01:02:18.820 --> 01:02:22.320
 Auf jeden Fall gerne her mit weiteren Anregungen.

01:02:22.320 --> 01:02:29.300
 Aber wir haben noch zwei Punkte in dieser Folge, nämlich Shape Inside.

01:02:30.000 --> 01:02:36.840
 Es gibt eine Spezifikation, CSS Shapes Spezifikation, die habe ich mir auch so im Detail noch gar nicht angeschaut gehabt bisher.

01:02:36.840 --> 01:02:46.220
 Bin aber schon vor einer Weile mal auf dieses Shape Inside gestoßen, auf einen Artikel von einer Entwicklerkollegin und den habe ich leider nicht mehr gefunden.

01:02:46.220 --> 01:02:51.380
 Ich habe nochmal geguckt für die Sendung heute, ob ich den Artikel nochmal finde, habe ihn aber leider nicht mehr entdeckt.

01:02:52.340 --> 01:03:00.320
 Und da ging es darum, dass das ursprünglich mal vorgesehen war in der Spezifikation und dann aber auf Level 2 verschoben wurde.

01:03:00.320 --> 01:03:03.180
 Und da fragt man sich, warum ist das passiert?

01:03:03.180 --> 01:03:12.500
 Weil es gibt das Property Shape Outside, mit dem ich festlegen kann, wie der Textfluss um ein Element herum aussehen soll.

01:03:12.500 --> 01:03:20.700
 Also ich kann da wirklich Shapes definieren, eine Ellipse außenrum oder was weiß ich, oder ich kann sogar Grafiken angeben, bei denen dann der Alpha-Kanal berücksichtigt wird.

01:03:20.700 --> 01:03:24.480
 Oder sogar SVG-Formen kann ich als Grafik angeben.

01:03:24.480 --> 01:03:35.140
 Und da kann ich dann, also auch wieder klassisch eigentlich aus dem Print irgendwie sagen, dass ich da irgendwie so ein paar Zacken rausstehen habe aus dem Bild, dass da links floated und der Text soll sich da eben dieser Form anpassen.

01:03:35.300 --> 01:03:42.900
 Und wie gesagt, mit Shape Outside funktioniert das auch um ein Element herum, aber auf der anderen Seite, innen drin, da funktioniert das nicht.

01:03:42.900 --> 01:03:49.220
 Und gerade jetzt mit Border Radius kann ich ja problemlos kreisförmige Container darstellen.

01:03:49.220 --> 01:03:53.580
 Wenn ich da aber Text reinschreibe, dann fließt der aber halt aus dem Kreis raus.

01:03:54.440 --> 01:04:01.040
 Und schön wäre es natürlich, wenn der Text sich in dem Kreis anordnen würde und an den Rändern auch tatsächlich stehen bleiben würde.

01:04:01.040 --> 01:04:03.900
 Und das funktioniert nicht ohne dieses Property.

01:04:03.900 --> 01:04:08.920
 Und wann das kommt, ja, keine Ahnung, wie weit da dieser Standard aktuell fortgeschritten ist.

01:04:08.920 --> 01:04:15.340
 Und man findet dann da auch Beispiele, also die Frage kommt recht oft, taucht die auf?

01:04:17.240 --> 01:04:27.380
 Und ich glaube, das liegt noch daran, weil ursprünglich, weil das eben in Level 1 schon vorgesehen war, gibt es auch tatsächlich noch Tutorials da im großen, weiten Web, wo Shape Inside noch beschrieben wird.

01:04:27.380 --> 01:04:33.440
 Und da gibt es dann auch Stack Overflow Posts, wo jemand schreibt, hm, ich habe Shape Inside genauso angewendet, wie man soll und es funktioniert nicht.

01:04:33.440 --> 01:04:36.100
 Und die Antworten sind halt, ja, es ist halt auch noch nicht umgesetzt.

01:04:36.860 --> 01:04:55.200
 Und da findet man dann irgendwelche, ja, wiederum irgendwelche Hacks, ich verlinke da auch mal ein JS-Fiddle, wo dann wirklich mit so einer Diff-Suppe, mit verschiedenen breiten Diffs, das gefakt wird, die dann links und rechts von dem Text floaten und dann so angeordnet sind, dass da quasi wieder ein Kreis entsteht, nur damit dieser Text da drin richtig angeordnet ist.

01:04:55.920 --> 01:05:03.680
 Ich habe auch noch ein etwas eleganteres Beispiel gefunden, das ist auch ein Code Pen, das ich verlinken werde, wo das immerhin mit Shape Outside gelöst ist, mit dem SVG.

01:05:03.680 --> 01:05:16.820
 Das heißt, ich habe dann nur zwei Zusatzelemente, die ich eigentlich semantisch nicht bräuchte und die haben zwei Halbkreise, einen nach rechts geöffnet, einen nach links geöffnet und dementsprechend fließt dann der Text da in Kreisform.

01:05:18.260 --> 01:05:32.200
 Ja, warum das nicht umgesetzt ist, liebe Browser-Hersteller, ich spreche auch ganz nah als Mikrofon, ich verstehe es nicht, ja, hat bestimmt auch wieder Gründe, die sich einfach uns nicht erschließen, aber, ja, verstehen kann ich es nicht so ganz.

01:05:32.200 --> 01:05:42.920
 Ich glaube, ich habe eine Idee, du kennst ja die Arbeit bei mir in der Firma, Konstantin, du weißt ja, dass es da auch ganz, ganz, ganz viele Ideen gibt und man hat nicht für alles Zeit.

01:05:42.920 --> 01:05:58.680
 Ich glaube, es ist auch einfach Fokus, Scope, kann ich, also es gibt so viele Sachen, die total geil werden, die man mal könnte, also ich habe das auch in meiner Arbeitswelt immer, wir hatten es ja auch in der letzten Folge so ein bisschen über die Arbeitsrealitäten von uns.

01:05:59.720 --> 01:06:09.340
 Extrem oft ist man an dem Punkt, dass man sagt, so, wir haben jetzt eine Million Ideen und welche fünf davon können wir jetzt umsetzen oder welche fünf davon setzen wir jetzt um?

01:06:09.340 --> 01:06:23.340
 Ich komme auch nochmal nahe, ich will es trotzdem haben, aber, ja, letzten Endes sind die auch nur begrenzt in ihren Ressourcen und können leider nicht alles machen.

01:06:24.840 --> 01:06:37.780
 Verstehe ich, verstehe ich absolut die Argumentation, aber das ist so ein bisschen wie was wir oben hatten mit dem First Line und First Letter, das ist ja, also es gibt ja schon die Möglichkeit, den ersten Buchstaben zu selektieren in dem Fall.

01:06:38.320 --> 01:06:53.260
 Warum kann man nicht den Endenbuchstaben selektieren, ja? Und in dem Fall ist es halt auch, es gibt Shape Outside, das funktioniert schon, das heißt, da ist schon was implementiert, dass tatsächlich Formen definiert werden in CSS und der Textfluss sich darin gehend anpasst, aber halt eben nur außerhalb von einem Element und warum nicht innerhalb?

01:06:53.260 --> 01:07:02.560
 Also ich stelle mir, also, dass man jetzt irgendwie sagt, okay, diese ganze Shape-Geschichte ist irgendwie, die schaffen wir nicht für den nächsten Draft, okay, dann lassen wir das ganz weg von mir aus.

01:07:02.560 --> 01:07:07.600
 Aber wenn man doch schon eigentlich die 90 Prozent hat, warum macht man die 100 Prozent nicht noch fertig?

01:07:07.600 --> 01:07:09.840
 Aber Konstantin, wäre das nicht was für Houdini?

01:07:10.620 --> 01:07:17.240
 Ja, ich habe tatsächlich auch spontan an Houdini gedacht. Houdini, Folge Nummer 6, auch hier wieder den Bogen spannen.

01:07:17.240 --> 01:07:20.920
 Dass du immer weißt, in welcher Folge wir was besprochen haben, ich habe keine Ahnung.

01:07:20.920 --> 01:07:25.320
 Ja, das steht teilweise in meinen Shownotes und ich habe auch die Seite neben mir offen.

01:07:25.320 --> 01:07:34.360
 Aber, ja, also, auch mal ein kleiner Einschub, so Meter, man sieht in den Statistiken ganz schön, dass die Leute tatsächlich jetzt die Folgen auch nachhören.

01:07:34.600 --> 01:07:43.580
 Also jetzt, aber gerade so vergangene Woche war das ganz extrem, dass wirklich so in chronologischer Reihenfolge plötzlich alte Folgen als dicke, farbige Balken aufgeteilt, äh, getaucht sind.

01:07:43.580 --> 01:07:48.000
 Also ist schön, ihr hört unsere alten Folgen tatsächlich, äh, nach. Finde ich sehr gut.

01:07:48.000 --> 01:07:49.700
 Einschubende.

01:07:49.700 --> 01:07:53.020
 Ja, auch wenn da viel Quatsch vorkommt.

01:07:53.020 --> 01:08:04.520
 Äh, ja, also, ähm, mir fällt noch ein, als das mir zum ersten Mal begegnet ist, dass jemand sagt, ich möchte, ich möchte Schrift so fließen,

01:08:04.600 --> 01:08:08.680
 lassen, dass ich da ein Objekt nebendran packen kann, das irgendeine Form hat.

01:08:08.680 --> 01:08:14.460
 Das, das, ich weiß nicht, wie lange das her ist, aber ich meine, dass dieses erste Proposal tatsächlich von Adobe damals kam,

01:08:14.460 --> 01:08:22.220
 die gesagt haben, wir wollen hier, äh, unsere, äh, InDesign-Funktionalität mal in den Browser übertragen oder irgendwie so.

01:08:22.220 --> 01:08:27.260
 Ich glaube, das kam tatsächlich mal von Adobe, zumindest ist das ganz, ganz, ganz dunkel noch in meinem, in meinem Kopf.

01:08:27.880 --> 01:08:29.820
 Also vielleicht haben die den Standard damals mitgeschrieben.

01:08:29.820 --> 01:08:32.780
 Nicht, dass das jetzt irgendwas zur Sache tut, aber es bin ja einfach ein.

01:08:32.780 --> 01:08:35.460
 Darf man ja auch mal fallen lassen, solche.

01:08:35.460 --> 01:08:39.960
 Man darf, man darf auch mal einfach sagen, Unwahrheiten, die man.

01:08:39.960 --> 01:08:41.580
 Du willst doch, du willst doch nur die Zeit aufblähen.

01:08:41.580 --> 01:08:43.560
 Ja, richtig.

01:08:43.560 --> 01:08:48.120
 Richtig, ich wollte natürlich jetzt, also wir haben jetzt, äh, wir nehmen jetzt etwas über eine Stunde auf.

01:08:48.120 --> 01:08:50.220
 Nein, nein, nein, nein, nächster, nächster Punkt, nächster Punkt.

01:08:52.120 --> 01:08:53.640
 Äh, der nächste ist ja schon der letzte.

01:08:53.640 --> 01:08:53.960
 Ja.

01:08:53.960 --> 01:08:56.780
 Punkt sechs.

01:08:56.780 --> 01:08:58.500
 Kommt jetzt.

01:08:58.500 --> 01:09:02.540
 Ähm, und bevor wir jetzt total Banane werden, dadurch, dass wir Bier getrunken haben,

01:09:02.540 --> 01:09:08.160
 meins ist jetzt übrigens auch schon leer, aber ich hebe mir das Nächste, was auch, ähm, äh, dann aus Darmstadt wahrscheinlich kommt,

01:09:08.160 --> 01:09:09.960
 hebe ich mir für die nächste Folge auf.

01:09:09.960 --> 01:09:14.500
 Also hallo, lieber Stefan, äh, falls du uns wieder beim Joggen hörst, äh, nochmal vielen Dank.

01:09:14.500 --> 01:09:18.260
 Und falls du uns nicht beim Joggen hörst, kannst du ja jetzt auch nebenher Bier trinken, das ist auch gut.

01:09:18.260 --> 01:09:21.840
 So, äh, siehst du, ich bin, ich bin ganz gut da drin.

01:09:21.840 --> 01:09:22.840
 Ja, ich, ich merke schon.

01:09:22.840 --> 01:09:24.100
 So, irgendwie Kram zwischen reinzulabern.

01:09:24.100 --> 01:09:31.640
 Der nächste und damit letzte Punkt des Themas für heute sind, ähm, stylbare Scrollbars.

01:09:31.640 --> 01:09:38.240
 Ähm, der IÖ, ganz, äh, so ein bisschen in der Mottenkiste gewühlt, der IE konnte das mal.

01:09:38.240 --> 01:09:43.240
 Der IE hatte mal tatsächlich einen CSS-Weg, wie man die Scrollbars stylen konnte.

01:09:43.240 --> 01:09:47.480
 Ich erinnere mich da auch noch, also ich hab das auch selber damals dann angewendet, so für meine ersten Web-Experimente.

01:09:47.500 --> 01:09:58.740
 Ich hab das auch gemacht und das, und das, ich fand das echt cool, man konnte natürlich damit auch, äh, Schindluder treiben, wie das bei vielen solchen Sachen ist, wenn man, äh, wenn man so, so Standard, ähm, Systemelemente anfasst.

01:09:59.000 --> 01:10:06.340
 Und ich glaube, das ist auch der Grund, warum, äh, die Browser-Hersteller oft einem gar nicht so richtig Zugriff drauf geben wollen, weil halt Mist damit gemacht wird.

01:10:06.340 --> 01:10:16.600
 Ähm, trotzdem hätte ich das gerne, weil, äh, so, ich würde, ich hätte manchmal gerne so, ähm, ähm, sagen wir mal, unaufdringliche Scrollbalken zum Beispiel.

01:10:18.000 --> 01:10:23.920
 Unaufdringlicher, ähm, ähm, als das im Firefox beispielsweise standardmäßig der Fall ist, weil das sind riesig fette Dinger.

01:10:23.920 --> 01:10:33.720
 Wobei jetzt, das ist jetzt interessant gerade, ich sehe jetzt gerade in meinem Trello, dass der Scrollbalken offenbar irgendwie gestylt ist.

01:10:33.720 --> 01:10:37.060
 Das ist interessant, der ist nämlich halb durchsichtig in Firefox.

01:10:37.060 --> 01:10:37.840
 Seht ihr das mal aufgefahren?

01:10:37.860 --> 01:10:41.760
 Ja, der, der, der passt sich schon so ein bisschen der Farbe an durch, durch Transparenz.

01:10:41.760 --> 01:10:49.700
 Das ist interessant, das wusste ich gar nicht, dass das mittlerweile geht. Äh, seht ihr, hört ihr gerade live, äh, dass das Thema sich gerade in Luft auflöst, was ich gerade sagen wollte.

01:10:49.700 --> 01:11:01.220
 Ähm, ähm, ich möchte Zugriff auf das Styling des Scrollbalkens haben und zwar auch, ich möchte ihn auch vielleicht unter, unter bestimmten Umständen ausblenden können, so wie das Mobile-Browser teilweise machen.

01:11:01.220 --> 01:11:06.480
 Genau, das war jetzt auch das Erste, was mir jetzt so eingefallen ist, ja, dieses Verhalten im Mobile-Browser nachzuahmen.

01:11:06.900 --> 01:11:20.680
 Also auch allein schon, dass der, dass die Scrollbar quasi drüber liegt und, äh, und vielleicht auch nur erscheint, wenn ich dann hover oder wenn ich scrolle oder so und eben nicht den Platz fix da rechts einnimmt, was ja auch immer wieder das Problem ist, ich kriege die Scrollbar-Breite ja nicht raus.

01:11:20.680 --> 01:11:28.440
 Da geht's dann mit, mit Calc und mit 100 VW minus 100 Prozent und so, da gibt's dann schon so Möglichkeiten, das funktioniert aber auch nicht so wirklich und immer zuverlässig.

01:11:28.740 --> 01:11:39.280
 Also das ist so ein Problem, auch bei dem Redesign von unserer Firmenseite hatte ich das, ähm, wieder, dass dann irgendwie das Raster nicht gestimmt hat, dass ich halt auch VW aufgebaut hab, weil dann eben die Scrollbar wieder irgendwie im Weg war.

01:11:39.740 --> 01:11:47.540
 Ja, vor allem, gerade in Firefox finde ich's immer noch besonders nervig, dass die ganze Seite springt, sobald der Scrollbalken erscheint.

01:11:48.060 --> 01:11:58.920
 Also das kann ja durchaus mal sein, dass man ein Element aufklappt und dann die Seite plötzlich diesen, diesen, äh, plötzlichen Scrollbalken kriegt und der dann plötzlich alles zur Seite schiebt und das ist unfassbar hässlich.

01:11:58.920 --> 01:12:14.700
 Äh, das, das Problem ist mir bekannt, seit ich, äh, für Geld Webseiten baue und damals war der Trick, dass man, äh, die, äh, die Height vom Body oder vom HTML-Element, ich bin mir jetzt grad nicht mehr sicher, immer auf 100 Prozent gesetzt hat, sodass der Scrollbalken einfach immer da war.

01:12:14.800 --> 01:12:15.740
 Zumindest dieser Sprung.

01:12:15.740 --> 01:12:18.680
 Ja, oder halt Scroll auf Auto setzen, ja. Also Scroll Y.

01:12:18.680 --> 01:12:20.580
 Genau.

01:12:20.580 --> 01:12:23.380
 Äh, nee, nicht Auto, nee, auf Scroll setzen.

01:12:23.380 --> 01:12:31.680
 Äh, auf Scroll, ja, genau, aber damals, damals gab's, glaub ich, noch nicht X und Y, da bin ich mir, das ist schon eine Weile her, da gab's, glaub ich, da konnt ich das, glaub ich, noch nicht, äh, unabhängig voneinander.

01:12:31.680 --> 01:12:40.140
 Also das war damals so der Trick, dass man die Höhe immer auf, oder die Minheit, oder, äh, ja, Minheit muss es gewesen sein, auf 100 Prozent gesetzt hat, sodass der immer erschienen ist.

01:12:40.140 --> 01:12:43.740
 Ja, aber, äh, warum, was soll das?

01:12:43.740 --> 01:12:48.580
 Also das mit den Scrollbalken, das ist wirklich genauso wie mit den Formularelementen, also lass uns das bitte vernünftig machen.

01:12:48.580 --> 01:12:53.480
 Aber da ist schon was am Horizont, immerhin, das hab ich jetzt heute im Vorfeld noch kurz rausgefunden.

01:12:54.880 --> 01:13:03.380
 Ähm, ähm, was die Scrollbalken angeht, da gibt es zumindest schon, äh, was, äh, ein, ein, ein Standard, Standardisierungsversuch, nenn ich das jetzt mal.

01:13:03.380 --> 01:13:07.060
 Ähm, jetzt muss ich das grad noch mal, äh, kurz raussuchen.

01:13:07.060 --> 01:13:12.040
 Ich hatte den Link gerade schon, äh, offen und jetzt find ich ihn nicht mehr, weil ich so viele Tabs offen hab.

01:13:12.040 --> 01:13:14.180
 Ähm, da ist er.

01:13:14.320 --> 01:13:15.340
 Bist du auch so ein Tab-Messi.

01:13:15.340 --> 01:13:18.700
 Ich bin, ich bin ein totaler Tab-Messi, absolut.

01:13:18.700 --> 01:13:20.180
 Ähm, genau.

01:13:20.180 --> 01:13:23.040
 Also, bei, bei Can I Use findet man das auf jeden Fall schon.

01:13:23.040 --> 01:13:26.480
 Und das ist nicht komplett rot, das ist schon mal ein ganz gutes Zeichen.

01:13:26.480 --> 01:13:35.520
 Ähm, und dann gibt es, äh, bei drafts.cssworkinggroup.org gibt es das CSS Scrollbars Module Level 1.

01:13:35.520 --> 01:13:39.180
 Ähm, Ähm, Editor's Draft 24 der Februar 2020.

01:13:39.180 --> 01:13:45.380
 Also, das ist, ähm, also von dem Stand, ich weiß nicht genau, wann die angefangen haben, ich weiß auch nicht genau, wann die denken, fertig zu sein.

01:13:45.380 --> 01:13:47.340
 Auf jeden Fall, ähm, da gibt es schon was.

01:13:47.340 --> 01:13:49.860
 Ich will es halt natürlich jetzt haben.

01:13:49.860 --> 01:13:58.660
 Ähm, und vor allem, also so von wegen aufdringlich, es gibt, es gibt zumindest in Firefox, ähm, eine Möglichkeit, den Scrollbalken schmaler zu machen.

01:13:58.660 --> 01:14:03.640
 Wobei ich jetzt nicht mehr genau sofort auswendig weiß, ähm, die genaue Eigenschaft in CSS.

01:14:04.540 --> 01:14:08.260
 Aber wenn ihr danach googelt, findet ihr das auf jeden Fall, da bin ich mal wieder schlecht vorbereitet.

01:14:08.260 --> 01:14:14.140
 Das habe ich auf jeden Fall an, an der einen oder anderen Stelle, wo ich weiß, dass ein Scroll, eine Scrollbar mitten, mitten in der Seite auftritt.

01:14:14.140 --> 01:14:19.980
 Also vielleicht so ein horizontaler Scrollbalken, ähm, weil da Elemente nebeneinander sind, die eben breiter sein müssen.

01:14:19.980 --> 01:14:22.400
 Und man will das nicht so extrem aufdringlich haben.

01:14:22.400 --> 01:14:25.420
 Es gibt eine Möglichkeit, das schmaler zu machen.

01:14:25.420 --> 01:14:27.400
 Immerhin, aber das funktioniert nur in Firefox.

01:14:27.400 --> 01:14:32.720
 Das wäre nämlich auch noch, ähm, also ich verstehe das Argument zu sagen, okay, wir wollen den User nicht alles treiben lassen.

01:14:32.720 --> 01:14:43.480
 Und dann irgendwie knallrote Scrollbars und sowas oder, äh, ja, oder irgendwie, vielleicht kann man das auch ausnutzen, um irgendwie Schindluder zu treiben und den User in die Irre zu führen, dass er irgendwo draufklickt, wo er eigentlich nicht will oder was weiß ich.

01:14:44.160 --> 01:14:48.860
 Verstehe ich als Argument, aber da könnte man ja auch sagen, okay, wir lassen jetzt nicht alles zu.

01:14:48.860 --> 01:14:53.880
 Also man kann dem nicht irgendwie einen Border geben und irgendwie die Breite auf, auf tausend Pixel setzen oder was weiß ich.

01:14:53.880 --> 01:15:02.260
 Ähm, aber dass man irgendwie sagt, keine Ahnung, Scrollbar-Style unobtrusive, ja, und dann ist der, dann hat man das Mobile-Verhalten nachgebildet, ja.

01:15:02.800 --> 01:15:11.880
 Irgendwie sowas oder dass man halt Rundungen oder keine Ahnung, also man kann ja, man kann das ja einschränken, was man alles damit machen kann und das fände ich einfach, dass man so ein bisschen die Handhabe hat, wie der sich verhält.

01:15:12.300 --> 01:15:23.260
 Weil es gibt ja sehr schöne Beispiele, es gibt ja JavaScript-Klassen, die das nachbauen und da gibt's wirklich sehr schöne, die einfach elegant aussehen, ohne dass sie jetzt irgendwie auffällig wären, also da gibt's schon die Möglichkeit.

01:15:23.260 --> 01:15:29.660
 Und da sind wir auch wieder bei Usability und Accessibility, weil die halt eben meistens dann nicht in allen weiteren Fällen wieder funktionieren und das ist total blöd.

01:15:29.660 --> 01:15:40.560
 Und das wäre doch dann, das wäre auch wieder ein Argument, dann mach ich's doch lieber mit Standard-Bordmitteln, statt dass der User wieder irgendwas Custom einsetzen muss, was dann wieder die Accessibility kaputt macht, ja.

01:15:40.560 --> 01:15:47.140
 Also dann doch lieber Mittel an die Hand geben und sagen, okay, wir beschränken sie aber so, dass man dann nicht irgendwie Schindluder mit treiben kann.

01:15:48.040 --> 01:16:01.640
 Es gibt da schon Möglichkeiten in Chrome- beziehungsweise Chromium-basierten Browsern, ich hab jetzt grad mal aus Spaß CSS-Tricks aufgemacht, in Edge, also alle, die Chromium-basierten Browser haben und auch mal auf CSS-Tricks waren, was ihr bestimmt alle schon wart, liebe Hörerinnen.

01:16:01.640 --> 01:16:06.360
 Das ist, machst du das auch gerade?

01:16:06.360 --> 01:16:10.160
 Weil da wurde das, das ist to the max.

01:16:10.160 --> 01:16:11.080
 Ach ja, ja.

01:16:11.080 --> 01:16:13.460
 Das ist schon ein bisschen extrem.

01:16:14.060 --> 01:16:21.720
 Als ich diesen Regenbogen-Link-Effekt angeschaut hab, ist mir das aufgefallen, dass die ja auch ihre Scrollborder vergewaltigt haben.

01:16:21.720 --> 01:16:26.900
 Dieser Scrollbalken, wenn er klein ist, kann man ihn ertragen.

01:16:26.900 --> 01:16:33.620
 Wenn er groß ist, zum Beispiel auf der Newsletter-Seite, die nicht so hoch ist, dann kann man sich's kaum anschauen.

01:16:33.620 --> 01:16:40.920
 Also dass die Browser-Hersteller sowas vermeiden wollen, sorry Chris, das kann ich gut nachvollziehen.

01:16:40.920 --> 01:16:41.200
 Ja, absolut.

01:16:41.200 --> 01:16:45.140
 Das find ich auch schon fast ein bisschen zu extrem, aber ja.

01:16:45.140 --> 01:16:55.040
 Aber ich find die Idee eigentlich ganz gut, die du grad gesagt hast, so von wegen unobtrusive, dass man im Prinzip dieses unsichtbare Mobile-Behaviour da emuliert,

01:16:55.040 --> 01:17:02.980
 einfach mit einem kleinen Wert, sodass ich gar nicht mich um die Farben oder sowas kümmern muss, dass das irgendwie trotzdem Systemfarben oder sowas bleiben,

01:17:03.360 --> 01:17:06.940
 aber dass das Ding eben schmal wird und vielleicht verschwindet, wenn's grad nicht gebraucht wird.

01:17:06.940 --> 01:17:08.960
 Finde ich echt ne gute Idee.

01:17:08.960 --> 01:17:13.020
 Also auch bitte das umsetzen, mal abgesehen von den Styling-Möglichkeiten, die ich gerne hätte.

01:17:13.020 --> 01:17:19.160
 Also was mir da am wichtigsten wäre, also ja ich mein, wahrscheinlich sind das die Standardsachen,

01:17:19.300 --> 01:17:27.240
 aber was mir wichtig wäre, wäre, dass ich die Größe anpassen kann, also die Breite davon und die Farbe.

01:17:27.240 --> 01:17:33.140
 Die Farbe, aber wobei die Breite und Größe mir wichtiger wäre als die Farbe.

01:17:33.140 --> 01:17:39.720
 Und für mich vor allem, dass der Scrollbalken eben über der Seite liegt und nicht den Platz rechts wegnimmt.

01:17:39.720 --> 01:17:40.260
 Ja, auch das.

01:17:40.260 --> 01:17:46.620
 Dass ich da einfach mit kalkulieren kann, meine Seite ist die komplette Breite und die ist 100 VW und da wird nichts dran gerüttelt.

01:17:46.620 --> 01:17:54.860
 Also wenn ich zum Beispiel hier, ist auch interessant, auf der Standard-Startseite von Edge, wenn man die noch nicht geändert hat,

01:17:54.860 --> 01:18:01.640
 da ist rechts eigentlich ein ganz schöner Scrollbalken und der ist aber auch nicht nativ, wenn ich das richtig sehe.

01:18:02.220 --> 01:18:05.540
 Also das ist auch wieder irgend so ein, wahrscheinlich wird JavaScript gemacht.

01:18:05.540 --> 01:18:10.160
 Weil ich dachte zuerst so, ach cool, hat Edge einen anderen Scrollbalken als Chromium,

01:18:10.160 --> 01:18:13.880
 aber wenn ich jetzt auf unsere Seite gehe, dann sehe ich den ganz normalen Windows-Standard-Scrollbalken.

01:18:13.880 --> 01:18:21.000
 Und der ist eigentlich so, wie ich mir das vorstelle, da ist so ein kleiner abgerundeter Schieber eben drin,

01:18:21.000 --> 01:18:23.180
 nur hätte ich vielleicht die Leiste eben gerne noch weg.

01:18:23.180 --> 01:18:25.360
 Ach nein, das ist ja verrückt. Ich habe das gerade auch mal gemacht.

01:18:25.360 --> 01:18:29.940
 Das ist einfach die Startseite von, ja.

01:18:29.940 --> 01:18:37.360
 Ja, ich bin bestürzt. Das muss doch, nein, das kann nicht irgendein JavaScript-Ding sein, auf der Edge-Startseite doch nicht.

01:18:37.360 --> 01:18:38.640
 Das kann doch nicht sein.

01:18:38.640 --> 01:18:44.160
 Also du kannst auf den Scrollbalken Rechtsklick machen und Inspect klicken. Es wird nur irgendwie was anderes ausgewählt.

01:18:45.260 --> 01:18:47.060
 Ja, genau, das habe ich gerade auch gesehen.

01:18:47.060 --> 01:18:51.380
 Das ist interessant, das muss ich mir mal genauer anschauen und dann nächstes Mal vielleicht noch aufgreifen.

01:18:51.380 --> 01:18:56.120
 Das kann ich mir kaum, ach natürlich. Weißt du, was die verwenden?

01:18:56.120 --> 01:18:58.220
 Die verwenden das Webkit-Scrollbar.

01:18:58.220 --> 01:19:01.060
 Das ist natürlich, der neue Edge ist ja Webkit.

01:19:01.060 --> 01:19:05.720
 Die benutzen genau das, was wir gerade angesprochen haben, was eben in Webkit-basierten Browsern geht,

01:19:05.840 --> 01:19:09.920
 beziehungsweise in, ich weiß nicht, ob es auch in Safari geht, aber auf jeden Fall in Chrome.

01:19:09.920 --> 01:19:12.600
 Ja, das ist genau das hier.

01:19:12.600 --> 01:19:15.880
 Webkit, also Doppelpunkt, Doppelpunkt, Minus-Webkit-Scrollbar.

01:19:15.880 --> 01:19:19.140
 Ach genau, und dann Background-Color und sogar Border-Radius direkt.

01:19:19.140 --> 01:19:20.100
 Ah ja, okay, interessant.

01:19:20.560 --> 01:19:24.940
 Genau, das benutzen die da tatsächlich. Also das kannst du auf deiner Seite auch benutzen.

01:19:24.940 --> 01:19:28.480
 Ach, dann machen wir das doch, dann wird es demnächst eine schöne Scrollbar.

01:19:28.480 --> 01:19:29.520
 Sehr gut.

01:19:29.520 --> 01:19:33.440
 Ja, aber wie gesagt, wenn die dir zu breit ist, dafür gibt es in Firefox was.

01:19:33.440 --> 01:19:36.160
 Wo ich jetzt gerade nicht mehr ...

01:19:36.160 --> 01:19:40.980
 Das ist quasi eure Hausaufgabe, liebe Hörer und Hörerinnen.

01:19:40.980 --> 01:19:45.740
 Schaut mal nach, wie man in Firefox die Scrollbar schon mal kriegt, aber das geht auf jeden Fall.

01:19:46.700 --> 01:19:57.920
 Ist bei mir tatsächlich interessant, weil ich ja mit Firmeninternen Anwendungen einen relativ klaren Browser-Fokus habe.

01:19:57.920 --> 01:20:03.080
 Und da Firefox schon eine wichtige Rolle spielt und da ist das dann auch interessant.

01:20:03.080 --> 01:20:07.620
 Also da ist das dann auch, das bringt auf jeden Fall was, wenn man dann nur für einen Firefox was macht.

01:20:07.620 --> 01:20:11.540
 Okay, gut. Aber das ist interessant, ja.

01:20:11.540 --> 01:20:13.800
 Die nutzen das. Setzt das doch auch mal ein bei euch.

01:20:13.800 --> 01:20:15.860
 Ja, das machen wir demnächst bei uns auch.

01:20:15.920 --> 01:20:16.480
 Das machen wir.

01:20:16.480 --> 01:20:17.140
 In diesem Kino.

01:20:17.140 --> 01:20:18.520
 Gut.

01:20:18.520 --> 01:20:23.500
 Dann, ja, würde ich sagen, Thema abgeschlossen.

01:20:23.500 --> 01:20:24.860
 Thema abgeschlossen.

01:20:24.860 --> 01:20:28.820
 Und ja, mal gucken. Vielleicht machen wir nächste Folge schon Teil zwei.

01:20:28.820 --> 01:20:33.000
 Vielleicht fällt uns aber auch noch irgendwie was noch Tolleres ein und wir schieben noch was dazwischen.

01:20:33.000 --> 01:20:33.680
 Mal gucken.

01:20:33.680 --> 01:20:36.840
 Vielleicht habt ihr ja auch eine total geile Idee, was wir noch anderes machen können.

01:20:36.840 --> 01:20:38.160
 Oder ihr sagt, oh Gott, bitte nicht.

01:20:38.160 --> 01:20:40.420
 Es war so langweilig.

01:20:40.420 --> 01:20:41.980
 Bitte nicht nochmal.

01:20:41.980 --> 01:20:43.140
 Nein, nein, aber ...

01:20:43.140 --> 01:20:44.200
 Wir schicken euch auch Bier.

01:20:45.140 --> 01:20:47.460
 Ach so, stimmt, genau.

01:20:47.460 --> 01:20:49.420
 Mensch, das wollten wir noch ansprechen.

01:20:49.420 --> 01:20:52.880
 Die haben ja jetzt, also ich sag mal so, ich hab jetzt Bier geleckt.

01:20:55.700 --> 01:21:05.460
 Es ist jetzt so, mein lieber Kollege Stefan hat uns Bier gesponsert, weil er meinte, wir sollen mal Bier aus seiner Heimat aus Darmstadt trinken.

01:21:05.700 --> 01:21:12.620
 Beziehungsweise jetzt momentan, weil der Konstantin und ich jetzt uns nicht gegenüber sitzen, sondern das immer noch remote machen, ist das Bier jetzt erstmal nur bei mir, was auch sehr schade ist.

01:21:12.620 --> 01:21:14.760
 Aber das ist jetzt keine Aufforderung an dich, Stefan.

01:21:14.760 --> 01:21:16.140
 Dem Konstantin jetzt extra noch Bier.

01:21:16.140 --> 01:21:17.320
 Obwohl, doch, es ist ein Aufforderung.

01:21:17.680 --> 01:21:20.420
 Wir bringen dem Konstantin, wir brauchen einfach auch noch drei Flaschen Bier.

01:21:20.420 --> 01:21:22.160
 Muss ich die dann abholen bei euch.

01:21:22.160 --> 01:21:34.240
 Aber jetzt haben wir, wir haben jetzt Bier geleckt sozusagen und haben uns gedacht, naja, vielleicht will ja noch jemand anderes uns auch Bier aus seiner Heimat mal zeigen, dass wir das mal trinken.

01:21:34.240 --> 01:21:35.660
 Wir werden das dann auch erwähnen.

01:21:35.880 --> 01:21:41.700
 Vielleicht hört ihr auch ein Brauerei-Besitzer zu, der sagt, hey, da wollte ich schon immer mal mein Bier platzieren.

01:21:41.700 --> 01:21:45.000
 Ein Bier-Sponsoring würde ich vielleicht sogar auch annehmen.

01:21:45.000 --> 01:21:45.760
 Weiß ich nicht genau.

01:21:45.760 --> 01:21:47.760
 Wir finden ja Werbung doof, aber so ein Bier-Sponsoring.

01:21:47.760 --> 01:22:02.940
 Also wir werden, bis die Folge online ist, haben wir eine Postadresse oder eine Paketadresse auf unserer Homepage, die wir dann wahrscheinlich im Impressum stehen haben, nehme ich mal an, wo ihr uns dann Pakete schicken könnt.

01:22:02.940 --> 01:22:06.640
 Und dann darf da auch Bier dabei sein, gerne, natürlich.

01:22:06.640 --> 01:22:11.700
 Wir freuen uns natürlich auch über andere Sachen, also irgendwelche Knabbereien, Goldbarren.

01:22:11.700 --> 01:22:17.480
 Ja, Moment, wir müssen aber genau spezifizieren, was andere Sachen ist, dass ich jetzt die Leute hier in den Müll schicke.

01:22:17.480 --> 01:22:25.000
 Gehst zur Packstation, zu dem größten Fach und ist einfach so ein Müllsack drin.

01:22:25.000 --> 01:22:28.020
 Ja, schon brauchbare Dinge.

01:22:28.020 --> 01:22:29.280
 Und dann eine Flasche Bier irgendwo versteckt.

01:22:29.280 --> 01:22:30.560
 Nein, das natürlich nicht.

01:22:31.060 --> 01:22:36.860
 Falls es ein Bier gibt aus eurer Heimat, wo ihr sagt, hey, das muss mal gefeatured werden bei uns, das müsst ihr unbedingt mal probieren.

01:22:37.300 --> 01:22:46.080
 Übrigens, ich muss gerade noch kurz noch mal sagen, was ich heute noch mal gesagt habe, das Braustübel Darmstädter Pilsener Feinhopfig.

01:22:46.080 --> 01:22:49.560
 Ich fand, es war ein gutes Bier, hat mir gut geschmeckt.

01:22:49.560 --> 01:22:53.360
 Es ist hinten mal wieder, nee, das darf ich glaube ich nicht sagen, nee, das sage ich lieber nicht.

01:22:53.360 --> 01:22:53.980
 Doch, ich sage es.

01:22:53.980 --> 01:22:56.860
 Dicke Frauen dürfen es nicht trinken, steht drauf.

01:22:57.260 --> 01:23:03.060
 Oh Gott, was habe ich jetzt wieder gesagt?

01:23:03.060 --> 01:23:17.220
 Es tut mir leid, das ist oft meine Interpretation von diesem Piktogramm, was auf den Bierflaschen drauf ist, das natürlich sich mit Schwangeren beschäftigt und hat nichts mit dem Umfang von Menschen zu tun.

01:23:17.880 --> 01:23:18.820
 Sondern, ja, egal.

01:23:18.820 --> 01:23:25.500
 Jetzt, genau, wir sind wieder an den Punkt angelangt, wo es vielleicht einfach zu viel wird.

01:23:25.500 --> 01:23:27.440
 Wo wir doch einfach jetzt weitermachen.

01:23:27.440 --> 01:23:28.040
 Mit?

01:23:28.040 --> 01:23:29.500
 Schickt uns, oh.

01:23:29.500 --> 01:23:31.880
 Muss ich still sein.

01:23:31.880 --> 01:23:35.540
 Einfach wieder abgewürgt.

01:23:36.840 --> 01:23:38.120
 Ja, es ist okay.

01:23:38.120 --> 01:23:39.600
 Bin ich mir mittlerweile gewöhnt.

01:23:39.600 --> 01:23:44.640
 Ich weiß jetzt mittlerweile, wenn das Geilteil kommt, da muss ich kurz still sein.

01:23:44.640 --> 01:23:47.380
 Aber das Geilteil kommt heute auch von mir.

01:23:47.380 --> 01:23:49.400
 Und ich habe heute zwei Geilteile.

01:23:49.400 --> 01:23:53.660
 Mein erstes Geilteil ist Klettbandkabelbinder.

01:23:53.660 --> 01:24:00.060
 Mal was total physisches in unserer elektronischen, abstrakten Welt.

01:24:00.640 --> 01:24:04.700
 Und zwar habe ich ein bisschen Kabelorganisation gemacht bei mir.

01:24:04.700 --> 01:24:06.620
 Und ich kenne Klettbandkabelbinder schon eine Weile.

01:24:06.620 --> 01:24:11.000
 Aber ich habe jetzt nochmal bestellt, weil es gibt wirklich nichts Geileres.

01:24:11.000 --> 01:24:15.580
 Wenn man Kabel organisieren will und irgendwie zusammen machen will zu einem Strang oder so.

01:24:15.580 --> 01:24:20.140
 Klettbandkabelbinder ist einfach das, was ihr haben wollt.

01:24:20.140 --> 01:24:26.460
 Falls ihr uns finanziell unterstützen wollt, wir werden auch einen Amazon Affiliate Link in die Show-Notes packen.

01:24:26.460 --> 01:24:27.640
 Aber das ist tatsächlich nicht der Grund.

01:24:27.640 --> 01:24:30.500
 Ich habe mir echt 15 Meter davon bestellt.

01:24:31.200 --> 01:24:33.780
 Weil ich da auch sehr kleinlich bin bei der Kabelorganisation.

01:24:33.780 --> 01:24:43.100
 Ich habe bei meinem Fernseher und Anlage und Router steht da auch noch dabei, habe ich bestimmt 4, 5 Meter davon verbraucht.

01:24:43.100 --> 01:24:47.340
 Weil ich einfach, ja, ich wollte die Kabel verdammt nochmal organisiert haben.

01:24:47.340 --> 01:24:49.920
 Und das kommt dann auf so einer großen Rolle.

01:24:49.920 --> 01:24:52.140
 Und dann kann man sich so ein Stück abschneiden, so groß wie man braucht.

01:24:52.140 --> 01:24:53.120
 Man kann es wiederverwenden.

01:24:53.120 --> 01:24:54.900
 Es ist einfach geiles Zeug.

01:24:55.600 --> 01:24:57.120
 So, das zum Geilteil Nummer 1.

01:24:57.120 --> 01:25:00.980
 Geilteil Nummer 2 ist mir heute tatsächlich über den Weg gelaufen, weil ich es gebraucht habe.

01:25:00.980 --> 01:25:02.660
 Ist eine Webseite.

01:25:02.660 --> 01:25:05.080
 Da sind wir ganz wieder weg aus der physischen Welt.

01:25:05.080 --> 01:25:06.640
 Ist auch gar nicht so neu.

01:25:06.640 --> 01:25:10.140
 Ich kenne das schon eine Weile, aber ich bin heute nochmal darüber gestolpert und dachte so,

01:25:10.540 --> 01:25:12.620
 Das ist auf jeden Fall erwähnenswert, wenn man das mal braucht.

01:25:12.620 --> 01:25:15.200
 Und zwar BrowserDefaultStyles.com

01:25:15.200 --> 01:25:20.180
 Was die Seite macht, ist genau das, was sie sagt.

01:25:20.180 --> 01:25:25.300
 Nämlich, ich kann auf BrowserDefaultStyles.com ein HTML-Element eintippen.

01:25:25.300 --> 01:25:28.080
 Ich habe jetzt zum Beispiel mal Ordered List eingetippt.

01:25:28.480 --> 01:25:34.220
 Und dann kriege ich eine Liste, welcher Browser was für CSS-Standardstyles darauf anwendet.

01:25:34.220 --> 01:25:39.720
 Das kann durchaus interessant sein, wenn man bestimmte Sachen überschreiben will oder so denkt,

01:25:39.720 --> 01:25:48.180
 naja, ich will jetzt bei der Liste beispielsweise, will ich jetzt irgendwie nicht, dass die nach links irgendwie einen Margin noch hat oder so

01:25:48.180 --> 01:25:49.900
 oder irgendwie einen allgemeinen Abstand.

01:25:49.900 --> 01:25:50.660
 Was ist denn da?

01:25:50.660 --> 01:25:52.380
 Was muss ich mich denn da überhaupt kümmern?

01:25:52.800 --> 01:25:58.440
 Was kann denn potenziell irgendwie an Standardstyles gesetzt sein in allen Browsern, ohne dass ich alle durchtesten muss und das sehen muss?

01:25:58.440 --> 01:26:06.240
 Finde ich extrem praktisch, wenn man sowas irgendwie, so Standard-Elemente überschreiben will, dass man auf jeden Fall auch keine Eigenschaft vergisst.

01:26:06.240 --> 01:26:11.380
 Und dabei bin ich dann auch nochmal drauf gestoßen, dass viele Browser mittlerweile, das könnten wir vielleicht auch mal irgendwann,

01:26:11.380 --> 01:26:14.300
 vielleicht wird das nochmal Property der Woche, aber jetzt mal ganz kurz angeschnitten,

01:26:14.300 --> 01:26:17.260
 CSS-Logical-Properties verwenden.

01:26:17.860 --> 01:26:22.980
 Zum Beispiel Margin-Inline-Start statt Margin-Left beispielsweise.

01:26:22.980 --> 01:26:27.740
 Witzig, das habe ich nämlich gerade, habe mir rauskopiert, da bin ich nämlich auch oft durch die Seite drauf gestoßen

01:26:27.740 --> 01:26:33.300
 und habe es bei uns im Trello gespeichert unter der Themen-Idee Properties, die keiner nutzt.

01:26:33.300 --> 01:26:37.680
 Was? Nein, nein, nein, nein, nein, das ist die Zukunft, mein Freund, das ist die Zukunft.

01:26:37.680 --> 01:26:41.000
 Ja, da können wir in einer eigenen Sendung dann darüber sprechen.

01:26:41.620 --> 01:26:48.560
 Genau, also CSS-Logical-Properties, ich weiß nicht genau, das habe ich auf jeden Fall auf einer Konferenz vor mindestens einem Jahr oder noch länger mal gehört.

01:26:48.560 --> 01:26:55.580
 Und das ist, glaube ich, ich finde, es ist die, die eigentlich die, ja gut, es heißt auch schon Logic-Properties,

01:26:55.580 --> 01:27:03.380
 aber das ist die logische Fortsetzung von Left und Right, gerade wenn man es mit Multilanguage-Seiten zu tun hat,

01:27:03.460 --> 01:27:08.240
 wo auch der Text mal von rechts nach links läuft oder so, da ist genau das das, was man haben will.

01:27:08.240 --> 01:27:12.220
 Und deswegen benutzen die Browser das oftmals auch schon als Standardwert da,

01:27:12.220 --> 01:27:16.760
 der natürlich dann von Margin-Left beispielsweise überschrieben wird bei Margin-Inline-Start oder so.

01:27:16.760 --> 01:27:22.780
 Ja, genau, ich glaube auch mit Flexbox und Grid, da gibt es das auch schon oder da ist das teilweise schon so umgesetzt,

01:27:22.780 --> 01:27:26.700
 dass es da gar nicht mehr gibt Left und Right, sondern Start und End.

01:27:26.700 --> 01:27:30.780
 Finde ich eigentlich, wenn man genau darüber nachdenkt, auch die logischere Sache.

01:27:30.780 --> 01:27:34.160
 Aber wie gesagt, da können wir mal ein bisschen genauer drüber sprechen, aber nicht heute.

01:27:34.160 --> 01:27:36.800
 Nur ist mir das jetzt gerade über den Weg gelaufen.

01:27:36.800 --> 01:27:44.880
 Damit sind meine Geilteile fertig und ich habe gesehen, wir haben jetzt auch einen Geilteil-End-Dschingel.

01:27:44.880 --> 01:27:47.000
 Haben wir den eigentlich letztes Mal schon verwendet?

01:27:47.000 --> 01:27:52.080
 Achso, den haben wir letztes Mal abgespielt. Das war mehr so als Gag, aber wirklich, ich kann ihn auch nochmal.

01:27:52.080 --> 01:27:58.440
 Ja, ich fände das irgendwie gut, den nochmal abzuspielen, weil das Geilteil ist jetzt vorbei und dann kommt Folgendes.

01:28:00.780 --> 01:28:12.100
 Ihr habt es alle verstanden, das ist das Geilteil rückwärts.

01:28:12.100 --> 01:28:14.480
 Ich weiß nicht, ob das wirklich ...

01:28:14.480 --> 01:28:15.900
 Ob sich das so durchsetzen wird.

01:28:15.900 --> 01:28:21.460
 Ob sich das etabliert, das ist jetzt fürs Mal lustig, aber bei jedem Mal wird es wahrscheinlich unlustiger, nehme ich mal an.

01:28:22.120 --> 01:28:22.480
 Vermutlich.

01:28:22.480 --> 01:28:25.040
 Gut.

01:28:25.040 --> 01:28:25.840
 Bleibt noch.

01:28:25.840 --> 01:28:29.500
 Wir sind unter anderthalb Stunden. Wenn wir es jetzt nicht noch verkacken.

01:28:29.500 --> 01:28:32.780
 Also ich bin jetzt gerade bei 1,29,57.

01:28:32.780 --> 01:28:38.100
 Ich bin bei 1,29 bin ich jetzt. Ich habe nämlich die Aufnahme dann später erst begonnen als du.

01:28:38.100 --> 01:28:41.760
 Ja, aber dann reden wir doch jetzt nicht lange drumherum.

01:28:41.760 --> 01:28:45.720
 Es war wie gesagt eine Freude, dass so viel Feedback gekommen ist auch.

01:28:46.560 --> 01:28:56.540
 Ja, es macht immer mehr Spaß. Und dann würde ich sagen, macht weiter so, gebt uns Feedback, schreibt Kommentare, schreibt uns auf Twitter, antwortet mal auf die Tweets, die wir da so in den Raum stellen.

01:28:56.540 --> 01:28:58.180
 Es sind ja nicht so viele.

01:28:58.180 --> 01:29:00.860
 Nee, so viele ist es ja gar nicht. Da kann man ja schon ab und zu mal ...

01:29:00.860 --> 01:29:01.900
 Drei Tweets kann man auch mal antworten.

01:29:01.900 --> 01:29:02.340
 Genau.

01:29:03.660 --> 01:29:06.580
 Und genau, schickt uns Bier, wollte ich noch sagen.

01:29:06.580 --> 01:29:11.160
 Ja, schickt uns Bier, schickt uns Chips, schickt uns Pizza per DHL.

01:29:11.160 --> 01:29:18.600
 Also wir nehmen meistens, ihr könnt uns auch einfach so mal Pizza bestellen, solange wir sie dann nicht bezahlen müssen.

01:29:18.600 --> 01:29:21.680
 Aber ihr habt die Adresse nicht von uns, deswegen ...

01:29:21.680 --> 01:29:23.400
 Nee, das wird schwierig an die Parkstation.

01:29:23.400 --> 01:29:32.320
 Naja, ich weiß nicht. Also wenn man da jetzt findig wäre, könnte man, also wir nehmen normalerweise Donnerstagabend oder Freitagabend auf.

01:29:33.640 --> 01:29:40.420
 Vielleicht, also ein findiger Ingenieur schafft es vielleicht, eine Pizza so in die Parkstation einzuliefern, dass sie dann Donnerstagabend oder Freitagabend fertig ist.

01:29:40.420 --> 01:29:41.620
 Sagen wir mal Freitagabend.

01:29:41.620 --> 01:29:48.060
 Guck, bei den Temperaturen kannst du die vielleicht sogar roh schicken und die ist dann durch, bis wir sie verzehren.

01:29:48.060 --> 01:29:52.000
 Ja, also in Karlsruhe ist es gerade wirklich krass. Ich weiß nicht, wie es bei euch jetzt gerade ist.

01:29:52.000 --> 01:29:55.220
 Also man hört vielleicht auch den Ventilator surren im Hintergrund.

01:29:55.220 --> 01:29:59.960
 Ja, bei mir ist das mein Laptoplüfter. Den hört ihr die ganze Zeit schon.

01:30:00.500 --> 01:30:05.900
 Aber da das Ding jetzt wirklich auseinanderfällt, wird es jetzt tatsächlich Zeit. Vielleicht habe ich dann demnächst was Leiseres.

01:30:05.900 --> 01:30:08.260
 Gut, dann eine Sache noch zum Abschied.

01:30:08.260 --> 01:30:11.340
 Vergesst nicht die Mehrwertsteueranpassung.

01:30:11.340 --> 01:30:13.240
 Da hatten wir es schon mal letzte Folge drüber.

01:30:13.240 --> 01:30:17.280
 Jetzt demnächst ist der 1. Juli oder vielleicht ist er schon da, bis ihr es hört.

01:30:18.280 --> 01:30:24.020
 Und nicht vergessen in diversen Shop-Systemen oder als selbstständige Mehrwertsteuersenkung zum 1. Juli.

01:30:24.020 --> 01:30:29.760
 Ich habe schon die erste Mail bekommen von einer Firma, die sagt, dass sie es nicht weitergeben.

01:30:29.760 --> 01:30:32.120
 Ach, das schreiben die auch noch extra.

01:30:33.620 --> 01:30:38.040
 Ja, die haben das erklärt. Ich kann ja kurz sagen, ich weiß nicht, mache ich da jetzt Werbung für die? Egal.

01:30:38.040 --> 01:30:42.300
 Das war Stadtmobil in meinem Fall, also so ein Carsharing-Anbieter.

01:30:42.300 --> 01:30:47.260
 Und die haben gesagt, wir haben jetzt durch Corona-Krise so gelitten, das war so schlecht für unser Geschäft,

01:30:47.260 --> 01:30:52.340
 dass wir jetzt diese Mehrwertsteuersenkung nicht weitergeben, sondern gucken, dass wir irgendwie wieder auf die Reihe kommen.

01:30:52.340 --> 01:30:59.080
 Gehen wir davon aus, dass das stimmt, finde ich das eine sehr gute und transparente Art, damit umzugehen.

01:31:00.080 --> 01:31:02.280
 Gehen wir davon aus, dass es nicht stimmt, schämt euch.

01:31:02.280 --> 01:31:06.560
 Ich weiß es nicht. Also ich will niemandem was unterstellen.

01:31:06.560 --> 01:31:10.440
 Ich finde es aber auf jeden Fall immer besser, wenn transparent mit sowas umgegangen wird.

01:31:10.440 --> 01:31:12.940
 Ha, und ich habe es doch geschafft, nochmal abzuschweifen.

01:31:12.940 --> 01:31:17.740
 So, dann jetzt. Auf Wiedersehen.

01:31:17.740 --> 01:31:19.200
 Auf Wiedersehen.

01:31:30.080 --> 01:31:49.960
 Bis zum nächsten Mal.