WEBVTT

00:00:00.017 --> 00:00:05.517
Oh, Firefox, no signal. Safari, no signal. Web-Developers, positiv.

00:00:06.317 --> 00:00:09.637
Also ich habe die Abstimmung nicht gesehen, wo man dafür positiv abstimmen kann.

00:00:10.837 --> 00:00:14.197
Aber auch harte Braintwister. Aber SVG ist eh so eine komplett andere Welt.

00:00:14.317 --> 00:00:16.897
Also da muss man echt erst mal klarkommen da drin.

00:00:18.297 --> 00:00:21.777
Wir kommen heute nicht mehr drum rum. Also SVG ist hier das,

00:00:21.857 --> 00:00:23.577
was sich durch die Sendung zieht, glaube ich.

00:00:25.197 --> 00:00:27.517
Shep, ich weiß nicht, wir wollten das uns eigentlich aufheben,

00:00:27.557 --> 00:00:30.277
hatten wir vorher abgesprochen. Jetzt habe ich es gespoilert.

00:00:30.960 --> 00:00:57.360
Music.

00:00:58.677 --> 00:01:04.717
Liebe Hörer und Hörerinnen, feiert am 7.1. von 15 bis 18 Uhr mit uns die 600.

00:01:05.017 --> 00:01:09.517
Podcast-Episode bei einem einzigartigen Online-Event. Denn wir veranstalten

00:01:09.517 --> 00:01:10.917
eine Fishbowl-Diskussion.

00:01:11.057 --> 00:01:15.177
Bei einer Fishbowl-Diskussion können einige Teilnehmer und Teilnehmerinnen im

00:01:15.177 --> 00:01:20.897
Kreis diskutieren, während andere im sogenannten äußeren Kreis zuhören und dann einsteigen können.

00:01:21.217 --> 00:01:27.317
Wir freuen uns sehr auf diese interaktive und dynamische Form für einen Austausch zwischen uns WebDevs.

00:01:27.877 --> 00:01:32.557
Meldet euch über den Meetup-Link in den Shownotes an und seid Teil dieses spannenden Formats.

00:01:32.637 --> 00:01:37.917
Wir freuen uns schon sehr auf euch und jetzt erstmal viel Spaß bei der folgenden Revision.

00:01:44.097 --> 00:01:52.837
Revision 599 Hallo und herzlich willkommen zur Working Draft Revision 599. 99.

00:01:53.557 --> 00:01:58.437
Kurz vor der 600 haben wir uns hier nochmal zusammengefunden zu dritt und zwar mit dem Shep. Hi.

00:01:59.257 --> 00:02:02.657
Hallöchen. Der Peter ist am Start. Hallo. Moin, moin.

00:02:03.297 --> 00:02:06.957
Und ich bin auch dabei. Ich bin's, der Hans. Und wir haben uns gedacht,

00:02:07.137 --> 00:02:09.717
wir hauen jetzt einfach nochmal hier eine Glücksradfolge raus.

00:02:10.117 --> 00:02:14.557
Ich hoffe, ihr habt darauf alle Bock. Wir drei haben das auf jeden Fall.

00:02:14.857 --> 00:02:18.597
Und ja, gar nicht viel weitere Worte sind, glaube ich, nötig.

00:02:19.257 --> 00:02:24.457
Vielleicht nur ein Hinweis ist noch die Revision 600, die wird spannend.

00:02:25.037 --> 00:02:30.777
Schaut da doch mal vorbei. Wir haben ja vor, da ein bisschen mit euch zu interagieren,

00:02:30.897 --> 00:02:34.217
Hörerinnen und Hörer. Wir verlinken euch das Ganze auch nochmal in den Shownotes.

00:02:34.317 --> 00:02:37.537
Guckt da einfach mal rein und dann seid dabei. Vielleicht habt ihr es eben im

00:02:37.537 --> 00:02:38.577
Vorspann auch schon gehört.

00:02:39.177 --> 00:02:45.797
Alles klar, aber jetzt geht es dann los mit der Working Draft Revision 599 und dem Glücksrad.

00:02:46.497 --> 00:02:51.097
Shep, möchtest du einfach mal den Hotbutton pushen und wir gucken mal,

00:02:51.137 --> 00:02:54.297
womit wir uns als erstes befassen. Ich drücke den Hotbutton.

00:02:58.666 --> 00:02:59.706
Oh, spannend.

00:03:01.966 --> 00:03:05.666
Also, es geht unglaublich krass los.

00:03:08.406 --> 00:03:10.086
Und zwar mit einem,

00:03:12.126 --> 00:03:16.746
Asbach-Uralten HTML-Attribut, dem Klaas-Attribut.

00:03:18.386 --> 00:03:22.326
Oha, Klaas, was ist das denn nochmal? Ui, ui, ui, ui, ui.

00:03:22.446 --> 00:03:25.606
Ja, ich frag mich jetzt, ob das Ding, also ich hab Ich habe ja gerade gesagt,

00:03:25.806 --> 00:03:28.026
das wäre uralt. Ich gucke gerade schon.

00:03:28.346 --> 00:03:31.326
Genau, guck mal, wie alt ist das denn eigentlich? In welchem Standard ist das

00:03:31.326 --> 00:03:32.726
denn aufgetaucht als erstes?

00:03:33.306 --> 00:03:38.166
Und ja, wahrscheinlich, als es losging mit CSS, oder?

00:03:39.326 --> 00:03:43.046
Denke ich mal. Möglich, es fehlt ja sonst so ein bisschen am Use Case.

00:03:43.486 --> 00:03:46.526
Es ist halt auch so ein riesiges Problem bei Webstandards, das ich in letzter

00:03:46.526 --> 00:03:48.826
Zeit öfter habe, dass ich nicht irgendwie so eine Ressource finde,

00:03:48.926 --> 00:03:53.546
wo ich draufklicken kann und wo dann so drinsteht, seit wann gibt es das oder warum ist das so?

00:03:54.886 --> 00:03:57.026
Die Fragen stelle ich mir immer häufiger und dann steht das da nicht bei,

00:03:57.106 --> 00:03:59.686
sondern einfach nur so und so ist der Algorithmus und viel öfter möchte ich

00:03:59.686 --> 00:04:01.166
wissen, ja, okay, aber was bezweckt das?

00:04:01.966 --> 00:04:05.366
Ja, weil du ja auch so ein, sagen wir mal, so ein Web-Historiker bist.

00:04:05.546 --> 00:04:08.506
Aber die meisten sind das ja gar nicht. Aber stimmt schon, also das müsste man

00:04:08.506 --> 00:04:11.046
eigentlich auch mal, vielleicht ist das mal was, was wir mal bauen können.

00:04:11.646 --> 00:04:15.066
Also ich stelle es mir jetzt nicht allzu krass schwierig vor.

00:04:16.666 --> 00:04:20.446
Also man könnte ja zumindest mal die ganzen HTML-Attribute, die es gibt,

00:04:20.526 --> 00:04:27.186
aus der MDN rausscrapen und dann mal irgendwie gegen HTML-Standards werfen,

00:04:27.246 --> 00:04:28.586
gucken, ob man da was findet.

00:04:31.146 --> 00:04:34.586
Also grundsätzlich, ich glaube, was so ein bisschen spannend ist natürlich mit

00:04:34.586 --> 00:04:37.866
Klassen, ist immer, wie man das Ganze dann nutzt.

00:04:37.926 --> 00:04:40.866
Also wie man zum Beispiel auf so ein Class-Attribut selektiert.

00:04:41.186 --> 00:04:45.106
Ich meine, den Standard kennen wir alle, brauchen wir nicht viel drüber reden.

00:04:45.526 --> 00:04:52.626
Aber halt, wenn man dann sozusagen das Class-Attribut Per Attribute Selector

00:04:52.626 --> 00:04:55.206
zum Beispiel anspricht und sagt,

00:04:55.366 --> 00:05:02.846
okay, wenn da irgendetwas vorkommt mit, keine Ahnung, Box minus und jede Variante

00:05:02.846 --> 00:05:06.486
von irgendeiner Box Class soll selektiert werden.

00:05:06.486 --> 00:05:11.766
So kann man halt vielleicht auch manche Elemente selektieren,

00:05:11.846 --> 00:05:16.886
die bestimmte Klassenattribute haben oder ähnliches, wo man dann nicht eine

00:05:16.886 --> 00:05:20.366
explizite Klasse per CSS beispielsweise ansprechen will oder so.

00:05:21.606 --> 00:05:27.386
Das fiel mir jetzt noch kurz ein zu Klassenattributen.

00:05:27.446 --> 00:05:30.446
Ansonsten, gibt es da noch was Spannendes zu erzählen zu? Hm,

00:05:30.866 --> 00:05:33.986
also, ich hab jetzt hier die MDN-Seite auf.

00:05:34.166 --> 00:05:37.986
Da steht, dass es case-sensitive ist. Das ist vielleicht noch erwähnenswert.

00:05:38.346 --> 00:05:43.786
Also, weil man ja davon ausgehen könnte, dass es eben nicht case-sensitive ist.

00:05:43.846 --> 00:05:46.906
Weil ja einiges im Web ist nicht case-sensitive.

00:05:47.026 --> 00:05:48.966
Aber hier ist es das eben dann doch.

00:05:50.186 --> 00:05:51.966
Ja, weiß ich nicht. Äh ...

00:05:53.792 --> 00:05:59.132
Das Classlist-Interface ist gut. Und ich glaube, da gab es dann auch so verschiedene

00:05:59.132 --> 00:06:04.592
Ausbaustufen davon mit verschiedenen Methoden, die da drauf liegen,

00:06:04.772 --> 00:06:07.452
die dann noch nicht alle Browser konnten.

00:06:07.652 --> 00:06:13.052
Also ich glaube zum Beispiel, dass du mehrere CSS-Klassen adden kannst auf einen

00:06:13.052 --> 00:06:16.772
Schlag und removen kannst. Ich glaube, das kam erst ein bisschen später.

00:06:17.592 --> 00:06:24.572
Oder auch das Contains, glaube ich, Das ist auch nicht in der ersten Fassung drin gewesen.

00:06:26.212 --> 00:06:30.592
So, ich habe ja meine historische Recherche mal so grob abgeschlossen.

00:06:31.572 --> 00:06:37.532
Und was kam raus? Also die Frage ist halt, was man als Standard akzeptieren möchte.

00:06:39.592 --> 00:06:43.812
Aber eigentlich ist, nee, warte mal, es gibt ja noch hier HTML+.

00:06:43.812 --> 00:06:48.852
Das Problem ist ja, HTML 1.0 gibt es ja nicht so richtig, sondern das ist ja

00:06:48.852 --> 00:06:52.172
mehr so dieses, das hat halt eben der Tim Berners-Lee damals so aufgeschrieben.

00:06:52.272 --> 00:06:58.112
Und der erste richtige Standard, so richtig mit Brief und Siegel,

00:06:58.132 --> 00:07:03.752
scheint mir tatsächlich zu sein, der entsprechende IETF-RSC von HTML 2.0.

00:07:05.792 --> 00:07:10.172
Wann kam der raus? Das muss ich jetzt natürlich eben zurückscrollen.

00:07:11.112 --> 00:07:14.292
94 sowas? 95, 24. November 95.

00:07:16.472 --> 00:07:21.952
So, und alles davor scheint dann mehr so semi-offiziell zu sein.

00:07:22.392 --> 00:07:28.852
HTML Plus, a competing proposal, bla bla bla, expired, ja, 2.0 scheint ja erste offizielle zu sein.

00:07:29.752 --> 00:07:35.732
Und da war es schon drin? Ja. Aha. Das heißt, zwischendrin auf dem Weg von,

00:07:35.812 --> 00:07:40.692
ja, den Anfängen des Webs, wann war das, 90, 89? 89?

00:07:42.472 --> 00:07:46.472
91, da kam das erste Dokument her. Ah ja.

00:07:47.052 --> 00:07:51.492
Von da bis 95. Irgendwo zwischendrin hat sich jemand überlegt.

00:07:52.392 --> 00:07:57.412
Ist CSS nicht irgendwie aus 93 oder sowas? Dann würde das ja Sinn machen,

00:07:57.532 --> 00:07:59.672
dass das im Standard von 95 schon drin ist.

00:08:01.147 --> 00:08:04.347
Und das ist genau der Krempel, den man halt einfach nicht so ohne weiteres irgendwo

00:08:04.347 --> 00:08:06.967
nachschlagen kann. Das müsste eigentlich in Kenner-Use einfach mit drinstehen.

00:08:07.107 --> 00:08:10.287
Da kommt das her. Da wurde es erstmals definiert. Und dass das noch nicht drin

00:08:10.287 --> 00:08:11.647
ist, ist schon arg ärgerlich.

00:08:13.687 --> 00:08:19.507
96 steht hier. Ja. Interessant. Ich habe jetzt hier gerade die ersten Vorschläge

00:08:19.507 --> 00:08:23.027
für Style Sheets kamen zwischen 93 und 95 auf.

00:08:23.307 --> 00:08:28.467
Und der Harkon hat das 1994 CSS vorgeschlagen.

00:08:29.007 --> 00:08:32.467
Ja, genau. Das ist das offizielle Release, Jahr 96.

00:08:33.287 --> 00:08:37.327
Genau. Vorher kamen ja allerlei wirre Vorschläge auf, die ja gar nicht so wirr

00:08:37.327 --> 00:08:40.947
sind, sondern halt bloß das damalige heiße Problem nicht gelöst haben.

00:08:41.067 --> 00:08:42.947
Und da musste man erstmal ausklammbüßern, was will man überhaupt?

00:08:43.447 --> 00:08:44.967
Dann ist es halt CSS geworden. worden.

00:08:46.747 --> 00:08:52.407
Alright. Ich glaube aber, wir sind ja mit der spaßigen Eigenschaft der Klasse hier durch.

00:08:52.607 --> 00:08:56.727
Wenn es von den Hörerinnen und Hörern interessante Use Cases gibt,

00:08:56.807 --> 00:08:59.147
wie immer sind wir daran interessiert. Schreibt uns das mal.

00:08:59.307 --> 00:09:02.207
Was habt ihr mit einem Class-Attribut gemacht?

00:09:02.747 --> 00:09:08.427
Habt ihr da vielleicht mal ein Styling drüber applied für ein Element oder ähnliches? Spaß beiseite.

00:09:08.887 --> 00:09:15.747
Schreibt es einfach mal auf X oder auf Mastodon oder ruft an. Wir nehmen ab.

00:09:18.887 --> 00:09:24.067
Peter, hast du Bock auch mal auf den Hotbutton zu drücken, klicken?

00:09:24.327 --> 00:09:26.807
Ich drücke auf den Hotbutton und zwar jetzt.

00:09:27.727 --> 00:09:33.147
Und wir haben heute in die Trickkiste gegriffen.

00:09:33.187 --> 00:09:36.847
Das Element, was wir ausgewählt haben. Peter, erzähl uns mehr dazu.

00:09:37.367 --> 00:09:39.947
Ja, Style-Element. Natürlich, wenn ich auf den Button drücke,

00:09:39.947 --> 00:09:43.447
als Oberstyler, dann kommt das Style-Element dabei raus. Das versteht sich von selbst.

00:09:44.527 --> 00:09:51.007
Und das ist ja die stumpfestmögliche Version, wie wir CSS in die Webseite reinballern können.

00:09:51.287 --> 00:09:54.887
Style Tag auf, CSS reingeschrieben, Style Tag zu, zack, Boom, fertig.

00:09:56.407 --> 00:10:03.407
Ja, was mir dazu irgendwie wieder einfällt, ist, dass es mal eine Zeit lang,

00:10:03.447 --> 00:10:07.247
ich glaube, es gibt gar nicht mehr so eine Art Scoping gab da drauf.

00:10:07.887 --> 00:10:13.367
Ist das richtig, dass man das Attribut Scope mit festlegen konnte Und dann hat

00:10:13.367 --> 00:10:18.687
das nur sozusagen das Style-Element nur in dem Kontext gewirkt,

00:10:18.687 --> 00:10:21.787
in dem das Style-Element auch inkludiert war.

00:10:23.127 --> 00:10:26.887
Das kommt ja jetzt wieder, wenn ich richtig informiert bin. Aha,

00:10:27.087 --> 00:10:29.247
spannend. Was heißt das genau, das kommt wieder?

00:10:29.707 --> 00:10:33.247
Das weiß ich nicht. Ich habe wahrscheinlich mir das irgendwo mal angeschaut,

00:10:33.267 --> 00:10:37.427
festgestellt, das geht nirgendwo. Und dann habe ich das wahrscheinlich wieder ad acta gelegt.

00:10:38.707 --> 00:10:45.147
Okay, aber der... Scope-Pseudoklasse, bla bla bla, Browser-Unterstützung geht in allen, okay.

00:10:47.311 --> 00:10:51.811
Also das Scope-Attribut, also das hat so funktioniert, wie Hans das gerade gesagt hat.

00:10:51.911 --> 00:10:56.431
Und das ist aber jetzt in die Add-Scope-Rule hineingewandert.

00:10:56.531 --> 00:10:57.971
Also die macht das jetzt.

00:10:58.331 --> 00:11:04.151
Das heißt, du kannst theoretisch, also im Grunde kannst du mit Add-Scoping oder

00:11:04.151 --> 00:11:05.891
Add-Scope, kannst du sagen,

00:11:06.191 --> 00:11:13.611
all die Regeln, die ich jetzt quasi in das Add-Scope hineinstecke,

00:11:13.611 --> 00:11:16.951
Die sollen eben gescoped sein auf das Element,

00:11:17.231 --> 00:11:22.251
was bei der AdScope-Regel oder der Selektor, der da benannt wird.

00:11:23.111 --> 00:11:27.111
Aha, das heißt, ich schreibe praktisch AdScope und dann mache ich einen Selektor.

00:11:27.491 --> 00:11:32.331
Und alles, was innerhalb dieses Selectors ist, da gilt dann sozusagen alles

00:11:32.331 --> 00:11:35.251
in der Kaskade unten drunter, was ich dann definiere.

00:11:35.831 --> 00:11:40.611
Genau. Und du kannst, also das könntest du dann aber eben auch ganz woanders

00:11:40.611 --> 00:11:43.711
hinsetzen. Also du könntest das zum Beispiel in deinen globalen Style Sheet setzen.

00:11:43.911 --> 00:11:48.511
Das ging ja beim Scope Attribut nicht. Das hat ja quasi nur damals eingewirkt

00:11:48.511 --> 00:11:54.331
auf den DOM Tree, in dem es selber saß und konnte dann eben nicht nach oben arbeiten.

00:11:55.031 --> 00:12:01.011
Und mit AdScope kannst du das eben tun. Du kannst bei Scope auch ein Ende definieren.

00:12:01.051 --> 00:12:03.211
Das heißt also, das nennt sich dann Donut-Scope.

00:12:03.431 --> 00:12:08.151
Das heißt also, dass du sagst, du hast vielleicht so was wie Tab-Container und

00:12:08.151 --> 00:12:13.171
du willst aber dann das, was da drin ist, wiederum nicht erfassen mit deinen Styles.

00:12:13.291 --> 00:12:18.511
Dann kannst du sagen, das fängt an beim Tab-Container-Wrapper und endet aber

00:12:18.511 --> 00:12:20.571
quasi bei den Tabs selber.

00:12:20.651 --> 00:12:24.151
Und alles dazwischen wird gestylt und erfasst von meinem Style-Sheet.

00:12:25.003 --> 00:12:27.903
Aber eben dann wiederum nicht mehr die Sachen, die da drin sind.

00:12:28.343 --> 00:12:33.303
Also das ist dann quasi ein Vorteil gegenüber dem Scope-Attribut, was es nicht konnte.

00:12:35.323 --> 00:12:41.323
Ja, megacool. Du kannst auch das Style-Element eben mit so einer Add-Scope-Regel

00:12:41.323 --> 00:12:45.683
ohne Selektor, wenn ich mich nicht täusche, verwenden.

00:12:45.843 --> 00:12:48.563
Und dann funktioniert das genauso, wie du gerade gesagt hast.

00:12:48.683 --> 00:12:55.143
Also dann gilt das eben für den DOM-Tree, wo es drin steckt, abwärts.

00:12:57.623 --> 00:13:01.463
Das ist mega spannend, also weil genau dieses Style-Leaking,

00:13:01.643 --> 00:13:05.403
was damit halt verhindert wird, du kümmerst dich praktisch beim Styling wirklich

00:13:05.403 --> 00:13:08.223
nur um das Element oder die Elemente,

00:13:08.843 --> 00:13:13.803
für die du sozusagen auch die Rechte hast, in Anführungsstrichen, dich drum zu kümmern.

00:13:13.943 --> 00:13:17.963
Aber so ein Beispiel wie so eine Tab-Area oder ähnliches, gerade wenn man jetzt

00:13:17.963 --> 00:13:22.043
mal Microfrontend sich anguckt oder ähnliches, da hat man ja immer das Thema,

00:13:22.243 --> 00:13:28.023
okay, man muss halt spezielle Regeln festlegen dafür, dass etwas halt dann auch

00:13:28.023 --> 00:13:32.703
in dem richtigen Scope die Klassen bekommt und so weiter und so fort.

00:13:33.143 --> 00:13:38.363
Das ist damit ja ein Stück weit einfacher diesem Problem zu begegnen.

00:13:38.943 --> 00:13:42.743
Ja, ich meine, man könnte ja genauso gut einfach den Tab-Container mit Shadowdom

00:13:42.743 --> 00:13:45.923
basteln und dann den Content einfach in einen entsprechenden Slot rein projizieren,

00:13:45.963 --> 00:13:50.323
dann wird er ja auch nicht von den Styles als im Shadow-Tree groß belästigt.

00:13:51.243 --> 00:13:56.763
Ja, ich glaube, dass die Idee eben ist, dass man vielleicht eben eine Lösung

00:13:56.763 --> 00:14:01.123
hat, wo man nicht zu schweren Geschützen wie dem Shadow-Dom greifen muss.

00:14:02.803 --> 00:14:06.783
Ja, das ist so die Idee. Was mir halt eben daran fehlt, ist irgendwie so den

00:14:06.783 --> 00:14:12.443
Austausch vom Default, dass ich also irgendwie sagen kann, wenn ich hier in

00:14:12.443 --> 00:14:14.223
meine Webseite ein Style-Element reinschreibe,

00:14:15.003 --> 00:14:19.083
dann meine ich zum Beispiel, dass es halt immer in diesem Scope-Attribut-like,

00:14:19.563 --> 00:14:21.003
Stil arbeitet, also immer nur

00:14:21.003 --> 00:14:24.423
sein Parent-Element halt eben stylt und halt nicht irgendwie was anderes.

00:14:24.983 --> 00:14:27.163
Dass man da halt immer das dann da jetzt reinschreiben muss,

00:14:27.223 --> 00:14:31.003
dass das sozusagen ein Opt-in sein muss, finde ich ein bisschen lässig,

00:14:31.023 --> 00:14:35.603
dass es da keinen generalisierten wie gesagt Konfiguration quasi gibt,

00:14:35.663 --> 00:14:38.343
dass ich sagen kann, bei mir gilt halt eben dieses Verhalten grundsätzlich.

00:14:41.223 --> 00:14:44.383
Das ist wahrscheinlich schwierig mit der der Backwards-Compatibility,

00:14:44.663 --> 00:14:48.863
da müsste man sozusagen ja global für eine Website festlegen,

00:14:48.923 --> 00:14:52.643
hier, wir shiften praktisch in einen anderen Modus.

00:14:52.983 --> 00:14:56.023
Nö, man könnte ja auch erlauben, dass man das Style-Element erweitert,

00:14:56.023 --> 00:15:00.343
auch so Web-Component-mäßig Style, und dass man dann da drin irgendwie über

00:15:00.343 --> 00:15:02.923
Element-In-Tunnels sagen kann, bei dir gelten andere Regeln.

00:15:05.483 --> 00:15:08.463
Das gab es ja früher. Früher gab es ja dieses Is-Attribut, was man auf alle

00:15:08.463 --> 00:15:11.423
möglichen Elemente draufklatschen konnte, dann konnte man ja so den den Type

00:15:11.423 --> 00:15:15.103
Extend mit irgendwelchem extra Behavior, ohne so dessen grundsätzliches Aussehen

00:15:15.103 --> 00:15:16.543
oder Struktur zu verändern.

00:15:19.530 --> 00:15:24.350
Aber das gibt es ja nicht mehr oder jemals. Da erinnere ich mich jetzt nicht dran.

00:15:25.190 --> 00:15:29.630
Nee, das hat auch in Safari nie funktioniert, deswegen war das nie groß ausgerollt.

00:15:29.630 --> 00:15:32.350
Das gab es halt in Chrome und ich glaube, das war es dann auch.

00:15:33.810 --> 00:15:38.250
Ich glaube schon, ja. Also was ich halt persönlich mache, wenn ich dieses Verhalten

00:15:38.250 --> 00:15:40.970
haben möchte, so Style per Default gescoped,

00:15:41.790 --> 00:15:45.970
ich hole halt die ganz, ganz, ganz, ganz, ganz schweren Geschütze raus und die

00:15:45.970 --> 00:15:50.450
heißen halt dann eben Shadowdom und dann Style-Element in den Shadow-Dom reinklonen

00:15:50.450 --> 00:15:53.730
und aus der eigentlichen Webseite entfernen, was den genau gleichen Effekt hat,

00:15:53.790 --> 00:15:55.870
aber halt wirklich super, super brutal ist.

00:15:56.650 --> 00:15:59.710
Aber so brauche ich halt zum Beispiel meine Slides, wenn die irgendwie so extra Styling haben.

00:16:00.630 --> 00:16:04.370
Dann sage ich halt eben so, Styles werden halt nicht einfach rein projiziert

00:16:04.370 --> 00:16:06.930
in so einen Slot, sondern dann wird halt tatsächlich geklont und gelöscht,

00:16:06.990 --> 00:16:10.250
was halt super Banane ist, aber geht nicht anders.

00:16:11.710 --> 00:16:15.770
Ich meine, mittlerweile ist ja auch ganz viel, dass man halt HTML über JavaScript

00:16:15.770 --> 00:16:19.290
generiert und dann auch die Styles entsprechend darüber generiert,

00:16:20.270 --> 00:16:24.030
und irgendwelche Bildtools, die im Hintergrund deines Styles sowieso scopen

00:16:24.450 --> 00:16:31.150
und du dann praktisch innerhalb eines JavaScript-Modules halt dein CSS-Modul

00:16:31.150 --> 00:16:32.590
mitlädst oder ähnliches.

00:16:32.990 --> 00:16:36.010
Ja, in dem Szenario hast du ja eh kein Problem, weil du ja die Welt von Grund

00:16:36.010 --> 00:16:37.490
auf neu aufbaust. Dann ist ja alles toll.

00:16:37.590 --> 00:16:39.990
Aber wenn du das machen willst, was ich will, nämlich HTML schreiben,

00:16:40.110 --> 00:16:42.350
aber nach meinen eigenen Regeln, dann bist du am Arsch.

00:16:42.870 --> 00:16:45.950
Ja, nee, also der Punkt, auf den ich hinaus wollte, ist halt,

00:16:46.010 --> 00:16:49.690
vielleicht ist es gar nicht so applicable für viele Use Cases,

00:16:49.750 --> 00:16:53.530
weil halt viele Leute das mittlerweile, das Problem anders angehen.

00:16:54.510 --> 00:16:58.110
Aber natürlich hast du recht, wenn man halt in diesem Use Case unterwegs ist.

00:16:59.110 --> 00:17:02.270
Dann ist es logisch, dass man da auch eine Lösung braucht.

00:17:02.570 --> 00:17:05.810
Und vielleicht lohnt es sich dann aber auch halt nochmal sich zu überlegen,

00:17:05.890 --> 00:17:08.930
ist nicht das Shadow DOM doch der richtige Weg?

00:17:09.090 --> 00:17:15.430
Oder hilft jetzt die AddScope-Rule in Zukunft? Ähm, ja.

00:17:43.190 --> 00:17:46.870
Oder, was heißt andere, sollten wir nicht irgendwie vom Style-Element nochmal

00:17:46.870 --> 00:17:50.350
was erwähnen, was so die Attributliste anbelangt?

00:17:50.470 --> 00:17:54.470
Also ich habe ja das Style-Attribut auch gerne mal für ein Print-Style-Sheet

00:17:54.470 --> 00:17:55.730
genutzt in der Vergangenheit.

00:17:56.530 --> 00:18:00.010
Weiß jetzt nicht, wie viel Print-Optimierung ihr noch für die Webseiten macht,

00:18:00.130 --> 00:18:01.210
aber vielleicht gibt es ja auch noch,

00:18:04.030 --> 00:18:08.850
anderes Interessantes. Naja, ich finde es halt eben schön, dass so Style-Elemente

00:18:08.850 --> 00:18:11.990
Style-Sheets beinhalten und die können können deaktiviert sein,

00:18:12.830 --> 00:18:15.430
aber die kannst du halt nicht deaktivieren per irgendeinem Attribut,

00:18:15.450 --> 00:18:18.270
sondern da musst du dann wieder mit JavaScript rumfriemeln und die auf Disabled setzen.

00:18:19.954 --> 00:18:22.934
Und die sind auch nicht ohne weiteres zu klonen, was ganz schade ist,

00:18:22.974 --> 00:18:27.894
weil du hast ja heutzutage auch Constructable Style Sheets, wo du im Prinzip sagen kannst,

00:18:27.994 --> 00:18:30.814
ich mache jetzt hier einen mit New CSS Style Sheet und dann kannst du den wieder

00:18:30.814 --> 00:18:34.474
in deine Web Component einfach so rein deklarieren und dann sharen die Style

00:18:34.474 --> 00:18:37.054
Sheet Instanzen, wenn du davon mehrere Instanzen hast und das wäre alles super

00:18:37.054 --> 00:18:41.554
effizient, aber sämtliche APIs da drumherum sind so unglaublich unbequem.

00:18:41.554 --> 00:18:44.414
Es könnte alles sehr viel einfacher sein, wenn es wirklich die Möglichkeit gäbe,

00:18:44.474 --> 00:18:47.134
das zu machen, was ich jetzt gerade gesagt habe, was keiner implementieren sollte,

00:18:47.234 --> 00:18:50.994
nämlich eine Möglichkeit, das Style-Element zu hacken, mithilfe von Customized

00:18:50.994 --> 00:18:51.914
Build-Ins oder was auch immer.

00:18:54.434 --> 00:18:59.794
Aber es geht. Das ist ja die wichtige Info. Ja. Ja, ich habe noch mal eine Frage.

00:18:59.934 --> 00:19:03.214
Vielleicht wisst ihr das ja auch. Es gab ja mal dieses Type Attribut.

00:19:03.234 --> 00:19:06.494
Das kennt man auch ansonsten noch so von den Link Elementen oder so.

00:19:07.094 --> 00:19:13.154
Das mittlerweile deprecated auch auf dem Style, wo man dann Text slash CSS als

00:19:13.154 --> 00:19:15.494
sozusagen Mime Type angegeben hat.

00:19:17.394 --> 00:19:21.674
Warum gab es das? Das war einfach angedacht. Vielleicht kann man in der Zukunft

00:19:21.674 --> 00:19:27.914
noch mal mit anderen Typen Styles vergeben. Oder gab es das mal?

00:19:29.214 --> 00:19:32.814
Ich glaube, nicht wirklich implementiert. Aber ich meine, versetzt dich in die Lage zurück.

00:19:32.934 --> 00:19:36.294
Du willst jetzt CSS da rein implementieren und alle anderen sagen,

00:19:36.494 --> 00:19:38.614
nee, nimm aber meinen Style-Sheet-Entwurf, der viel besser ist,

00:19:38.654 --> 00:19:40.374
aber komplett anders, komplett inkompatibel.

00:19:40.674 --> 00:19:42.934
Und dann musst du dich halt für einen entscheiden als erstes.

00:19:42.934 --> 00:19:43.734
Und was sagst du dann natürlich?

00:19:43.974 --> 00:19:46.434
Ja, aber keine Sorge, Leute, wir machen da ein Time-Attribut rein.

00:19:46.474 --> 00:19:48.934
Das heißt, wenn in Zukunft eure Idee sich als die bessere herausstellt,

00:19:49.054 --> 00:19:51.174
dann haben wir da eine Möglichkeit, was anderes noch reinzubauen.

00:19:53.714 --> 00:19:56.874
Siehe ja auch JavaScript. Da gab es ja irgendwie mal schon eine Zeit lang irgendwie

00:19:56.874 --> 00:19:59.474
Visual Basic im Internet Explorer. Ja, stimmt.

00:20:00.394 --> 00:20:03.934
Da hat das Type-Attribut ja Sinn gemacht. Genau.

00:20:05.784 --> 00:20:12.084
Ja, also für die Überzeugungsarbeit und um sich das in Zukunft offen zu halten,

00:20:12.244 --> 00:20:15.084
ist das auf jeden Fall ein guter Weg gewesen.

00:20:16.144 --> 00:20:19.604
Ich habe es nur irgendwie noch nie halt gesehen, dass es was anderes gab.

00:20:19.884 --> 00:20:22.304
Naja, haben wir das auch geklärt.

00:20:22.624 --> 00:20:26.744
Noch eine spannende Eigenschaft oder ähnliches, was ihr gerne noch zum Style-Element

00:20:26.744 --> 00:20:28.224
erwähnen wollen würdet?

00:20:31.104 --> 00:20:37.344
Naja, vielleicht noch einfach, weil es Upcoming ist, es gibt so ein globales Attribut,

00:20:38.824 --> 00:20:43.104
Blocking, das so gerade in der Mache ist, das noch so ein bisschen experimentell

00:20:43.104 --> 00:20:49.584
ist, dass man eben auch darauf liegen kann mit dem man bestimmte Elemente,

00:20:50.924 --> 00:20:55.464
markieren kann und sagen kann, dass sie zum Beispiel also momentan kann man

00:20:55.464 --> 00:20:57.364
bei Blocking nur Render reinschreiben,

00:20:58.044 --> 00:21:04.884
also dass man eben sagt hey, dieses in dem Fall dieses Style-Element wenn,

00:21:05.504 --> 00:21:10.704
das ist Render-Blocking also wenn zum Beispiel da Add-Import Sachen drin sind,

00:21:10.864 --> 00:21:14.884
dann sollen die quasi erstmal alle importiert und aufgelöst werden und dann.

00:21:16.664 --> 00:21:20.964
Genau, dann wird das Ganze, die Seite erst gerendert, wobei ich den Eindruck,

00:21:21.064 --> 00:21:24.844
also ich würde jetzt aus dem Bauch aus sagen, dass das sowieso so wäre Oder

00:21:24.844 --> 00:21:28.064
ist Add-Import asynchron? Ich weiß es nicht.

00:21:29.604 --> 00:21:35.904
Und die Idee da ist eben, zum Beispiel, wenn du diese View-Transitions machst,

00:21:36.204 --> 00:21:43.744
die es bald gibt, die sollen ja auch als Multi-Page-Application-Transitions dann funktionieren.

00:21:43.804 --> 00:21:47.824
Das heißt, du gehst von Seite A zu Seite B und dann kannst du auf beiden Seiten

00:21:47.824 --> 00:21:53.744
auch per CSS Bereiche markieren, die ineinander quasi überblenden sollen.

00:21:54.164 --> 00:21:57.804
Sodass du quasi so eine smoothe Navigation hast.

00:21:57.964 --> 00:22:03.944
Und das Problem da ist, dass die Browser-Seiten eben progressiv rendern.

00:22:04.184 --> 00:22:07.784
Und das möchtest du halt bei so einer Überblendung eben nicht.

00:22:07.984 --> 00:22:12.964
Also da willst du eigentlich erst, du willst in das Fertige überblenden und

00:22:12.964 --> 00:22:15.504
nicht in irgendwas, das gerade im Aufbau befindlich ist.

00:22:16.484 --> 00:22:20.804
Genau, und da geht man dann jetzt hin und macht eigentlich was,

00:22:20.924 --> 00:22:25.104
was ein totales Anti-Pattern ist, weil wir ja alle gelernt haben,

00:22:25.204 --> 00:22:31.044
progressiv rendern, non-blocking, asynchronen, so möglichst schnell Dinge auf den Schirm kriegen.

00:22:32.104 --> 00:22:35.104
Und hier blockiert man das Rendern eben.

00:22:35.204 --> 00:22:39.664
Also man hält halt länger die weiße Seite, um dann was Fertiges zu haben,

00:22:39.744 --> 00:22:40.744
in das man überblenden kann.

00:22:40.924 --> 00:22:44.304
Moment, das verstehe ich jetzt nicht. Das Blocking-Attribut ist auf dem Style-Element.

00:22:44.804 --> 00:22:47.264
Und das löst ein Problem in den View-Transitions.

00:22:49.274 --> 00:22:53.574
Also das ist zumindest einer der Gründe, warum es überhaupt dieses Blocking-Attribut gibt.

00:22:54.554 --> 00:22:57.994
Also ist ja immer so, wir lösen Probleme, wir haben neue Probleme.

00:22:58.874 --> 00:23:02.454
Wir haben View-Transitions, geil. Oh shit, wir haben neue Probleme.

00:23:03.094 --> 00:23:06.694
Ja, ich meine, bei View-Transitions könnten ja auch tatsächlich nicht funktionieren.

00:23:06.694 --> 00:23:10.154
Jetzt irgendwie nicht so wegen JavaScript-Effekt oder so was,

00:23:10.194 --> 00:23:12.294
sondern auch einfach hier Reduced Motion.

00:23:12.354 --> 00:23:15.274
Wenn ich irgendwie so das in meinem System aktiviere, würde ich ja auch sagen

00:23:15.274 --> 00:23:16.874
wollen, ich will auch keine View-Transitions haben.

00:23:17.594 --> 00:23:21.254
Und dann krabbe ich keine View-Transitions, aber weil ja sozusagen das Blocking-Verhalten,

00:23:21.814 --> 00:23:24.794
losgekoppelt ist von den View-Transitions, sondern einfach dann so auf alle

00:23:24.794 --> 00:23:28.494
Style-Elemente geballert ist unter der Annahme, das würde halt eben View-Transitions

00:23:28.494 --> 00:23:32.654
geben, dann habe ich am Ende irgendwie langsam ladendere Seiten für einen Effekt,

00:23:32.654 --> 00:23:35.554
den ich nicht sehe und nicht sehen möchte, das wäre doch Banane.

00:23:37.294 --> 00:23:42.514
Ja, und das wäre auch Banane. Ja. Ich bin da auch noch nicht,

00:23:42.514 --> 00:23:44.114
also hier, wir gucken noch mal da,

00:23:44.994 --> 00:23:49.974
hier Chrome-Plattform-Status und dann kommen wir da Firefox,

00:23:50.394 --> 00:23:52.414
no signal. Safari, no signal.

00:23:52.734 --> 00:23:54.714
Web-Developers, positive.

00:23:57.974 --> 00:24:02.014
So, wo ist denn hier der Explainer? Also ich habe die Abstimmung nicht gesehen,

00:24:02.134 --> 00:24:03.754
wo man dafür positiv abstimmen kann.

00:24:05.694 --> 00:24:11.854
Ja. Wahrscheinlich warst du da gerade im Urlaub an dem Tag. Das wird sein. Ja.

00:24:12.614 --> 00:24:15.134
Okay, pass auf, hier ist der Explainer dazu.

00:24:18.974 --> 00:24:19.474
Okay,

00:24:21.974 --> 00:24:22.714
Use Cases.

00:24:25.257 --> 00:24:31.317
Block rendering on critical web fonts to prevent layout shifting or a flash of unstyled text.

00:24:31.577 --> 00:24:33.997
Okay. Gut, kann man machen.

00:24:35.477 --> 00:24:38.977
Block rendering on script inserted stylesheets or scripts.

00:24:39.217 --> 00:24:45.397
This prevents flash of unstyled content e.g.

00:24:45.497 --> 00:24:50.277
The page uses a loader script to load the actual business stylesheets.

00:24:50.537 --> 00:24:53.277
Und das löst ja auch nur ein Problem, wenn da irgendwas nachgeladen wird,

00:24:53.357 --> 00:24:56.597
was tatsächlich asynchron wäre, sprich Imports, wenn sie asynchron wären,

00:24:56.737 --> 00:24:57.757
und irgendwelche Bilder.

00:25:01.917 --> 00:25:05.437
Also mir scheint halt der Hebel für, verhalte dich jetzt so oder so,

00:25:05.537 --> 00:25:08.077
einfach an der komplett falschen Stelle angebaut zu sein.

00:25:09.497 --> 00:25:13.437
Ja, also hier ist noch so ein Use Case, den ich so ein bisschen besser nachvollziehen kann.

00:25:14.357 --> 00:25:18.617
Wenn du es auf ein asynch, also ein asynchrones Script drauflegst,

00:25:18.717 --> 00:25:23.377
dann also stell dir vor, so A-B-Testing-Tools, dann könntest du quasi quasi

00:25:23.377 --> 00:25:25.657
die Non-Blocking laden.

00:25:25.817 --> 00:25:29.557
Und dennoch würde die Seite noch nicht gerendert.

00:25:29.637 --> 00:25:35.497
Also im Untergrund wird schon alles gemacht und getan, aber es wird halt noch nichts dargestellt.

00:25:35.797 --> 00:25:40.197
Das heißt also, der eigentlich die Verarbeitung ist, wird nicht mehr ausgebremst.

00:25:40.237 --> 00:25:47.337
Aber das Rendern, das passiert eben erst, wenn dieses asynchrone Skript ausgeführt ist.

00:25:47.557 --> 00:25:50.517
Also man blockiert nicht den HTML-Parser, sondern man sagt bloß Renderer,

00:25:50.557 --> 00:25:51.317
warte noch einen Moment.

00:25:52.077 --> 00:25:55.937
Ja, genau. Okay, das macht Sinn.

00:25:56.257 --> 00:26:00.477
Und Request-Animation-Frame wird dann nicht gefeuert? Ja, genau.

00:26:08.751 --> 00:26:12.511
Ja, also ich bin, weiß jetzt, ich

00:26:12.511 --> 00:26:19.171
bin da auch ein bisschen sagen wir mal underwhelmed von dem Ding, aber ja.

00:26:19.171 --> 00:26:21.551
Vielleicht werden wir ja in Zukunft noch ein bisschen mehr sehen,

00:26:21.671 --> 00:26:26.551
wie das unser Web Engineering positiv beeinflussen kann oder vielleicht gibt

00:26:26.551 --> 00:26:27.771
es auch nochmal eine ein oder andere,

00:26:28.611 --> 00:26:32.751
Änderung und dann haben wir nochmal eine Spezialsendung, vielleicht eine mit

00:26:32.751 --> 00:26:34.851
einer 6 vorne oder 600 irgendwas.

00:26:35.251 --> 00:26:38.571
Eine Brennpunktsendung machen wir dann. Eine Brennpunktsendung zum Thema Page

00:26:38.571 --> 00:26:45.811
Transitions oder Blocking Blocking Renderen. Die Vorteile von Blocking Renderen.

00:26:46.451 --> 00:26:53.711
Dann werfen wir das asynchrone Horn weg. Blasen nur noch in das blockierende Renderhorn. Ja.

00:26:54.951 --> 00:26:59.131
Und am Ende machen wir einen Wettbewerb, wer am meisten blockieren kann und

00:26:59.131 --> 00:27:01.131
die Webseite am langsamsten laden.

00:27:01.731 --> 00:27:04.671
Ja. Aber dazu mehr im nächsten Jahr.

00:27:07.791 --> 00:27:11.451
Darkhouse und so. Ja, nicht schlecht.

00:27:13.451 --> 00:27:15.891
Alright, aber bis dahin können wir uns ja dann doch nochmal,

00:27:15.891 --> 00:27:19.711
vielleicht auch nochmal mit was anderem beschäftigen vielleicht finden wir ja

00:27:19.711 --> 00:27:22.951
auch noch was in unserer schönen ja,

00:27:23.491 --> 00:27:27.571
in unserer schönen Bibliothek, genau, ich würde einfach mal den Button jetzt

00:27:27.571 --> 00:27:31.411
mal selber, mich mal einmoderieren und selber einmal den Button drücken Zieh

00:27:31.411 --> 00:27:35.651
mal einfach aus dem Schrank Ja, und das, ich sag mal Ach du Schande,

00:27:37.191 --> 00:27:41.111
Also schaffe, dass die dass die zwei jetzt hier, die zwei zwei Sachen,

00:27:41.131 --> 00:27:45.691
die wir bisher hatten, ja doch schon sehr, also das war ja was für ein Mainstream sozusagen.

00:27:46.251 --> 00:27:51.631
Haben wir jetzt hier eine spezielle API und man wird es nicht glauben,

00:27:51.751 --> 00:27:53.211
die ist nicht mal verlinkt bei uns.

00:27:53.571 --> 00:27:58.751
Das ist die SVG Text Positioning Element API.

00:27:59.631 --> 00:28:03.511
Wer kennt sie nicht? Und darin geht es um das DY,

00:28:05.146 --> 00:28:11.166
Die DY-Eigenschaft. Und da habe ich jetzt mal hier die Seite zu geöffnet und

00:28:11.166 --> 00:28:14.606
festgestellt, boah, Leute, ich habe davon keine Ahnung.

00:28:15.026 --> 00:28:17.926
Ich kann dir das sagen, wenn du das noch nie gesehen hast, ist das auch richtig.

00:28:18.066 --> 00:28:22.406
Das ist ein Implementierungsdetail. Das ist eine Basisklasse in Anführungszeichen.

00:28:22.526 --> 00:28:26.126
Also so ein Grundinterface. Und das wird halt von dem erben,

00:28:26.146 --> 00:28:28.166
so Sachen wie das SVG-Textelement.

00:28:28.266 --> 00:28:31.486
Also die Dinger, mit denen du wirklich Text in dein SVG rinderst und ein paar

00:28:31.486 --> 00:28:35.506
andere erben von dem, damit sie halt so Features haben wie eine XY-Position

00:28:35.506 --> 00:28:37.866
und so. Das ist wirklich nur eine reine Basisklasse.

00:28:41.166 --> 00:28:46.606
Ja, also anscheinend kann man damit irgendwas in SVG machen,

00:28:46.726 --> 00:28:49.026
aber ich weiß nicht genau, ob wir das erklären müssen.

00:28:49.846 --> 00:28:52.906
Du kannst Text rendern. Also ist ja irgendwie jetzt nicht so beknackt,

00:28:52.906 --> 00:28:56.746
dass du sagst hier, jo, mach ein Textelement in SVG rein und dann hier so Position,

00:28:56.866 --> 00:28:58.186
Koordinaten, zack, bumm, hast du Text.

00:28:59.086 --> 00:29:02.606
Ja gut, das erklärt sich von selbst, dass man das braucht in einem SVG.

00:29:03.266 --> 00:29:07.846
Aber halt diese Basisklasse jetzt hier mit Text-Positioning-Element und darauf

00:29:07.846 --> 00:29:12.766
die Eigenschaft dy, die das dy-Attribute, was ist denn dy?

00:29:14.066 --> 00:29:21.306
Also y ist die y-Koordinate, okay, aber die d-Sache, was bedeutet das?

00:29:23.226 --> 00:29:29.086
Warte mal, das haben wir gleich. dy ist Indicates a shift along the y-Axis.

00:29:32.026 --> 00:29:35.646
Ich glaube, das ist relativ zu einem anderen. Genau.

00:29:36.735 --> 00:29:39.675
Ja. Okay. Ich erinnere mich.

00:29:40.015 --> 00:29:44.015
Genau. Also ich habe das benutzt, weil,

00:29:45.695 --> 00:29:50.555
wir veranstalten hier in der örtlichen

00:29:50.555 --> 00:29:54.895
Grundschule einmal im Jahr so einen Trödelmarkt und ich habe das,

00:29:55.055 --> 00:30:00.595
ich musste das Standlayout machen und habe ich mir so schön auf Google Maps

00:30:00.595 --> 00:30:06.495
so quasi die Grafik geholt von oben, das Satellitenbild,

00:30:07.055 --> 00:30:10.215
und dann hätte ich in irgendein Programm reingehen können, wie,

00:30:10.955 --> 00:30:13.275
hier, was weiß ich, irgendein Vektorgrafikprogramm,

00:30:14.115 --> 00:30:19.295
und hätte das draufsetzen können, aber dann hätte ich auch per Hand alles rumschubsen

00:30:19.295 --> 00:30:22.255
müssen und ich hab mir gedacht, nee, ich hab ja meine Anmeldungen,

00:30:22.295 --> 00:30:24.395
die übrigens alle auf Tito sind, ich exportiere mir die,

00:30:25.155 --> 00:30:30.975
und dann fütter ich die eben ein und generiere diese ganzen Stände daraus automatisch

00:30:30.975 --> 00:30:33.835
und die Reihen und das hab ich halt mit SVG gemacht.

00:30:34.975 --> 00:30:41.795
Und da hab ich dann eben im Prinzip per Hand das DOM für das SVG geknetet.

00:30:42.035 --> 00:30:45.895
Und da hab ich auch dieses DY benutzt, um da ...

00:30:46.835 --> 00:30:49.915
Also, du hast diese Textelemente, und dann kannst du in die ...

00:30:49.915 --> 00:30:53.415
Das ist ein bisschen schwieriger in SVG, da hast du ja keine automatischen Umbrüche

00:30:53.415 --> 00:30:54.755
und so Zeug, das ist ein bisschen doof.

00:30:55.495 --> 00:31:00.775
Und dann steckst du da quasi, um das noch mal zu unterteilen, T-Span-Elemente rein.

00:31:00.775 --> 00:31:05.115
Und da kannst du dann dieses dy-Attribut zum Beispiel nehmen,

00:31:05.255 --> 00:31:09.715
um zu sagen, jedes weitere T-Spender, das ich da reintue, soll bitte einfach

00:31:09.715 --> 00:31:13.815
um folgenden Abstand weiter nach unten gegenüber dem vorherigen sein.

00:31:14.935 --> 00:31:19.015
Genau, und das war dann irgendwie ganz cool, da musste ich die nicht irgendwie

00:31:19.015 --> 00:31:21.735
alle einzeln mit Werten platzieren.

00:31:22.895 --> 00:31:28.615
Das macht Sinn. Ja, dass man halt sozusagen als Referenz zu dem, was man schon,

00:31:28.775 --> 00:31:33.955
also es gibt eine Initialposition und ab dem Stand zum nächsten Element,

00:31:34.115 --> 00:31:38.595
wenn das auch immer ans Ende der Zeile kommt oder von der Höhe her, dass du nicht…,

00:31:39.121 --> 00:31:45.541
anderthalb mal die Höhe des Elements berechnen musst und dann eine absolute

00:31:45.541 --> 00:31:48.181
Pixelzahl da reingeben musst, einfach zu sagen, okay.

00:31:49.381 --> 00:31:54.461
Fünf Pixel weiter unten zum vorhergehenden oder sowas. Genau.

00:31:55.521 --> 00:32:01.961
Verstehe. Gibt es dann dieses DY-Attribut denn auch auf, wisst ihr das zufällig,

00:32:01.961 --> 00:32:07.861
anderen Elementen jetzt nicht nur Text, sondern sagt man mal auch mal einen Kreis oder ähnliches?

00:32:07.861 --> 00:32:11.621
Ich glaube nicht, weil da hast du das Problem ja nicht so sehr.

00:32:11.721 --> 00:32:14.141
Du musst ja, wie gesagt, in CSS deine Zeilennummern selber managen.

00:32:15.101 --> 00:32:20.321
Und dann ist ja wirklich sozusagen dieses Verschieben um einen relativen Anteil relevant.

00:32:20.881 --> 00:32:23.901
Wohingegen du ja beim Kreis einfach sagen kannst, ich habe ja mein Koordinatensystem

00:32:23.901 --> 00:32:26.041
und ich weiß, wo ich sein muss. Mehr oder minder.

00:32:27.621 --> 00:32:34.401
Genau, und wie man ja auch sieht, kommt das hier aus der SVG Text Positioning Element API.

00:32:35.241 --> 00:32:41.141
Ja, genau. Genau. Die ist halt, wie gesagt, die Basisklasse für diesen ganzen SVG-Text-Kampel.

00:32:42.181 --> 00:32:46.581
Hier, ich habe jetzt auch die Seite gefunden bei MDN. Die Y shifts the Textposition

00:32:46.581 --> 00:32:48.941
vertically from a previous Textelement.

00:32:52.121 --> 00:32:54.901
Das ist halt ein bisschen ungewohnt für so unser einen, weil man es vielleicht

00:32:54.901 --> 00:32:58.961
eher gewohnt ist, so Überlegungen in CSS irgendwie zu formulieren.

00:33:00.381 --> 00:33:03.961
Aber es ist halt alles hier Attribute und Zeug und deswegen sehr,

00:33:04.021 --> 00:33:05.441
sehr gewöhnungsbedürftig.

00:33:06.861 --> 00:33:13.221
Ich habe ja auch bei MDN gerade gelesen, die Y kann man auf FE Drop Shadow,

00:33:13.521 --> 00:33:20.581
FE Offset, Cliff Ref, Text, T Ref und T Span verwenden.

00:33:21.521 --> 00:33:24.581
Genau. Und die letzten drei sind die, die von dem Interface erben,

00:33:24.641 --> 00:33:25.561
das wir da gerade hatten.

00:33:25.641 --> 00:33:30.121
Und die anderen sind unrelated, aber da heißt es halt eben genau gleich. Ja.

00:33:31.021 --> 00:33:33.961
Nur der Vollständigkeit halber. Ja. Ja.

00:33:34.701 --> 00:33:36.981
All right. Ich will für die Vollständigkeit halber noch eins sagen.

00:33:37.161 --> 00:33:40.281
Also nur, falls irgendwer da draußen einen Use Case hat, wo man sich so denkt,

00:33:40.441 --> 00:33:45.101
keine Ahnung, ich will irgendwie ein SVG erzeugen und dann da irgendwie ein

00:33:45.101 --> 00:33:47.241
Screenshot von machen, damit da eine Rastergrafik rauskommt.

00:33:48.081 --> 00:33:52.201
Und man will halt mit SVG machen, aber man kann irgendwie schon HTML und CSS und Zeug.

00:33:52.481 --> 00:33:56.841
Ich will nur sagen, man kann das halt eben auch wunderbar mit HTML und CSS machen.

00:33:57.021 --> 00:33:59.501
Das verhält sich in erster Näherung ziemlich vektorisch.

00:33:59.741 --> 00:34:02.481
Man kann ja mit relativen Größen arbeiten, mit Prozenten und was nicht allem.

00:34:02.981 --> 00:34:05.721
Und wenn man am Ende einfach nur der Rastergrafik daraus screenshotten möchte,

00:34:05.781 --> 00:34:06.921
ist wirklich eine HTML-Seite und

00:34:06.921 --> 00:34:09.901
ein bisschen CSS und ein Papetier das Einfachste, was man da machen kann.

00:34:12.259 --> 00:34:16.879
Mhm. Ja, stimmt. Will ich nur mal erwähnen, nachdem ich irgendwann mal für genau

00:34:16.879 --> 00:34:20.299
den Use Case irgendwie Monate damit verbrannt habe, mich wirklich in CSS reinzubeißen,

00:34:20.319 --> 00:34:23.739
bis ich irgendwann gesagt habe, fuck it, mit CSS und HTML wäre ich schon längst

00:34:23.739 --> 00:34:25.819
fertig geworden. Oh wait, ich kann ja schon längst fertig sein.

00:34:26.419 --> 00:34:30.519
Und dann war ich halt drei Stunden später auch fertig. In SVG hast du dich eingegraben, ne?

00:34:30.599 --> 00:34:34.379
Genau. Du kannst ja auch hier in den Browsern,

00:34:34.419 --> 00:34:38.699
kannst du glaube ich in allen ja mittlerweile auch in dem Element-Panel,

00:34:38.699 --> 00:34:44.639
Element rechts klicken oder Kontextmenü klicken und ein Screenshot von der Note

00:34:44.639 --> 00:34:45.699
machen. Das geht ja auch.

00:34:45.879 --> 00:34:48.739
Das heißt, du brauchst doch nicht mal dir ein Puppet hier hochfahren.

00:34:48.939 --> 00:34:52.019
Das stimmt. Es sei denn, du willst das irgendwie in industriellen Maßstab machen

00:34:52.019 --> 00:34:55.359
und zack, zack, zack, zack, zack. Ja. 9000 Frames haben oder so.

00:34:56.879 --> 00:34:59.559
Das würde ich doch nie wollen. Pro Sekunde.

00:35:01.339 --> 00:35:05.939
Ich würde vorschlagen, wir gehen weiter zu unserer nächsten Eigenschaft.

00:35:06.919 --> 00:35:12.939
Und Shep, da wäre es wieder dein Turn. Burn. Ich klicke. Nochmal drauf zu klicken. Uh.

00:35:14.059 --> 00:35:17.839
Wollen wir mal so tun, als wäre das nicht passiert? Schmackhaft.

00:35:18.939 --> 00:35:23.659
Genau, also wir machen das jetzt glaube ich nicht. Wir können es ja kurz sagen,

00:35:23.759 --> 00:35:26.119
es geht, wir sind jetzt im Prinzip in einer ähnlichen Ecke.

00:35:27.079 --> 00:35:32.379
SVG FE Drop Shadow Element und ich glaube mit X kannst du wahrscheinlich dann

00:35:32.379 --> 00:35:36.639
einstellen, wie weit der Drop Shadow in der X-Achse geht. Ah, spannend.

00:35:38.099 --> 00:35:40.159
Ja, so mittelspannt, ich drücke einfach mal.

00:35:41.679 --> 00:35:44.439
SVG-Filter an sich sind schon super spannend, aber nicht das.

00:35:44.959 --> 00:35:48.239
Aber auch harte Braintwister. Aber SVG ist eh so eine komplett andere Welt.

00:35:48.399 --> 00:35:50.959
Also da muss man echt erst mal klarkommen da drin.

00:35:51.179 --> 00:35:53.959
Ja, genau. Oder was ich gerade gesagt habe. Man lässt es halt bleiben und sagt

00:35:53.959 --> 00:35:56.519
einfach, Webseite, CSS, passt schon.

00:35:57.059 --> 00:36:00.939
Ja, da drei Monate einarbeiten. Also ich benutze SVG schon immer mal wieder

00:36:00.939 --> 00:36:05.739
ganz gerne, weil es halt ein paar Dinge kann, die HTML und CSS eben nicht können.

00:36:05.739 --> 00:36:12.979
Und zum Beispiel kannst du damit so eine Art im Grunde so Sperrtext machen oder

00:36:12.979 --> 00:36:14.019
du kannst halt Text machen,

00:36:14.219 --> 00:36:19.379
der mitwächst, also mit der Breite von,

00:36:19.499 --> 00:36:23.639
also erstmal generell natürlich, wenn das SVG größer und kleiner wird,

00:36:23.719 --> 00:36:29.739
aber du kannst eben auch Text einpassen in die verfügbare Breite.

00:36:29.739 --> 00:36:34.419
Und wenn das halt viel Text ist, dann werden die Buchstaben eben so ein bisschen

00:36:34.419 --> 00:36:39.899
gedrungen und wenn du wenig Buchstaben hast,

00:36:40.059 --> 00:36:46.379
dann werden die halt sehr so fett und du kannst eben dann auch das Letterspacing

00:36:46.379 --> 00:36:49.339
auch erhöhen, wenn du möchtest. Also so Sachen, das geht halt...

00:36:50.941 --> 00:36:54.241
Eben noch nicht in CSS. Nee, das ist richtig, aber du hast es halt sehr viel

00:36:54.241 --> 00:36:59.601
einfacher, SVG dann in die Webwelt reinzubringen, statt umgekehrt.

00:37:00.381 --> 00:37:03.321
Also erst mal so, die Abdeckung ist relativ groß von dem, was du halt mit HTML

00:37:03.321 --> 00:37:05.961
und CSS machen kannst. Und dann nimmst du halt noch ein bisschen SVG,

00:37:06.021 --> 00:37:08.301
um das so on top zu streuseln. Hatte ich bei meinem Use Case genauso.

00:37:08.701 --> 00:37:11.601
Da war halt der Use Case, ich brauchte so ein paar Grafiken,

00:37:11.601 --> 00:37:14.201
im Prinzip bloß so Waveforms, und die waren halt parametrisiert.

00:37:14.661 --> 00:37:17.221
Und die habe ich tatsächlich einfach dann generiert als SVG.

00:37:17.281 --> 00:37:20.541
Und dann konnte ich die in CSS als Background-Image einfach referenzieren anhand ihrer ID.

00:37:21.301 --> 00:37:27.741
Und dann, zack, bumm, hatte ich dann beides. Aber halt eben 99% waren HTML und CSS. Ja.

00:37:30.881 --> 00:37:33.441
Okay. Na, jetzt sind wir bei Border-Top-Style

00:37:33.441 --> 00:37:36.581
gelandet. Ja, bei Borders allgemein, würde ich sagen, oder?

00:37:38.361 --> 00:37:42.921
Von mir aus auch da, ja. Tja, Border-Top-Style, ich weiß gar nicht.

00:37:42.981 --> 00:37:47.761
Ich kann nur sagen, ich benutze halt Border-Style-None oder Solid und nichts anderes.

00:37:48.941 --> 00:37:52.921
Weiß nicht, wie es euch geht. Nicht manchmal für so Fokus-Styles.

00:37:53.041 --> 00:37:56.761
Also der Standard-Fokus-Style ist ja so diese leicht gedottete Outline.

00:37:57.861 --> 00:37:59.301
Ja, aber auch nicht in allen Browsern.

00:37:59.341 --> 00:38:02.341
Das ist ja nur glaube ich Internet Explorer gewesen damals, oder?

00:38:03.581 --> 00:38:07.241
Okay. Ist das anders? Also keine Ahnung. Jedenfalls manchmal gönne ich mir halt

00:38:07.241 --> 00:38:11.541
tatsächlich eine dotted Outline für Fokus-Styles, wenn es halt irgendwie dann

00:38:11.541 --> 00:38:12.441
deutlich genug noch ist.

00:38:14.741 --> 00:38:18.501
Ja, oder halt Dash. Ich glaube, ich wäre mehr so der Dash-Mensch.

00:38:19.181 --> 00:38:23.401
Ja, die haben nicht immer so richtig schöne, die schließen nicht immer so richtig schön, weißt du?

00:38:24.221 --> 00:38:27.821
Doch, das ist da irgendwie ein bisschen nicer. Ist halt relevant dann,

00:38:27.861 --> 00:38:30.561
wenn du deinen Text irgendwie einen Meter groß an die Leinwand wirfst und sonst

00:38:30.561 --> 00:38:31.341
vielleicht eher nicht so.

00:38:31.701 --> 00:38:34.201
Aber das passiert halt bei mir hin und wieder mal und deswegen bin ich da eher

00:38:34.201 --> 00:38:35.041
bei Dodged, muss ich sagen.

00:38:37.681 --> 00:38:46.101
Ja, ich muss aber auch sagen, also die prozentuale Anwendung von etwas anderem als Border,

00:38:46.221 --> 00:38:55.881
Non und Solid als die beiden Styles ist sehr, sehr wenig bei mir gewesen in der Vergangenheit.

00:38:56.865 --> 00:39:02.725
Ich weiß nicht, und dann explizit Top-Style festzulegen, macht man dann doch

00:39:02.725 --> 00:39:04.565
irgendwie nicht so häufig.

00:39:04.865 --> 00:39:08.705
Ich glaube, eine Sache, wo ich das vielleicht noch irgendwie jetzt gerade im Kopf habe,

00:39:08.845 --> 00:39:11.965
ich weiß aber nicht, ob ich da Top auch immer mit reingenommen hatte,

00:39:12.025 --> 00:39:15.805
das war dann, oder halt Top-Left oder Top-Right oder wie auch immer das war,

00:39:15.865 --> 00:39:22.505
wenn man mal zum Beispiel so ein Dreieck machen wollte an so einer Bubble oder etwas, Tooltip.

00:39:22.505 --> 00:39:26.485
Ja, man baut einen Tooltip und möchte da dran, der ist so eine Bubble und man

00:39:26.485 --> 00:39:30.305
möchte da so eine kleine Ecke haben, damit die da hin zeigt auf den Text,

00:39:30.465 --> 00:39:32.285
den man gerade angeklickt hat oder so.

00:39:32.505 --> 00:39:37.365
Da gab es ja diesen Trick, dass man dann mit den Bordern dann Before oder After

00:39:37.365 --> 00:39:40.985
Pseudo-Element stylen konnte entsprechend.

00:39:40.985 --> 00:39:44.705
Dementsprechend, da hat man das vielleicht mal verwendet, wenn man da eine Sache

00:39:44.705 --> 00:39:50.685
in Top oder in Bottom, wie auch immer, halt auf Null setzen musste und der Rest

00:39:50.685 --> 00:39:54.505
war halt dann die Größe, die man es haben wollte, in Pixeln ausgedrückt.

00:39:54.765 --> 00:39:56.865
Ich hoffe, ihr erinnert euch noch an den Trick. Ich weiß nicht,

00:39:56.885 --> 00:39:58.085
ob man das heute auch noch so macht.

00:39:58.425 --> 00:40:03.165
Naja, ich habe ein schönes Tutorial für die Shownotes rausgegraben von html-seminar.de.

00:40:03.985 --> 00:40:09.365
CSS-Dreieck ohne Grafiken über CSS. Haben die denn auch erklärt,

00:40:09.385 --> 00:40:12.245
wie man dann quasi einen Schatten haben kann,

00:40:12.345 --> 00:40:20.345
der um das quasi die Bubble und den Pfeil rumgeht und nicht irgendwie nur um

00:40:20.345 --> 00:40:22.845
die Bubble und auf den Pfeil dann einen Schatten wirft?

00:40:23.385 --> 00:40:28.085
Wir hier bei html-seminar.de kümmern uns nicht um solche randständigen Use Cases.

00:40:28.145 --> 00:40:30.865
Wir erklären die Basics und zwar so, dass man es auch versteht.

00:40:31.945 --> 00:40:35.505
Sehr gut. Aber du kannst es ja erzählen. Dann haben wir das geklärt. Erzähl.

00:40:35.805 --> 00:40:43.705
Ja, einfach, genau, also CSS-Filter-Effekt, also der Drop Shadow aus den CSS-Filtern,

00:40:44.885 --> 00:40:52.465
der arbeitet da eben wie alle anderen Filter-Effekte auf die sichtbaren Pixel eines Elements.

00:40:53.905 --> 00:40:56.445
Das heißt also, wenn du jetzt zum Beispiel... Also du musst erst mal sagen,

00:40:56.525 --> 00:41:00.225
was der normale Filter machen würde.

00:41:00.225 --> 00:41:08.545
Also die Eigenschaft Box-Shadow, die nimmt sozusagen nur das Element selber

00:41:08.545 --> 00:41:13.085
und guckt nicht auf, was hat das für Kind-Elemente, die vielleicht noch raushagen und so,

00:41:13.225 --> 00:41:17.485
nimmt nur das Element selber und lässt das in Schatten werfen.

00:41:18.165 --> 00:41:21.845
Auch wenn das vielleicht auch innen drin transparent ist oder so,

00:41:21.905 --> 00:41:25.445
dann wirft das eben als gesamte Box trotzdem im Schatten.

00:41:26.725 --> 00:41:31.125
Und bei den Filtern, die gucken halt, okay, gibt es irgendwelche Kind-Elemente,

00:41:31.125 --> 00:41:33.985
die in diesem Element drin sind, die links und rechts irgendwie an den Rändern

00:41:33.985 --> 00:41:36.485
rausgucken, dann werde ich die auch berücksichtigen.

00:41:36.505 --> 00:41:40.705
Oder hat das Element innen drin vielleicht transparente Bestandteile?

00:41:41.545 --> 00:41:44.385
Vielleicht, sagen wir mal so, stell dir ein Spossenfenster vor,

00:41:44.385 --> 00:41:50.845
dann würde eben der Schatten auch diese Form im Prinzip nachempfinden.

00:41:52.716 --> 00:41:55.996
Ja. Weil es ist ja quasi ein SVG-Filter, ne?

00:41:57.096 --> 00:42:02.656
Es ist im Grunde ein SVG-Filter, genau, der nach in die CSS-Welt rübergeholt wurde.

00:42:02.776 --> 00:42:09.336
Und letztlich ist ja diese Drop Shadow-Funktion, die man da hat, nichts anderes als ein.

00:42:11.456 --> 00:42:15.956
Ja, sagen wir mal, ein syntaktischer Zucker für diese CSS-Filter.

00:42:16.056 --> 00:42:23.296
Also man kann theoretisch auch CSS-Filter definieren im HTML und aus dem CSS

00:42:23.296 --> 00:42:26.676
mit der Filtereigenschaft heraus auf diesen Filter verweisen,

00:42:26.776 --> 00:42:29.756
per ID zum Beispiel. Und das würde auch gehen.

00:42:30.816 --> 00:42:34.456
Genau. Und da kann man dann sehr abgefahrenes Zeug machen, wenn man wirklich

00:42:34.456 --> 00:42:40.056
so einen komplexen SVG-Filter sich bastelt oder sich möglicherweise einfach copy-pastet.

00:42:40.116 --> 00:42:43.296
Dann kann man tatsächlich irgendwie so Turbulenz und Verwerfung und was nicht

00:42:43.296 --> 00:42:46.696
alles, Reflexion und das dann einfach so in seinen CSS reinpacken und auf seine

00:42:46.696 --> 00:42:50.336
ganz normalen HTML-Konstruktionen anwenden, was eigentlich ganz cool ist.

00:42:51.156 --> 00:42:53.716
SVG ist halt doch für einiges ganz gut zu gebrauchen.

00:42:54.876 --> 00:42:58.336
Wir kommen heute nicht mehr drum rum. Also SVG ist hier das,

00:42:58.436 --> 00:43:00.216
was sich durch die Sendung zieht, glaube ich.

00:43:00.296 --> 00:43:06.316
Ich hoffe auch, dass wir dann in der nächsten Eigenschaft, die wir jetzt hoffentlich

00:43:06.316 --> 00:43:10.356
aufrufen, dann auch wieder einen Link dazu herstellen können.

00:43:10.496 --> 00:43:13.756
Oder vielleicht können wir auch nochmal auf die Internals von SVG eingehen.

00:43:13.776 --> 00:43:17.036
Ich meine, sie interessieren halt auch brennend.

00:43:19.536 --> 00:43:26.376
Okay, soll ich mal draufdrücken? Hit it away. Okay, ich hab mal draufgedrückt und es kommt raus. Oh.

00:43:27.816 --> 00:43:31.256
Der CSS-Typ Position. Okay, das ist ein eigener Typ, sieh an.

00:43:33.816 --> 00:43:39.016
Aber gut, macht ja Sinn. So diese Angaben von wegen hier Top Left 50%, 50%.

00:43:39.976 --> 00:43:45.636
Diese tatsächliche Angabe von ja zwei Koordinaten letztlich von XY kommend ist

00:43:45.636 --> 00:43:50.096
ein eigener CSS-Datentyp, so wie eine Color oder eine Breite oder was nicht

00:43:50.096 --> 00:43:51.376
alles, macht ja irgendwo auch Sinn.

00:43:52.336 --> 00:43:56.856
War mir jetzt nicht so klar, aber ergibt sich ja eigentlich logisch schon woher.

00:43:58.576 --> 00:44:03.196
Ja, ich hätte das auch eher als einfache Number gesehen.

00:44:05.236 --> 00:44:08.056
Aber... Das hat ja Einheiten, es müsste also schon eine Length sein.

00:44:08.956 --> 00:44:11.656
Oder eine Length, okay. Das sind ja zwei. Genau.

00:44:13.952 --> 00:44:17.212
Wie meinst du, es sind ja zwei? Es ist ja ein zweistelliges Tuppel-X-Y-Koordinator

00:44:17.212 --> 00:44:20.172
und nicht nur eine Länge. So wie eine Breite.

00:44:21.932 --> 00:44:25.352
Kann man nicht sogar noch mehr angeben? Also als nur zwei?

00:44:29.352 --> 00:44:33.772
Doch, kannst du schon. Du kannst mittlerweile, glaube ich, vier angeben.

00:44:34.992 --> 00:44:38.332
Und dann, dann, dann. Beziehungsweise, nee, du kannst nicht vier angeben.

00:44:38.432 --> 00:44:42.252
Doch, du kannst auch vier angeben. Oder? Lass mal gucken. Sehe ich gerade, ja.

00:44:42.952 --> 00:44:49.472
Ja, genau. Aber dann, das sind aber dann nicht vier Werte, sondern du Präfix,

00:44:49.532 --> 00:44:53.032
die dann, dann kannst du nämlich sowas sagen wie, also traditionell war es ja immer so,

00:44:53.132 --> 00:44:58.372
dass der erste Wert ist X von links und der zweite ist Y von oben.

00:44:58.372 --> 00:45:03.332
Und wenn du jetzt irgendwas aber unten rechts positionieren wolltest,

00:45:03.492 --> 00:45:06.932
dann war das für dich einfach ein bisschen Arbeit,

00:45:07.212 --> 00:45:11.392
vielleicht auch teilweise gar nicht so einfach möglich, weil dieses Position-Ding

00:45:11.392 --> 00:45:14.572
ja auch so eine ganz spezielle Eigenschaft hat, die wir gleich noch besprechen

00:45:14.572 --> 00:45:16.312
können, aber du kannst dann jetzt eben sagen,

00:45:16.552 --> 00:45:21.952
hey, Bottom so und so viel und dann Right so und so viel und dann ist eben die

00:45:21.952 --> 00:45:25.312
Referenz unten rechts und nicht oben links mehr.

00:45:25.592 --> 00:45:28.552
Es ist, als würdest du absolute Positionierung verwenden, wo du ja auch entweder

00:45:28.552 --> 00:45:32.172
sagen kannst, Top so und so viel, Left so und so viel oder du kannst ja sagen,

00:45:32.252 --> 00:45:34.552
Bottom so und so viel, Right so und so viel und das kannst du halt jetzt eben

00:45:34.552 --> 00:45:38.812
auch in diese CSS-Syntax einer Koordinate einbauen für die Position deines Hintergrundbildes.

00:45:41.445 --> 00:45:46.045
Und es war Opera, die das zum ersten Mal hatten, weiß ich noch. Gott hab sie selig.

00:45:46.565 --> 00:45:52.285
Hey, die gibt's noch, nur nicht mehr in, ja. Nur nicht mehr mit eigener Engine, ja. Also, ja.

00:45:53.185 --> 00:45:55.805
Hey, wir sagen ja immer noch, der Edge existiert noch. Also,

00:45:55.865 --> 00:45:57.505
dann existiert Opera auch noch.

00:45:59.685 --> 00:46:04.225
Was ich noch sagen wollte ist, also weswegen das vielleicht ein eigener Datentyp ist,

00:46:04.325 --> 00:46:09.985
ist, dass wenn du mit diesem Wert ja nicht nur sagst, wie in einem Container

00:46:09.985 --> 00:46:15.945
das positioniert werden soll, sondern du verschiebst auch sozusagen den Snap-Point in dem Bild,

00:46:17.605 --> 00:46:18.945
das du positionierst.

00:46:19.105 --> 00:46:24.985
Denn, also sagen wir mal, intuitiv würdest du ja sagen, keine Ahnung,

00:46:25.085 --> 00:46:28.145
der Punkt ist oben links.

00:46:28.305 --> 00:46:33.465
Also wenn du 0,0 machst, dann positionierst du das Bild ja oben links in der Ecke.

00:46:33.585 --> 00:46:38.365
Ja. Und dann ist ja der Snap-Point auch oben links in dem Bild.

00:46:38.885 --> 00:46:44.325
Ja. Das würde aber umgekehrt bedeuten, dass wenn du 100% X machst,

00:46:44.625 --> 00:46:46.645
dass von dem Bild ja nichts zu sehen ist.

00:46:46.845 --> 00:46:51.865
Also, weil das wäre dann ja, da wäre ja der Ankerpunkt in dem Bild ja immer noch oben links.

00:46:52.005 --> 00:46:55.425
Du würdest das komplett an der rechten Seite des Elements platzieren,

00:46:55.445 --> 00:46:58.985
das Hintergrundbild, und damit wäre das dann quasi aus dem Sichtfeld raus.

00:46:59.685 --> 00:47:03.905
Aber das passiert ja nicht. Also, tatsächlich ist es dann, es funktioniert das

00:47:03.905 --> 00:47:07.785
ja so, dass das dann rechts angedockt ist, das Bild.

00:47:08.485 --> 00:47:12.465
Also, das ist ja weiterhin sichtbar. Das heißt also, dieser Ankerpunkt,

00:47:12.625 --> 00:47:16.785
der wandert dann in dem Element, das das Hintergrundbild hat,

00:47:16.925 --> 00:47:22.045
und er wandert aber auch in dem Bild von links nach rechts und von oben nach unten.

00:47:22.225 --> 00:47:26.425
Und ich glaube, das ist der Grund, warum das eben eine separate Geschichte ist.

00:47:28.565 --> 00:47:36.485
Also, damit ist einfach gemeint, Top 100% ist halt nicht das Gleiche wie Bottom 0.

00:47:37.700 --> 00:47:43.360
Weil Bottom 0 snappt unten jetzt das Element, was du halt positionieren willst, an.

00:47:44.080 --> 00:47:50.280
Und Top 100 drückt das ganze 100% von oben über den Bildschirm nach unten und

00:47:50.280 --> 00:47:51.680
du würdest es wirklich nicht mehr sehen.

00:47:53.520 --> 00:48:00.340
Nee, ich glaube, dass das nicht der Fall ist. Also, warte mal.

00:48:00.980 --> 00:48:02.940
Ich mach mal hier einen Code-Pen.

00:48:04.320 --> 00:48:10.300
Oh, jetzt wird es spannend. Weil das dachte ich schon, dass du nicht dadurch,

00:48:10.460 --> 00:48:14.800
dass du halt praktisch etwas nach unten drückst, nur deshalb den Punkt verschiebst.

00:48:16.940 --> 00:48:23.420
Wobei, bei 50% 50% tut es das ja schon, also hast du wahrscheinlich recht.

00:48:24.540 --> 00:48:31.180
Und nee, nee, ist gar nicht wahr. 50 Prozent, 50 Prozent macht nämlich genau das nicht.

00:48:31.820 --> 00:48:34.440
Aber Center macht es schon.

00:48:35.180 --> 00:48:40.620
Doch, 50 macht es auch, glaube ich. 50 Prozent macht wirklich die linke obere

00:48:40.620 --> 00:48:43.960
Ecke in die genaue Mitte des Elements rein. Das kennt man ja von dem alten Hack nochmal.

00:48:44.860 --> 00:48:48.160
Doch, deswegen musste man immer Transform noch machen.

00:48:48.220 --> 00:48:49.760
Das war der Hack, den du meintest. Weil

00:48:49.760 --> 00:48:53.620
Transform relativ ist und und die Positionierung halt eine absolute ist.

00:48:55.520 --> 00:48:59.060
So dachte ich jetzt auch, aber vielleicht ist es auch, also das ist bei Position

00:48:59.060 --> 00:49:03.440
zumindest so, wenn du dann Top und Left machst, aber ist es auch so,

00:49:03.500 --> 00:49:06.720
wenn du zum Beispiel jetzt einen Background-Position verwendest?

00:49:06.820 --> 00:49:07.780
Also das ist die Frage, genau.

00:49:08.060 --> 00:49:11.860
Genau, also hier geht es doch um Backgrounds, nur bei dieser Eigenschaft.

00:49:12.120 --> 00:49:16.420
Richtig. Und da ist es nämlich, ich habe ja, ich versuche gerade hier in irgendeinem

00:49:16.420 --> 00:49:19.240
Bild zu finden, dass ich mal schnell hier bei CodePen reinpacken kann.

00:49:19.460 --> 00:49:22.880
Gibt es Place-Kitten nicht mehr? Ja, das gibt's schon.

00:49:24.460 --> 00:49:26.500
Da kriegst du wahrscheinlich irgendwie Kors um die Ohren gehauen.

00:49:26.560 --> 00:49:27.740
Das ist ja auch aus einer ganz anderen Zeit.

00:49:29.520 --> 00:49:33.940
So, Breite mach ich jetzt mal hier. Ich muss hier dem Ding irgendwelche Maße

00:49:33.940 --> 00:49:37.380
geben. Zack. Höhe 400 Pixel.

00:49:38.760 --> 00:49:41.220
So, seh ich da jetzt mal was? Background.

00:49:42.960 --> 00:49:47.980
Ich hab hier HTTP Unsplash. Fotos random. Da müsste doch eigentlich ein random

00:49:47.980 --> 00:49:49.000
Foto kommen, oder nicht?

00:49:50.120 --> 00:49:53.960
Aber wahrscheinlich eins, das sieben Megabyte groß ist. Ja, vielleicht einfach

00:49:53.960 --> 00:49:59.460
eins, das nicht random ist, sondern Bildadresse kopieren.

00:50:00.800 --> 00:50:03.240
Also ich gehe davon aus, dass du recht hast, weil ich glaube,

00:50:03.280 --> 00:50:07.340
Hans und ich sind auf dem Position-Absolute und dann Transform-Hack unterwegs.

00:50:07.460 --> 00:50:12.120
Und du hast wahrscheinlich mit dem korrekten Use Case hier in Background-Position recht. Ja.

00:50:13.917 --> 00:50:16.817
Genau, also ich mache jetzt mal

00:50:16.817 --> 00:50:24.817
Background-Position 50%, 50% und dann gebe ich dem Div noch ein Border,

00:50:25.077 --> 00:50:30.597
ein PX-Solid und dann gebe ich euch den Link, Save,

00:50:30.917 --> 00:50:33.197
einloggen.

00:50:34.557 --> 00:50:39.017
Link ist wichtig für die Shownotes. Link ist super wichtig. Damit alle sehen

00:50:39.017 --> 00:50:40.157
können, wie unrecht wir hatten.

00:50:41.777 --> 00:50:43.677
Genau, hier, ich packe das mal rüber.

00:50:45.617 --> 00:50:49.657
Wobei ich sagen muss, das Bild noch nicht da ist, wo ich es haben möchte.

00:50:49.737 --> 00:50:52.197
Aber ich glaube, es könnte an Background-Repeat liegen.

00:50:52.417 --> 00:50:57.997
Das ist auch so eine doofe Eigenschaft, die man eigentlich immer abschalten will, oder?

00:50:59.017 --> 00:51:01.857
Background-Repeat, ja. Das wird immer nur auf No-Repeat gesetzt.

00:51:02.537 --> 00:51:07.477
Na ja, also wenn man manchmal so Hintergrund-Patterns haben möchte oder so was,

00:51:07.497 --> 00:51:08.377
vielleicht nicht, oder?

00:51:09.077 --> 00:51:10.937
Das ist richtig, aber Web 2.0 ist vorbei.

00:51:12.717 --> 00:51:15.017
Ach ja, genau. Und ich brauch jetzt natürlich auch noch ...

00:51:16.917 --> 00:51:19.297
Background-Size muss ich natürlich auch noch kleiner machen.

00:51:20.437 --> 00:51:22.977
Weil sonst ist das Bild eh zu groß. Ha!

00:51:23.297 --> 00:51:25.677
So, jetzt mach ich mal hier 100.

00:51:26.997 --> 00:51:30.357
So, genau. Jetzt könnt ihr den Pen mal öffnen. Und dann seht ihr,

00:51:30.417 --> 00:51:35.017
ich hab jetzt auf der X-Achse das Bild auf 100 Prozent platziert.

00:51:35.057 --> 00:51:36.477
Und es ist aber sichtbar.

00:51:36.617 --> 00:51:41.757
Also, es ist nicht weg, wie es eigentlich bei Position wäre. Ja, das ist richtig.

00:51:42.457 --> 00:51:45.897
Ich mache jetzt mal left 100% daraus.

00:51:48.828 --> 00:51:51.788
Und schon funktioniert es nicht mehr. Wieso das denn? Ich dachte,

00:51:51.808 --> 00:51:56.168
man kann vier Werte angeben. Ja, aber nicht drei.

00:51:56.908 --> 00:52:01.288
Ja, nicht drei. Okay. Aber left müsste dann das Gleiche sein.

00:52:01.448 --> 00:52:03.628
Also das ist ja quasi Standard dann.

00:52:04.208 --> 00:52:08.668
Ja, ja, aber die Frage, ja, gut, das stimmt natürlich. Da hast du recht.

00:52:09.708 --> 00:52:16.548
Das ist aber, also, ich meine, es ist klar, dass es so ist, wie du beschrieben hast.

00:52:16.628 --> 00:52:21.608
Ich verstehe aber nicht, Nicht warum, weil es ist ja sozusagen dann ein inkonsistentes

00:52:21.608 --> 00:52:27.528
Verhalten zu sowas wie Left Top, diese Geschichte, die wir eben meinten.

00:52:28.368 --> 00:52:33.288
Genau, aber das ist wahrscheinlich so, dass ich für mich war es immer so,

00:52:33.328 --> 00:52:37.248
dass es intuitiv richtig war und ich erst irgendwann gemerkt habe,

00:52:37.268 --> 00:52:43.068
dass irgendwas komisch ist, als ich das mal wirklich an eine bestimmte Position haben wollte.

00:52:43.768 --> 00:52:48.348
Weil da habe ich dann gemerkt, ah, okay, Moment, das ist ja nicht nur einfach,

00:52:48.448 --> 00:52:54.668
dass es quasi die Positionen in diesem Element also betrifft,

00:52:54.668 --> 00:53:00.308
sondern irgendwie ändert sich auch sozusagen dieser Ankerpunkt oder Fokuspunkt in dem Bild selbst.

00:53:01.148 --> 00:53:06.548
Das kann man aber auch gut benutzen, um sowas zu machen, wie in Bildern Fokuspunkte zu setzen.

00:53:08.228 --> 00:53:11.808
Zum Beispiel, also ich meine, das kann man ja heutzutage auch mit Object-Fit

00:53:11.808 --> 00:53:16.088
und Object-Position machen, aber bei Object-Fit gibt es ja zum Beispiel nicht

00:53:16.088 --> 00:53:17.428
die Möglichkeit, da gibt es ja nur,

00:53:18.248 --> 00:53:26.808
Object-Fit-Contain und Cover, aber wenn du vielleicht das mal nicht machen wolltest,

00:53:26.888 --> 00:53:30.648
dann ist Background-Position oder Background-Size vielleicht dann spannender.

00:53:32.528 --> 00:53:37.868
Genau, und du kannst eben dieser Background-Position einen Fokuspunkt oder Object-Position

00:53:37.868 --> 00:53:40.428
einen guten Fokuspunkt setzen in dem Bild.

00:53:41.888 --> 00:53:46.268
Das heißt, wenn man dann beispielsweise möchte, dass wenn ein Gesicht auf dem

00:53:46.268 --> 00:53:50.108
Bild ist, egal wie groß das Bild ist, dass trotzdem das Gesicht zu sehen ist

00:53:50.108 --> 00:53:53.268
oder die Nasenspitze an einer bestimmten Stelle ist oder ähnliches.

00:53:54.679 --> 00:53:59.419
Ja, sehr spannend auf jeden Fall, dass sich das auch so, also für mich ist es

00:53:59.419 --> 00:54:02.999
spannend, dass sich das halt so unterschiedlich verhält und dass man eigentlich dieses,

00:54:03.219 --> 00:54:11.199
genau das, was du sagst, man hat ja schon ewig lange immer diese Position-Eigenschaft.

00:54:13.759 --> 00:54:21.219
Den Datentyp auch verwendet in sowas wie zum Beispiel Background Position oder Transform Origin.

00:54:22.639 --> 00:54:28.139
Aber so richtig darüber im Klaren bin ich mir jetzt erst darüber,

00:54:28.279 --> 00:54:29.759
dass du das so nochmal erklärt hast.

00:54:30.139 --> 00:54:35.639
Ja, ebenso. Also, jetzt ist aber die spannende Frage, ihr Lieben,

00:54:35.659 --> 00:54:37.939
wie sieht denn das in SVG aus?

00:54:38.099 --> 00:54:41.739
Kann man da eigentlich auch auch eine Background-Position festlegen?

00:54:42.539 --> 00:54:45.699
Da hast du ja das Konzept Background in der Form gar nicht.

00:54:45.819 --> 00:54:50.779
Du hast ja deine Objekte und die platzierst du halt im Koordinatensystem und

00:54:50.779 --> 00:54:52.459
dann stapelst du sie vielleicht noch und das war's.

00:54:52.599 --> 00:54:56.559
Du kannst natürlich auch auf alles CSS draufwerfen, aber dann produzierst du

00:54:56.559 --> 00:54:59.259
was, was meistens mit den Browsern funktioniert und nicht in normalen Imagebetrachtern.

00:55:00.959 --> 00:55:05.559
Ich glaube auch diese, genau, es gibt kein Konzept von Hintergrundbildern in SVG so richtig.

00:55:05.719 --> 00:55:12.819
Also ich weiß, dass ich mal irgendwie das Root-Element einfärben wollte.

00:55:13.139 --> 00:55:15.999
Und das war gar nicht so, also es ging nicht. Also ich musste dann wirklich

00:55:15.999 --> 00:55:20.819
ein Rechteck bauen, das die Größe des Root-Elements hat.

00:55:20.939 --> 00:55:24.299
Und das konnte ich dann mit einer Fill-Farbe ausstatten.

00:55:25.499 --> 00:55:31.139
Ja gut, aber das ist ja auch irgendwie einigermaßen okay, weil das Konzept einer

00:55:31.139 --> 00:55:34.899
Hintergrundfarbe ist ja im Webbrowser nun das schrägere.

00:55:38.219 --> 00:55:43.859
Wie kann etwas, was einfach nur existiert, sozusagen, also Root,

00:55:43.879 --> 00:55:47.459
also das Dokument an sich, eine Farbe annehmen?

00:55:47.879 --> 00:55:53.799
Ja, das ist noch nicht mal so ganz das, aber wenn du wirklich eine leere Webseite hast,

00:55:53.999 --> 00:55:58.879
so wirklich nur ein leerer Body, dann ist ja der Body durch seinen Standard

00:55:58.879 --> 00:56:03.419
8 Pixel Margin dann in Summe 16 Pixel hoch. Ja. Und that's it.

00:56:04.839 --> 00:56:08.159
Und wenn du dem Body aber, der 16 Pixel hoch ist, eine Hintergrundfarbe gibst,

00:56:08.199 --> 00:56:11.219
dann wird die ganze Seite diese Hintergrundfarbe annehmen, obwohl das Element,

00:56:11.299 --> 00:56:13.199
das du stylst, bloß 16 Pixel hoch ist.

00:56:14.699 --> 00:56:16.239
Ist das so? Jupp.

00:56:18.850 --> 00:56:24.710
Also, okay, spannend. Also beim HTML-Element, da verstehe ich,

00:56:24.790 --> 00:56:30.550
also da war mir das bewusst, beim Body-Element nicht. Ja.

00:56:32.090 --> 00:56:36.130
Naja, so ist das mit diesen spannenden Eigenschaften. Ich habe einfach nur versucht,

00:56:36.170 --> 00:56:41.730
noch mal eine Brücke zu schlagen zur SVG, unserem Lieblingselement des Tages.

00:56:41.990 --> 00:56:44.750
Das hatten wir ja auch, also vielleicht können wir die Bombe ja jetzt platzen,

00:56:44.750 --> 00:56:46.450
Wir haben ja gesagt, nach der 600.

00:56:46.830 --> 00:56:50.450
Folge wollen wir uns in einen SVG-Podcast verwandeln.

00:56:51.810 --> 00:56:54.530
Das, Shep, ich weiß nicht. Wir wollten das uns eigentlich aufheben,

00:56:54.550 --> 00:56:56.570
hatten wir vorher abgesprochen. Jetzt habe ich es gespoilert.

00:56:57.090 --> 00:57:01.290
Ich bin immer noch der Meinung, dass wir das einfach zu XML absolut generalisieren sollten.

00:57:01.450 --> 00:57:05.910
Also nicht nur SVG, sondern auch MathML, XML, XHTML, der ganze Krempel.

00:57:06.550 --> 00:57:09.990
Das wäre gut. Ja, genau. Die spaßigen Zeiten sind vorbei, Leute.

00:57:10.430 --> 00:57:13.430
Jetzt wird mal hier ein bisschen was gelernt und geackert. Jawohl,

00:57:13.430 --> 00:57:18.490
Schlips anziehen und einen SVG-Paser, einen HXML-Paser, Gottverdammte-Achs, schreiben.

00:57:19.190 --> 00:57:23.150
Ja, wir brauchen mal Working Draft Schlipse. Das wäre mal cool.

00:57:24.470 --> 00:57:27.730
Das ist auf jeden Fall irgendwie eine Art von Merch, das kriegst du nicht bei jedem Podcast.

00:57:29.250 --> 00:57:32.450
Lass uns das echt mal erforschen. So lila-weiß-gestreifte, weißt du?

00:57:33.490 --> 00:57:38.070
Ja, oder lila und das Logo eingestickt. Das Logo muss halt dann so ein Pin sein,

00:57:38.190 --> 00:57:42.330
weißt du, wo andere ihre Nationalfahne haben, muss bei uns am Revers halt das Logo sein.

00:57:45.230 --> 00:57:52.670
Ja, also wir freuen uns auf jeden Fall dann auf eure zahlreichen Zuschriften, wie ihr das dann findet.

00:57:53.210 --> 00:57:57.550
SVG, wie gesagt, eins der Kernthemen ab 601, aber...

00:57:58.857 --> 00:58:03.837
Ne, seid jetzt nicht zu aufgeregt und seid entspannt, denn eine Sendung kommt

00:58:03.837 --> 00:58:07.897
jetzt erstmal noch, die noch normal ist und danach geht es dann mit den coolen Themen los.

00:58:08.357 --> 00:58:11.877
Bis dahin würde ich aber einmal nochmal den Button drücken, wenn ihr wollt.

00:58:11.937 --> 00:58:13.997
Ja, bitte, sehr gerne. Dann gucken wir uns noch was an.

00:58:14.357 --> 00:58:17.757
Genau, und jetzt sind wir schon... Wir haben heute irgendwie den...

00:58:17.757 --> 00:58:19.977
Also der Zufall ist halt, wie der Zufall es will.

00:58:20.337 --> 00:58:25.557
Und zwar geht es um einen weiteren Typ im CSS. Und diesmal geht es um eine URL.

00:58:26.357 --> 00:58:33.477
Ja, eine URL. Wer kennt sie nicht? Es ist eine URL zu einem Bild,

00:58:33.537 --> 00:58:35.777
beispielsweise einem Hintergrundbild in CSS.

00:58:36.437 --> 00:58:43.077
Die URL-Funktion wird dafür verwendet. und man kann nicht nur URLs reingeben

00:58:43.077 --> 00:58:50.237
in diese URL-Struktur im Sinne von HTTP Doppelpunkt Doppel Slash und so weiter,

00:58:50.297 --> 00:58:55.817
sondern man kann natürlich auch so interessante Konstrukte fahren wie Data Doppelpunkt

00:58:55.817 --> 00:59:01.317
Image Slash PNG und dann Base64 inkludiertes PNG da reingeben oder Ähnliches.

00:59:01.397 --> 00:59:04.577
Ja, pass auf, genau, oder Ähnliches, weil da kommen wir nämlich wieder zum Thema.

00:59:04.577 --> 00:59:04.697
So, jetzt wird es nämlich spannend.

00:59:04.997 --> 00:59:07.257
Wir kommen jetzt wieder zum wichtigen Thema des Podcasts zurück,

00:59:07.257 --> 00:59:09.397
Weil was du da ja auch reinschreiben kannst, statt Image PNG,

00:59:09.517 --> 00:59:13.757
ist ja Image SVG und dann kannst du dir das Base64 spannen, kannst du da einfach

00:59:13.757 --> 00:59:18.557
in die URL direkt das SVG reinschreiben und jetzt sagt sich vielleicht der eine oder die andere,

00:59:18.697 --> 00:59:21.617
das ist ja völlig beknackt, aber ist es halt eben nicht, wenn man tatsächlich

00:59:21.617 --> 00:59:23.737
an solchen Positionen, wo es eine URL gibt,

00:59:24.077 --> 00:59:28.817
man wirklich ein SVG haben möchte, um halt einen SVG-Filter so Single-Use-mäßig

00:59:28.817 --> 00:59:33.417
einfach in sein CSS direkt einzubetten oder halt ein SVG als Hintergrundbild,

00:59:33.457 --> 00:59:36.677
das man irgendwie generiert hat oder so, das kommt dann direkt da rein, so alles in eins.

00:59:37.757 --> 00:59:41.097
Muss man nur irgendwie aufpassen, dass sich nicht der Editor verschluckt,

00:59:41.137 --> 00:59:43.837
der das Ganze versucht dann zu Syntax-Highlighten. Fragt mich nicht, woher ich das weiß.

00:59:45.357 --> 00:59:47.997
Ja, aber es gibt ein paar Zeichen, die man noch escapen muss.

00:59:49.337 --> 00:59:52.117
Ja gut, aber wenn man das ja auto-generiert, ist das ja gar kein Problem.

00:59:53.977 --> 00:59:56.597
Ja, das habe ich auch schon öfters mal gemacht.

00:59:57.975 --> 01:00:03.835
Da hat, glaube ich, der Chris Coyier ein schönes auf CSS Tricks, glaube ich, dann.

01:00:04.515 --> 01:00:07.055
Wie ist das denn hier? CSS Tricks.

01:00:09.795 --> 01:00:15.615
Was ist das? Inline SVG. Jetzt mache ich hier. Using SVG. Aha.

01:00:17.035 --> 01:00:22.035
Das muss doch das sein. Ich wollte nochmal neben den SVG-Sachen,

01:00:22.075 --> 01:00:25.015
die natürlich jetzt gleich spannend sind, können wir auch sofort wieder darauf

01:00:25.015 --> 01:00:29.535
zurückkommen, nochmal auf eine andere Sache eingehen, mir fällt viel beim Durchscrollen

01:00:29.535 --> 01:00:32.695
hier durch die Doku jetzt gerade nochmal ein,

01:00:32.795 --> 01:00:35.715
dass es ja auch eine Zeit lang so eine Möglichkeit gab,

01:00:36.195 --> 01:00:43.775
Border Radius im Internet Explorer, ich sag mal jetzt einfach Version 7,

01:00:43.935 --> 01:00:46.635
aber vielleicht war es auch die 6er, das weiß ich nicht mehr ganz genau,

01:00:47.335 --> 01:00:51.215
auch irgendwie hinzubekommen, weil es noch nicht überall unterstützt wurde,

01:00:51.215 --> 01:00:59.975
in dem man irgendein Skript da in so eine URL-Eigenschaft reingepastet hat,

01:01:01.395 --> 01:01:05.855
um daraus dann so halbwegs abgerundete Ecken zu generieren.

01:01:05.995 --> 01:01:08.255
Erinnert sich irgendeiner von euch noch daran?

01:01:09.875 --> 01:01:13.215
Ja, klar, sicher. Ich frage mich jetzt, wo die Erinnerung bei dir herkommt,

01:01:13.275 --> 01:01:17.375
so jung und dynamisch wie du bist, warum du dich mit so fossil verstaubten Sachen

01:01:17.375 --> 01:01:19.855
rumschlägst. Aber ja, diese HTC-Dateien waren das.

01:01:21.035 --> 01:01:25.475
HTC, ja genau. Und ging das nicht auch über die URL-Funktion?

01:01:27.675 --> 01:01:32.175
Das erinnere ich mich jetzt ehrlich gesagt nicht mehr so direkt.

01:01:33.435 --> 01:01:39.895
Ich glaube, die haben ja, ich glaube, dass die auch URL benutzt haben, oder?

01:01:40.755 --> 01:01:41.695
Ich hab's jetzt hier mal rausgeguckt.

01:01:42.635 --> 01:01:46.035
Behavior-Attribut. Genau, Behavior-Attribut. Da hast du URL reingesteckt.

01:01:46.295 --> 01:01:50.555
URL und dann irgendwie sowas wie einen PNG-Filter gedönst, damit man da transparente

01:01:50.555 --> 01:01:52.515
PNGs hinkriegt. Hatten wir ja auch nicht.

01:01:53.215 --> 01:01:56.715
Wir hatten ja nichts. Dafür wurde das ja auch verwendet. Boah,

01:01:56.835 --> 01:01:58.215
das ist schon echt hacky, ne?

01:01:59.335 --> 01:02:03.315
Das ist schon echt crazy. Ja, ich weiß jetzt auch nicht genau,

01:02:03.475 --> 01:02:06.035
woher das kam. Ist das crazy oder ist die Realität eigentlich viel crazy-iger,

01:02:06.155 --> 01:02:07.115
die wir heutzutage haben?

01:02:07.315 --> 01:02:10.475
Weil ich meine, du hattest damals ja einen so dermaßen reduzierten,

01:02:10.555 --> 01:02:14.595
sagen wir mal, Problemscope, was so CSS anging. Da ging halt ja auch nicht viel.

01:02:14.755 --> 01:02:17.735
Und dann gab es halt so ein paar IE-Probleme, wie irgendwie die PNGs waren nicht

01:02:17.735 --> 01:02:20.015
transparent, da hast du eine Zeile reingepastet, dann lief,

01:02:21.635 --> 01:02:23.935
Und wenn du heute irgendwie einfach nur so überlegen willst,

01:02:23.995 --> 01:02:26.035
okay, ich will eine Webseite bauen und du musst dann erst mal anfangen über

01:02:26.035 --> 01:02:29.635
Dark Mode und Responsive nachzudenken, ist ja allein schon qua,

01:02:30.955 --> 01:02:34.155
Problemraum, den du bearbeiten musst, alles schon viel herausfordernder als

01:02:34.155 --> 01:02:37.035
das früher, wo man sich halt eben dachte, mein PNG sieht doof aus,

01:02:37.095 --> 01:02:38.595
was tue ich? Copy, paste, fertig.

01:02:39.255 --> 01:02:44.735
Es ist eher diese basalen Dinge, dass die halt so anstrengend waren.

01:02:44.735 --> 01:02:52.515
Also ein transparentes PNG hinzubekommen oder Spacer GIFs, die du verwendet hast oder, oder, oder.

01:02:54.473 --> 01:03:01.453
Und also ja, du hast recht, heute ist es viel komplexer, aber damals waren es halt so Sachen,

01:03:01.533 --> 01:03:04.953
wo du halt die Hände über den Kopf zusammenschlägst, wenn du jemandem,

01:03:04.973 --> 01:03:10.133
der jetzt heute sich ins Webengineering einarbeitet, sagst, wie das damals lief,

01:03:10.253 --> 01:03:11.633
der lacht dich erstens aus,

01:03:11.793 --> 01:03:17.113
klar, oder die, völlig zu Recht, aber auf der anderen Seite halt auch ist man

01:03:17.113 --> 01:03:20.393
halt auch so, Alter, was habt ihr für Probleme, die ihr da lösen müsstest,

01:03:20.393 --> 01:03:22.533
das ist doch alles Quatsch.

01:03:23.173 --> 01:03:26.153
Ja gut, aber heutzutage ist das Problem dann halt irgendwie,

01:03:26.333 --> 01:03:30.973
keine Ahnung, meine Serverkomponenten rendern nicht, weil der Flux-Kompensator

01:03:30.973 --> 01:03:34.533
in der neuesten React-Beta seine API geändert hat oder sowas.

01:03:36.793 --> 01:03:42.193
Es ist ja nicht wenig absurd. Also ich kann mehr zu den Problemen Relaten,

01:03:42.253 --> 01:03:44.293
die halt heutzutage entstehen Weißt du, was ich meine?

01:03:44.473 --> 01:03:50.393
So diese alten Dieses HTC File, damit du einen Border Radius hinbekommst,

01:03:50.493 --> 01:03:54.533
das ist halt etwas Da fühle ich mich nicht gut bei Da denke ich mir,

01:03:54.633 --> 01:03:57.513
das ist ein Hack Und genau das war es ja damals,

01:03:58.333 --> 01:04:03.253
Es wurde ja, also es Gab ja Webseiten, die dann Hack den Browser oder was weiß

01:04:03.253 --> 01:04:08.313
ich Hier ist der IE7 Hack, ich weiß noch irgendwo Irgendwo gab es eine Webseite,

01:04:08.413 --> 01:04:10.493
da konnte man immer nachgucken und kopieren.

01:04:10.753 --> 01:04:17.073
So funktioniert es im IE7, aber es hat keine Auswirkungen auf den IE8.

01:04:17.433 --> 01:04:22.193
Und hier ist ein Hack, der ist nur für den Netscape-Communicator.

01:04:22.393 --> 01:04:25.213
Ich weiß nicht, ob das da möglich war, aber ihr wisst, was ich meine.

01:04:25.553 --> 01:04:33.113
Im Firefox 2.7, 1.5, verwende bitte diesen Hack.

01:04:33.233 --> 01:04:38.813
Und Safari 4, da verwendest du bitte diesen Hack. Und das war halt, das ist halt ein Hack.

01:04:39.193 --> 01:04:42.433
Und heute ist es halt, es funktioniert halt nicht, weil du mal wieder irgendwas

01:04:42.433 --> 01:04:47.993
schlecht zusammengestöpselt hast oder irgendeine Library sich nicht updaten lässt.

01:04:48.813 --> 01:04:53.713
Ja genau, also das ist sicherlich richtig so. Die gemeinsame Baseline ist so groß geworden,

01:04:53.853 --> 01:04:57.213
dass die meisten Probleme, die du im Alltag zu lösen gedenkst,

01:04:57.213 --> 01:05:00.753
ja einfach so out of the box funktionieren, wo du ja nicht mal irgendwelche

01:05:00.753 --> 01:05:03.173
Libraries für brauchst, wenn es einfach nur darum geht, ich will jetzt mein

01:05:03.173 --> 01:05:05.953
Hintergrundbild positionieren oder mein PNG soll gut aussehen.

01:05:05.953 --> 01:05:09.693
Oder irgendwie auch was Absurderes, wie ich will ein neues Bildformat verwenden.

01:05:09.753 --> 01:05:13.433
Dann kriegst du das ja heutzutage mit irgendwelchen Sprachmitteln wie Picture

01:05:13.433 --> 01:05:15.833
Element und Ähnlichem tatsächlich hin auszuliefern.

01:05:15.893 --> 01:05:17.953
Du verstehst das, dann nimmst du das und du verstehst das nicht,

01:05:17.993 --> 01:05:18.593
dann nimmst du das andere.

01:05:19.437 --> 01:05:22.677
Und da muss man halt sagen, es ist weniger Getrickse.

01:05:22.777 --> 01:05:27.057
Es ist immer noch kompliziert und teilweise hackisch, aber es fühlt sich nicht

01:05:27.057 --> 01:05:29.117
mehr so als faul gegen die Browser an, was du da machst.

01:05:29.637 --> 01:05:33.337
Aber das ist eigentlich ein guter Punkt, den du gerade machst mit diesen Bildern.

01:05:33.377 --> 01:05:37.957
Also dieses Bildformat kennst du nicht, also verwende ein anderes.

01:05:38.057 --> 01:05:42.197
Das ist ja eigentlich nur, man hat sich auf eine Art und Weise geeinigt,

01:05:42.297 --> 01:05:47.017
Hacks in den Browser reinzuschreiben, sodass sie allgemein verträglicher sind.

01:05:47.017 --> 01:05:51.577
Aber im Endeffekt ist es doch das Gleiche, wie du machst einen Plus oder einen

01:05:51.577 --> 01:05:58.897
Stern vor die CSS-Eigenschaft und auf einmal funktioniert es in einem speziellen

01:05:58.897 --> 01:06:00.477
Browser. Würde ich nicht sagen.

01:06:01.597 --> 01:06:06.557
Letzteres nutzt einen Bug aus und ersteres ist die Benutzung eines Features.

01:06:06.797 --> 01:06:09.517
Also das Picture-Element ist dafür gedacht, dass du sowas machen kannst.

01:06:09.577 --> 01:06:12.137
Das andere ist halt wirklich so ein Bug und dann kommt irgendwie ein Update

01:06:12.137 --> 01:06:14.697
und dann geht alles kaputt. Das passiert ja mit dem Picture-Element ja nicht mehr.

01:06:15.437 --> 01:06:19.037
Ja, aber das ist ja genau der Punkt, den ich meine. Die haben halt einfach nicht

01:06:19.037 --> 01:06:22.497
Bugs, sondern die haben es halt in Feature umgetauft, haben es ein bisschen

01:06:22.497 --> 01:06:25.317
verändert, aber im Endeffekt ist ja das Behavior ähnlich.

01:06:25.617 --> 01:06:29.797
Es funktioniert halt dann nur da, wo es halt auch unterstützt wird.

01:06:29.937 --> 01:06:32.757
Und das war ja in der Vergangenheit auch so. Aber natürlich,

01:06:32.997 --> 01:06:36.477
das eine ist ein Bug und das andere ist halt explizit so eingebaut.

01:06:36.477 --> 01:06:39.317
Aber nichtsdestotrotz, der Outcome ist ja der gleiche.

01:06:39.357 --> 01:06:41.357
Ja, also sie haben quasi den Trampelfad asphaltiert.

01:06:43.014 --> 01:06:49.154
Ja, das ist eigentlich ein ganz gutes Bild dafür. Das gefällt mir. Da gehe ich mit. Gut.

01:06:50.814 --> 01:06:58.654
All right. Zurück zum Thema URL. Ich wollte noch sagen, da ist vielleicht noch

01:06:58.654 --> 01:07:03.414
so eine Sache interessant, die darüber hatte der Stefan Judis mal irgendwann

01:07:03.414 --> 01:07:04.914
einen Blogpost geschrieben.

01:07:05.294 --> 01:07:13.214
Und zwar kannst du keine, in der URL-Funktion, kannst du keine Custom Properties

01:07:13.214 --> 01:07:15.554
einbinden. Das geht nicht.

01:07:16.394 --> 01:07:23.554
Was daran liegt, dass diese URL-Funktion, die gibt es in zwei Varianten,

01:07:23.654 --> 01:07:25.114
in der alten und in der neuen.

01:07:25.314 --> 01:07:31.634
In der alten, also das geht ja auch immer noch, du kannst eben eine URL da reinstecken

01:07:31.634 --> 01:07:38.594
und sie nicht in Anführungszeichen oder in Single Quotes stecken Und quasi die neue Version,

01:07:38.794 --> 01:07:44.434
die versteht halt, dass du es in Quotes steckst.

01:07:44.574 --> 01:07:52.394
Problem ist halt, dass der Parser eben einfach nicht weiß, ist das jetzt quasi

01:07:52.394 --> 01:07:54.154
die alte oder die neue Schreibweise.

01:07:54.154 --> 01:07:58.134
Und wenn du in die URL-Funktion eine Variable reinstecken möchtest,

01:07:58.214 --> 01:08:00.434
dann denkt er, ah, okay, das ist die alte Schreibweise.

01:08:00.654 --> 01:08:02.354
Da sind ja keine Anführungszeichen.

01:08:03.974 --> 01:08:08.334
Und dann escapet er alle Klammern.

01:08:08.494 --> 01:08:12.974
Und du hast ja die var-Funktion da drin. Und dann werden die Klammern sozusagen

01:08:12.974 --> 01:08:18.314
disabled automatisch durch den Parser, weil er die escapet mit einem Backslash.

01:08:18.594 --> 01:08:23.494
Das heißt also, aus dieser funktionierenden Funktion wird eine nicht funktionierende Funktion.

01:08:25.454 --> 01:08:26.734
Genau, und, äh,

01:08:28.548 --> 01:08:31.908
Die Lösung ist, es gibt eine neue Property, die aber, glaube ich,

01:08:31.908 --> 01:08:34.568
noch in keinem Browser implementiert ist, die aber spezifiziert ist.

01:08:34.628 --> 01:08:41.208
Die ist im Prinzip wie die URL-Funktion, die heißt aber Source SRC.

01:08:42.228 --> 01:08:46.888
Macht genau das gleiche, aber eben nur in der neuen Variante. Ja.

01:08:48.368 --> 01:08:53.688
Also mit Anführungszeichen. Also sie gibt quasi einfach nur dem Parser die Garantie,

01:08:53.728 --> 01:08:58.308
dass wenn er das parsst, dass das eben nach dem neuen Muster ist und dann dann

01:08:58.308 --> 01:09:02.128
kann der Browser eben nicht auf die Idee kommen,

01:09:02.248 --> 01:09:05.968
dass das vielleicht doch die alte Syntax ist und er das dann vielleicht irgendwie

01:09:05.968 --> 01:09:07.708
so parsen muss, sondern er weiß, okay,

01:09:08.808 --> 01:09:10.748
es kann nicht die alte Syntax sein,

01:09:10.888 --> 01:09:14.808
es gibt es nicht per Speck und dann funktionieren Variablen da drin auch.

01:09:16.308 --> 01:09:21.268
Okay, was ist denn, wenn ich mir mit AddProperty eine Custom Property definiere

01:09:21.268 --> 01:09:24.628
mit dem Typ URL? Was kriege ich denn dann? dann.

01:09:25.108 --> 01:09:29.048
Dann kriege ich einfach nur etwas, wo ich dann eine komplette URL syntax reinschreiben

01:09:29.048 --> 01:09:32.128
kann und das kann ich dann per Custom Property,

01:09:33.268 --> 01:09:37.608
als Wert irgendwo verwenden, wo es eine komplette URL inklusive dieses Strings

01:09:37.608 --> 01:09:40.528
URL, Runde Klammer auf, nimmt. Verstehe ich das richtig?

01:09:43.508 --> 01:09:43.928
Moment,

01:09:46.308 --> 01:09:52.328
da bin ich jetzt nicht mitgekommen. Was willst du machen? Mit der Custom Property definieren.

01:09:53.068 --> 01:09:57.288
Und da kann ich als Typ ja auch URL angeben. Das ist ja erlaubt,

01:09:57.288 --> 01:09:59.048
ebenso wie Color und den ganzen anderen Kram. Ja.

01:10:00.048 --> 01:10:04.028
Aber wenn ich dann sehe, das ist eine URL-Value, dann lese ich das als die komplette

01:10:04.028 --> 01:10:06.188
Syntax inklusive der drei Buchstaben und der runden Klamm.

01:10:08.770 --> 01:10:14.590
Hm, das weiß ich nicht genau. Kann gut sein, ja. Doch, müsste eigentlich, ja.

01:10:17.330 --> 01:10:20.290
Ja, verflixt. Laute Ausnahmen, ey.

01:10:20.430 --> 01:10:22.710
Und der Hack, den du da hast, ist ja auch wieder sehr schön.

01:10:22.770 --> 01:10:26.430
Das erinnert mich so an so Empty und Blank, die Pseudoklassen.

01:10:28.050 --> 01:10:30.970
Wo so irgendwie der erste Anlauf so einer ist, wo man so merkt,

01:10:30.970 --> 01:10:33.690
oh, das ist irgendwie komplett daneben. Also lass mal einfach irgendwie Version

01:10:33.690 --> 01:10:37.290
2.0 erfinden und einfach neben Version 1.0 stellen und hoffen,

01:10:37.350 --> 01:10:39.410
dass niemand jemals Version 1.0 jemals anschaut.

01:10:40.710 --> 01:10:44.830
Du meinst hier die Pseudoklasse Empty, oder was? Genau, Empty und Blank.

01:10:45.210 --> 01:10:48.710
Oder heißt es Blank? Ich glaube, es heißt nicht Blank, genau.

01:10:48.770 --> 01:10:55.450
Aber Empty war ja so, dass wenn du auch nur ein Space oder ein Return in dem

01:10:55.450 --> 01:10:59.050
Element drin hattest, war es nicht mehr Empty und dann griff das nicht mehr. Genau.

01:11:00.030 --> 01:11:05.590
Und das haben die ja nachträglich quasi umspezifiziert, dass dass sowas dann

01:11:05.590 --> 01:11:12.410
auch kollabiert sozusagen einfach und nicht als Content gewertet wird. Ist das so?

01:11:13.490 --> 01:11:17.070
Ich meine, ja. Es kann auf jeden Fall noch kein einziger Browser.

01:11:17.950 --> 01:11:20.370
Da gab es doch mal eine andere Pseudoklasse noch dazu. Also,

01:11:20.370 --> 01:11:24.350
empty können alle Browser. Und ich glaube, dass die das umspezifiziert haben.

01:11:24.550 --> 01:11:25.710
Aber da können wir noch mal gucken.

01:11:26.530 --> 01:11:29.330
Genau, also umspezifiziert haben sie es, supported ist es nicht.

01:11:29.350 --> 01:11:30.770
Aber blank ist auch nirgendwo supported.

01:11:31.670 --> 01:11:34.370
Obwohl das tatsächlich als Spezifikation auch existiert.

01:11:35.890 --> 01:11:41.910
Also ich hab's nicht komplett geträumt Ja, und das wird noch von keinem Browser unterstützt?

01:11:42.030 --> 01:11:46.810
Nö Okay, ja, steht zumindest in der MDN so Okay.

01:11:49.118 --> 01:11:49.258
Hm.

01:11:51.378 --> 01:11:55.698
Genau, und das andere, was war das andere? Ah ja, Blank hast du, genau, hast recht, ja.

01:11:56.778 --> 01:12:01.118
Und Blank ist dann, das ist dann wirklich so voll ...

01:12:03.998 --> 01:12:09.358
Äh ... Hä? Hä? Selects empty user input elements.

01:12:09.718 --> 01:12:12.638
Das ist was ganz anderes. Das ist was anderes, an was ich mich erinnere.

01:12:13.118 --> 01:12:16.278
Ja, ich glaube, dass tatsächlich, da gab's zwei, und dann haben die gesagt,

01:12:16.538 --> 01:12:20.958
nee, lass uns einfach empty dann, Lass uns das mal richtig machen.

01:12:21.698 --> 01:12:27.458
Ja, okay. Dann habe ich das tatsächlich auf einmal... Die Browser machen das

01:12:27.458 --> 01:12:29.558
nicht. Die machen die Dreckssäcke.

01:12:30.318 --> 01:12:34.838
Naja, dann kannst du ja nicht ausrollen. Es gibt ja genug Code,

01:12:35.138 --> 01:12:38.078
der MT benutzt und so mit dem alten Verhalten.

01:12:38.418 --> 01:12:41.358
Und jetzt einfach Version 2.0 ausrollen und dann sehen alle Webseiten anders

01:12:41.358 --> 01:12:42.638
aus. Dürfte schwierig hinhauen, oder?

01:12:45.998 --> 01:12:49.138
Ich weiß es nicht. Gleiches Problem wie Type-of-Null ist Object.

01:12:49.278 --> 01:12:51.918
Das haben sie ja auch nicht in den Griff gekriegt. Und ich bezweifle,

01:12:51.918 --> 01:12:52.598
dass sie das nicht kriegen.

01:12:53.078 --> 01:13:01.538
Meine These ist ja, dass das eher, sagen wir mal, dass die Programmierer eher

01:13:01.538 --> 01:13:04.738
erwarten, dass das empty greift und es dann nicht greift.

01:13:04.818 --> 01:13:07.818
Und sie das aber nicht sozusagen absichtlich machen.

01:13:08.338 --> 01:13:11.578
Also ich glaube, das wäre eigentlich allen gedient damit.

01:13:11.918 --> 01:13:14.518
Naja, außer allen, die jetzt gerade eine richtig aussehende Webseite haben.

01:13:14.518 --> 01:13:18.278
Durch einen Bug, also dadurch, dass empty irgendwo falsch verwendet wird.

01:13:19.198 --> 01:13:20.658
Und das sind ja die, um die es geht.

01:13:22.678 --> 01:13:26.018
Ja, ich weiß nicht, wie viel es davon gibt. Das kann man leider ja auch nicht

01:13:26.018 --> 01:13:30.018
als Browser-Hersteller so irgendwie messen, ne? Also bei Chrome sagen sie...

01:13:30.978 --> 01:13:33.878
Ja? Also bei Chrome sagen sie ja immer, sie können zumindest feststellen,

01:13:33.938 --> 01:13:34.898
wie viel das benutzt wird.

01:13:35.658 --> 01:13:40.818
Genau, aber du weißt ja nicht, ob das dann Absicht, also ob quasi der Effekt,

01:13:40.818 --> 01:13:43.598
der dann eintritt, ob der so gewünscht ist.

01:13:44.518 --> 01:13:49.738
Hat jemand wohl wissend, dass Empty nicht matcht auf Elemente,

01:13:49.738 --> 01:13:52.918
die noch Widespace enthalten, das dann benutzt deswegen?

01:13:53.798 --> 01:13:59.238
Oder ist es eigentlich eher, also das kannst du nicht unterscheiden von Leuten,

01:13:59.298 --> 01:14:04.638
die Empty benutzt haben, weil sie im Prinzip wollten, dass ein Element zum Beispiel

01:14:04.638 --> 01:14:06.238
dann verschwindet, wenn nichts drin ist.

01:14:06.878 --> 01:14:10.038
Sagen wir mal, wenn es ein Border hat oder so und da steckt aber nichts drin,

01:14:10.118 --> 01:14:11.898
dann willst du es vielleicht auch gar nicht anzeigen.

01:14:12.458 --> 01:14:14.898
Ja, das ist schon klar, aber du kannst ja zumindest mal gucken,

01:14:14.978 --> 01:14:19.018
ob sozusagen irgendwie du sehen kannst, dass irgendwo eine CSS-Regel geschrieben

01:14:19.018 --> 01:14:23.298
wird, die irgendwas targetet, was empty ist, und dass diese Regel nirgendwo matcht.

01:14:24.658 --> 01:14:27.998
Weil du halt da überall immer irgendwelchen Whitespace noch drin hast.

01:14:28.858 --> 01:14:31.398
Also das kannst du entweder automatisch feststellen, oder selbst wenn nicht,

01:14:31.438 --> 01:14:35.878
kannst du halt einfach irgendwie so ein kleines Bataillon Praktikanten hernehmen

01:14:35.878 --> 01:14:40.398
und jedem von denen zehn Webseiten auswerten lassen, und dann rechnest du das halt hoch.

01:14:43.924 --> 01:14:46.644
Gewagte These. Vielleicht haben die das ja auch schon gemacht und deshalb wollen

01:14:46.644 --> 01:14:48.724
sie das ja umspezifizieren und glauben, damit durchzukommen,

01:14:48.744 --> 01:14:51.364
im Gegensatz zu Type of Null as Object. Aber ich glaube nicht,

01:14:51.404 --> 01:14:52.424
dass das nicht feststellbar ist.

01:14:54.544 --> 01:14:57.324
Das ist auf jeden Fall, glaube ich, schon eine Weile unspezifiziert.

01:14:57.424 --> 01:15:00.324
Und wenn die Browser-Herstellers es nicht umsetzen, dann wird es wahrscheinlich auch nichts mehr geben.

01:15:01.164 --> 01:15:06.264
Ich finde, vielleicht interessiert es auch einfach niemanden. Also ich fände es gut.

01:15:06.404 --> 01:15:09.544
Ich gucke halt immer, dass ich dann tatsächlich auch kein Widespace und kein

01:15:09.544 --> 01:15:10.924
Return und nichts dazwischen habe. habe.

01:15:12.904 --> 01:15:16.144
Was dann immer so ein bisschen, je nachdem, was man für ein Template-System

01:15:16.144 --> 01:15:17.944
hat, muss man immer ein bisschen aufpassen.

01:15:18.124 --> 01:15:23.284
Ich wollte es gerade sagen, das ist ja schon einfach so, also die Gnade desjenigen,

01:15:23.464 --> 01:15:26.264
der sein Template-System unter Kontrolle hatte, der nicht irgendwelche Plugins

01:15:26.264 --> 01:15:28.884
über drei Ebenen in SharePoint reinwurschteln muss.

01:15:29.004 --> 01:15:32.224
Also du hast leicht reden. Ich achte darauf, dass da nicht irgendwo ein Whitespace drin ist.

01:15:32.404 --> 01:15:35.944
Weil du das ja auch im Griff hast. Aber das gilt ja nicht für jeden so. Naja.

01:15:37.844 --> 01:15:39.944
Dies stimmt. Da gebe ich dir recht.

01:15:43.844 --> 01:15:49.724
Also hier, check deine Template-Privilegien, mein Freund. Ja, chill an the base, man.

01:15:52.924 --> 01:15:56.544
Alrighty. Alrighty. Ich glaube, wir machen...

01:15:57.064 --> 01:16:01.804
Deckel drauf, ne? Genau, würde ich auch sagen. Also die URL-Eigenschaft haben

01:16:01.804 --> 01:16:06.624
wir zur Genüge behandelt und sind auf jeden Fall auch links und rechts nochmal abgebogen.

01:16:06.724 --> 01:16:11.724
Aber das Wichtigste ist, wir haben natürlich immer den den SVG-Vergleich mit an den Start gebracht.

01:16:11.924 --> 01:16:16.684
Ich hoffe, ihr freut euch auf die zukünftigen SVG- und XML-Sendungen, die anstehen.

01:16:17.464 --> 01:16:22.764
Liebe Hörerinnen und Hörer. Und HTML-CSS haben wir ja durchgespielt. Also, farewell.

01:16:23.264 --> 01:16:26.184
Das war schön mit euch. Mit HTML-CSS.

01:16:27.144 --> 01:16:29.564
Und JavaScript auch. Komm, was soll's? Weg damit.

01:16:30.604 --> 01:16:33.684
Wer braucht das heutzutage noch? Vor allem, wenn wir XML machen,

01:16:33.804 --> 01:16:36.404
dann können wir auch direkt zum Original hingehen und können Javas schreiben.

01:16:36.564 --> 01:16:39.624
Java, XML, so dass es doch wie die Welt eigentlich wirklich wirklich zusammengehalten wird.

01:16:40.444 --> 01:16:42.244
Und J-Script aber auch.

01:16:44.348 --> 01:16:47.708
Ist das dieses Zeug für die Script-Kiddies da, so im Internet Explorer?

01:16:48.788 --> 01:16:55.048
Ja, genau. Das war doch die IE-Flavor von JavaScript. Damit man DHTML-Schnee

01:16:55.048 --> 01:16:56.268
machen kann zur Weihnachtszeit.

01:16:58.108 --> 01:17:02.508
Herrlich. Ach, das steht ja auch wieder an. Ja, ich hoffe, diese Sendung kommt vorher noch raus.

01:17:02.648 --> 01:17:06.628
Wir sind jetzt noch nicht ganz in der Schneezeit angekommen.

01:17:07.508 --> 01:17:10.948
Aber bestimmt sind auch eure Webseiten bald wieder verschneit.

01:17:11.008 --> 01:17:15.988
Wir freuen uns natürlich auf auf zahlreiche Einsendungen von Webseiten,

01:17:16.068 --> 01:17:20.708
die diese schöne, ja, diesen schönen Schneefall dann doch uns zeigen.

01:17:21.168 --> 01:17:25.528
Vielleicht auch gern mit Video. Und dann muss er liegen bleiben. Liegen bleiben, ja.

01:17:26.408 --> 01:17:31.028
Ich glaube, wir können auch fair sagen, ich habe hier irgendwo im Regal auch

01:17:31.028 --> 01:17:32.948
noch ein SVG-Buch bestimmt rumliegen.

01:17:33.008 --> 01:17:38.188
Also für die Nerds unter euch, die sagen, sie sind jetzt da voll drin in der

01:17:38.188 --> 01:17:39.868
Geschichte mit dem Schnee.

01:17:39.868 --> 01:17:42.628
Feuer und Flamme. wir machen einen kleinen Wettbewerb draus,

01:17:42.688 --> 01:17:51.368
wer die schönste Einsendung hat zu dieser Schneethematik auf der Webseite der oder diejenige,

01:17:52.428 --> 01:17:56.328
bekommt von uns hier ein Buch zur Verfügung gestellt, ich kann nicht garantieren,

01:17:56.368 --> 01:18:00.828
dass es SVG ist, aber irgendwas schönes wird sich finden lassen im Bücherregal

01:18:00.828 --> 01:18:05.428
und bis dahin sagen wir erstmal, wir hoffen, ihr seid nächste Woche am Start,

01:18:05.628 --> 01:18:09.608
wenn es heißt, Sendung Nummer 600 die Hälfte von.

01:18:11.468 --> 01:18:14.468
1200 Sendungen haben wir dann gemacht, nämlich 600.

01:18:14.928 --> 01:18:20.348
Ich hoffe, ihr seid am Start. Wir hören uns, wir sehen uns und bis dahin erstmal alles Gute.

01:18:22.008 --> 01:18:28.928
Macht's gut und danke Peter und danke Shep, dass ihr so viel SVG-Wissen hier

01:18:28.928 --> 01:18:29.928
auch preisgegeben habt.

01:18:30.268 --> 01:18:33.128
Bis zum nächsten Mal. Ja, wir laufen uns warm hier.

01:18:34.328 --> 01:18:35.848
Tschüssi. Tschüss.

01:18:36.560 --> 01:18:59.440
Music.

01:18:40.088 --> 01:18:52.548
Bis zum nächsten Mal.