Generated Shownotes
Chapters
0:01:44 Revision 599: Glücksrad mit reichlich SVG und CSS-Datentypen!
0:02:57 Das class-Attribut
0:09:19
0:27:26 SVG Text Positioning (dy)
0:37:32 border-top-style
0:43:19 CSS‘ -Datentyp
0:58:08 CSS‘ -Datentyp
Long Summary
In dieser Folge diskutieren wir verschiedene Themen, insbesondere die Verwendung von SVG. Wir laden unsere Hörer ein, an einer Fishbowl-Diskussion teilzunehmen und geben einen Ausblick auf unsere bevorstehende 600. Podcast-Episode, inklusive Link zum Online-Event in den Shownotes. Wir beginnen die Diskussion mit der Working Draft Revision 599 und stoßen dabei auf das Klaas-Attribut. Wir möchten mehr über solche Attribute erfahren und möglicherweise eine Ressource dazu erstellen. Außerdem sprechen wir über die Nutzung von Klassenattributen und deren Selektion in CSS. Dabei stellen wir fest, dass Klassenattribute case-sensitive sind, was überraschend sein kann, da viele Aspekte im Web nicht case-sensitive sind. Wir erwähnen das Classlist-Interface und seine nützlichen Funktionen. Des Weiteren diskutieren wir das Style-Element und seine Verwendung zur Einbindung von CSS in eine Webseite. Wir behandeln das Scoping-Attribut, welches durch die Add-Scope-Regel ersetzt wurde, um Regeln auf bestimmte Elemente anzuwenden. Wir erklären, wie AdScope verwendet werden kann, um den Kontext für das Style-Element festzulegen und das Style-Leaking zu verhindern. Zusätzlich erwähnen wir andere Möglichkeiten, das Style-Element zu erweitern und verschiedene Regeln zu definieren. Im weiteren Verlauf der Diskussion betrachten wir das Shadow-DOM als Alternative und stellen fest, dass es eine aufwändige Methode ist. Wir betonen auch, dass HTML nach eigenen Regeln zu schreiben schwierig ist, ohne aufwendige Methoden wie das Shadow-DOM zu verwenden. Es folgt eine Debatte darüber, welche Methode die richtige Lösung für bestimmte Probleme ist. Im weiteren Verlauf sprechen wir über das FE-Drop-Shadow-Element in SVG und seine Verwendung zur Einstellung des Drop Shadows in der X-Achse. Wir erwähnen, dass SVG-Filter im Allgemeinen interessant, aber auch ziemlich kompliziert sind. Des Weiteren diskutieren wir die verschiedenen Verwendungsmöglichkeiten von SVG und betonen, dass es einfacher ist, SVG in die Webwelt zu integrieren als umgekehrt. Anschließend geht es um Border-Styles in CSS. Wir geben an, dass wir meistens Border-Style-None oder Solid verwenden. Wir erwähnen den Standard-Fokus-Style und stellen fest, dass wir bisher wenig andere Border-Styles verwendet haben. Weiterhin diskutieren wir die Verwendung von Top-Style und erwähnen die Verwendung von Pseudo-Elementen, um beispielsweise Dreiecke in Bubbles oder Tooltips zu erstellen. Dabei verweisen wir auf ein Tutorial für CSS-Dreiecke ohne Grafiken in den Shownotes. Abschließend betonen wir, dass wir uns bei html-seminar.de auf die Erklärung grundlegender Konzepte konzentrieren und dass HTML, CSS und JavaScript langsam durch SVG und XML ersetzt werden. Wir erwähnen einen Wettbewerb für die schönste Webseite zum Thema Schnee und hoffen, unsere Hörer nächste Woche wieder bei unserer 600. Sendung begrüßen zu können. Bis zum nächsten Mal!
Brief Summary
In dieser Folge diskutieren wir verschiedene Themen, einschließlich der Verwendung von SVG. Wir laden euch ein, an einer Fishbowl-Diskussion teilzunehmen und geben einen Ausblick auf unsere bevorstehende 600. Podcast-Episode. Wir behandeln Klassenattribute, das Style-Element und das Scoping-Attribut. Außerdem besprechen wir die Verwendung von SVG, Border-Styles in CSS und die Erstellung von Dreiecken mit Pseudo-Elementen. Am Ende betonen wir unseren Fokus auf grundlegende Konzepte und den Wettbewerb für die schönste Webseite zum Thema Schnee. Bis zum nächsten Mal!
Tags
SVG, Fishbowl-Diskussion, Podcast-Episode, Klassenattribute, Style-Element, Scoping-Attribut, Border-Styles, CSS, Dreiecke, Pseudo-Elemente, grundlegende Konzepte, Wettbewerb, schöne Webseite, Schnee
Transcript
[0:00] Oh, Firefox, no signal. Safari, no signal. Web-Developers, positiv.
Also ich habe die Abstimmung nicht gesehen, wo man dafür positiv abstimmen kann.
Aber auch harte Braintwister. Aber SVG ist eh so eine komplett andere Welt.
Also da muss man echt erst mal klarkommen da drin.
Wir kommen heute nicht mehr drum rum. Also SVG ist hier das, was sich durch die Sendung zieht, glaube ich.
Shep, ich weiß nicht, wir wollten das uns eigentlich aufheben, hatten wir vorher abgesprochen. Jetzt habe ich es gespoilert.
[0:31] Music.
[0:59] Liebe Hörer und Hörerinnen, feiert am 7.1. von 15 bis 18 Uhr mit uns die 600.
Podcast-Episode bei einem einzigartigen Online-Event. Denn wir veranstalten eine Fishbowl-Diskussion.
Bei einer Fishbowl-Diskussion können einige Teilnehmer und Teilnehmerinnen im Kreis diskutieren, während andere im sogenannten äußeren Kreis zuhören und dann einsteigen können.
Wir freuen uns sehr auf diese interaktive und dynamische Form für einen Austausch zwischen uns WebDevs.
Meldet euch über den Meetup-Link in den Shownotes an und seid Teil dieses spannenden Formats.
Wir freuen uns schon sehr auf euch und jetzt erstmal viel Spaß bei der folgenden Revision.
Revision 599: Glücksrad mit reichlich SVG und CSS-Datentypen!
[1:44] Revision 599 Hallo und herzlich willkommen zur Working Draft Revision 599. 99.
Kurz vor der 600 haben wir uns hier nochmal zusammengefunden zu dritt und zwar mit dem Shep. Hi.
Hallöchen. Der Peter ist am Start. Hallo. Moin, moin.
Und ich bin auch dabei. Ich bin's, der Hans. Und wir haben uns gedacht, wir hauen jetzt einfach nochmal hier eine Glücksradfolge raus.
Ich hoffe, ihr habt darauf alle Bock. Wir drei haben das auf jeden Fall.
Und ja, gar nicht viel weitere Worte sind, glaube ich, nötig.
Vielleicht nur ein Hinweis ist noch die Revision 600, die wird spannend.
Schaut da doch mal vorbei. Wir haben ja vor, da ein bisschen mit euch zu interagieren, Hörerinnen und Hörer. Wir verlinken euch das Ganze auch nochmal in den Shownotes.
Guckt da einfach mal rein und dann seid dabei. Vielleicht habt ihr es eben im Vorspann auch schon gehört.
Alles klar, aber jetzt geht es dann los mit der Working Draft Revision 599 und dem Glücksrad.
Shep, möchtest du einfach mal den Hotbutton pushen und wir gucken mal, womit wir uns als erstes befassen. Ich drücke den Hotbutton.
Das class-Attribut
[2:59] Oh, spannend.
Also, es geht unglaublich krass los.
[3:08] Und zwar mit einem, Asbach-Uralten HTML-Attribut, dem Klaas-Attribut.
Oha, Klaas, was ist das denn nochmal? Ui, ui, ui, ui, ui.
Ja, ich frag mich jetzt, ob das Ding, also ich hab Ich habe ja gerade gesagt, das wäre uralt. Ich gucke gerade schon.
Genau, guck mal, wie alt ist das denn eigentlich? In welchem Standard ist das denn aufgetaucht als erstes?
Und ja, wahrscheinlich, als es losging mit CSS, oder?
Denke ich mal. Möglich, es fehlt ja sonst so ein bisschen am Use Case.
Es ist halt auch so ein riesiges Problem bei Webstandards, das ich in letzter Zeit öfter habe, dass ich nicht irgendwie so eine Ressource finde, wo ich draufklicken kann und wo dann so drinsteht, seit wann gibt es das oder warum ist das so?
Die Fragen stelle ich mir immer häufiger und dann steht das da nicht bei, sondern einfach nur so und so ist der Algorithmus und viel öfter möchte ich wissen, ja, okay, aber was bezweckt das?
Ja, weil du ja auch so ein, sagen wir mal, so ein Web-Historiker bist.
Aber die meisten sind das ja gar nicht. Aber stimmt schon, also das müsste man eigentlich auch mal, vielleicht ist das mal was, was wir mal bauen können.
Also ich stelle es mir jetzt nicht allzu krass schwierig vor.
Also man könnte ja zumindest mal die ganzen HTML-Attribute, die es gibt, aus der MDN rausscrapen und dann mal irgendwie gegen HTML-Standards werfen, gucken, ob man da was findet.
[4:31] Also grundsätzlich, ich glaube, was so ein bisschen spannend ist natürlich mit Klassen, ist immer, wie man das Ganze dann nutzt.
Also wie man zum Beispiel auf so ein Class-Attribut selektiert.
Ich meine, den Standard kennen wir alle, brauchen wir nicht viel drüber reden.
Aber halt, wenn man dann sozusagen das Class-Attribut Per Attribute Selector zum Beispiel anspricht und sagt, okay, wenn da irgendetwas vorkommt mit, keine Ahnung, Box minus und jede Variante von irgendeiner Box Class soll selektiert werden.
So kann man halt vielleicht auch manche Elemente selektieren, die bestimmte Klassenattribute haben oder ähnliches, wo man dann nicht eine explizite Klasse per CSS beispielsweise ansprechen will oder so.
Das fiel mir jetzt noch kurz ein zu Klassenattributen.
Ansonsten, gibt es da noch was Spannendes zu erzählen zu? Hm, also, ich hab jetzt hier die MDN-Seite auf.
Da steht, dass es case-sensitive ist. Das ist vielleicht noch erwähnenswert.
Also, weil man ja davon ausgehen könnte, dass es eben nicht case-sensitive ist.
Weil ja einiges im Web ist nicht case-sensitive.
Aber hier ist es das eben dann doch.
Ja, weiß ich nicht. Äh ...
[5:54] Das Classlist-Interface ist gut. Und ich glaube, da gab es dann auch so verschiedene Ausbaustufen davon mit verschiedenen Methoden, die da drauf liegen, die dann noch nicht alle Browser konnten.
Also ich glaube zum Beispiel, dass du mehrere CSS-Klassen adden kannst auf einen Schlag und removen kannst. Ich glaube, das kam erst ein bisschen später.
Oder auch das Contains, glaube ich, Das ist auch nicht in der ersten Fassung drin gewesen.
So, ich habe ja meine historische Recherche mal so grob abgeschlossen.
Und was kam raus? Also die Frage ist halt, was man als Standard akzeptieren möchte.
Aber eigentlich ist, nee, warte mal, es gibt ja noch hier HTML+.
Das Problem ist ja, HTML 1.0 gibt es ja nicht so richtig, sondern das ist ja mehr so dieses, das hat halt eben der Tim Berners-Lee damals so aufgeschrieben.
Und der erste richtige Standard, so richtig mit Brief und Siegel, scheint mir tatsächlich zu sein, der entsprechende IETF-RSC von HTML 2.0.
Wann kam der raus? Das muss ich jetzt natürlich eben zurückscrollen.
94 sowas? 95, 24. November 95.
[7:16] So, und alles davor scheint dann mehr so semi-offiziell zu sein.
HTML Plus, a competing proposal, bla bla bla, expired, ja, 2.0 scheint ja erste offizielle zu sein.
Und da war es schon drin? Ja. Aha. Das heißt, zwischendrin auf dem Weg von, ja, den Anfängen des Webs, wann war das, 90, 89? 89?
91, da kam das erste Dokument her. Ah ja.
Von da bis 95. Irgendwo zwischendrin hat sich jemand überlegt.
Ist CSS nicht irgendwie aus 93 oder sowas? Dann würde das ja Sinn machen, dass das im Standard von 95 schon drin ist.
Und das ist genau der Krempel, den man halt einfach nicht so ohne weiteres irgendwo nachschlagen kann. Das müsste eigentlich in Kenner-Use einfach mit drinstehen.
Da kommt das her. Da wurde es erstmals definiert. Und dass das noch nicht drin ist, ist schon arg ärgerlich.
[8:14] 96 steht hier. Ja. Interessant. Ich habe jetzt hier gerade die ersten Vorschläge für Style Sheets kamen zwischen 93 und 95 auf.
Und der Harkon hat das 1994 CSS vorgeschlagen.
Ja, genau. Das ist das offizielle Release, Jahr 96.
Genau. Vorher kamen ja allerlei wirre Vorschläge auf, die ja gar nicht so wirr sind, sondern halt bloß das damalige heiße Problem nicht gelöst haben.
Und da musste man erstmal ausklammbüßern, was will man überhaupt?
Dann ist es halt CSS geworden. worden.
Alright. Ich glaube aber, wir sind ja mit der spaßigen Eigenschaft der Klasse hier durch.
Wenn es von den Hörerinnen und Hörern interessante Use Cases gibt, wie immer sind wir daran interessiert. Schreibt uns das mal.
Was habt ihr mit einem Class-Attribut gemacht?
Habt ihr da vielleicht mal ein Styling drüber applied für ein Element oder ähnliches? Spaß beiseite.
Schreibt es einfach mal auf X oder auf Mastodon oder ruft an. Wir nehmen ab.
[9:19] Peter, hast du Bock auch mal auf den Hotbutton zu drücken, klicken?
<style>
[9:24] Ich drücke auf den Hotbutton und zwar jetzt.
Und wir haben heute in die Trickkiste gegriffen.
Das Element, was wir ausgewählt haben. Peter, erzähl uns mehr dazu.
Ja, Style-Element. Natürlich, wenn ich auf den Button drücke, als Oberstyler, dann kommt das Style-Element dabei raus. Das versteht sich von selbst.
Und das ist ja die stumpfestmögliche Version, wie wir CSS in die Webseite reinballern können.
Style Tag auf, CSS reingeschrieben, Style Tag zu, zack, Boom, fertig.
Ja, was mir dazu irgendwie wieder einfällt, ist, dass es mal eine Zeit lang, ich glaube, es gibt gar nicht mehr so eine Art Scoping gab da drauf.
Ist das richtig, dass man das Attribut Scope mit festlegen konnte Und dann hat das nur sozusagen das Style-Element nur in dem Kontext gewirkt, in dem das Style-Element auch inkludiert war.
Das kommt ja jetzt wieder, wenn ich richtig informiert bin. Aha, spannend. Was heißt das genau, das kommt wieder?
Das weiß ich nicht. Ich habe wahrscheinlich mir das irgendwo mal angeschaut, festgestellt, das geht nirgendwo. Und dann habe ich das wahrscheinlich wieder ad acta gelegt.
Okay, aber der... Scope-Pseudoklasse, bla bla bla, Browser-Unterstützung geht in allen, okay.
[10:47] Also das Scope-Attribut, also das hat so funktioniert, wie Hans das gerade gesagt hat.
Und das ist aber jetzt in die Add-Scope-Rule hineingewandert.
Also die macht das jetzt.
Das heißt, du kannst theoretisch, also im Grunde kannst du mit Add-Scoping oder Add-Scope, kannst du sagen, all die Regeln, die ich jetzt quasi in das Add-Scope hineinstecke, Die sollen eben gescoped sein auf das Element, was bei der AdScope-Regel oder der Selektor, der da benannt wird.
[11:23] Aha, das heißt, ich schreibe praktisch AdScope und dann mache ich einen Selektor.
Und alles, was innerhalb dieses Selectors ist, da gilt dann sozusagen alles in der Kaskade unten drunter, was ich dann definiere.
Genau. Und du kannst, also das könntest du dann aber eben auch ganz woanders hinsetzen. Also du könntest das zum Beispiel in deinen globalen Style Sheet setzen.
Das ging ja beim Scope Attribut nicht. Das hat ja quasi nur damals eingewirkt auf den DOM Tree, in dem es selber saß und konnte dann eben nicht nach oben arbeiten.
Und mit AdScope kannst du das eben tun. Du kannst bei Scope auch ein Ende definieren.
Das heißt also, das nennt sich dann Donut-Scope.
Das heißt also, dass du sagst, du hast vielleicht so was wie Tab-Container und du willst aber dann das, was da drin ist, wiederum nicht erfassen mit deinen Styles.
Dann kannst du sagen, das fängt an beim Tab-Container-Wrapper und endet aber quasi bei den Tabs selber.
Und alles dazwischen wird gestylt und erfasst von meinem Style-Sheet.
Aber eben dann wiederum nicht mehr die Sachen, die da drin sind.
Also das ist dann quasi ein Vorteil gegenüber dem Scope-Attribut, was es nicht konnte.
[12:35] Ja, megacool. Du kannst auch das Style-Element eben mit so einer Add-Scope-Regel ohne Selektor, wenn ich mich nicht täusche, verwenden.
Und dann funktioniert das genauso, wie du gerade gesagt hast.
Also dann gilt das eben für den DOM-Tree, wo es drin steckt, abwärts.
[12:58] Das ist mega spannend, also weil genau dieses Style-Leaking, was damit halt verhindert wird, du kümmerst dich praktisch beim Styling wirklich nur um das Element oder die Elemente, für die du sozusagen auch die Rechte hast, in Anführungsstrichen, dich drum zu kümmern.
Aber so ein Beispiel wie so eine Tab-Area oder ähnliches, gerade wenn man jetzt mal Microfrontend sich anguckt oder ähnliches, da hat man ja immer das Thema, okay, man muss halt spezielle Regeln festlegen dafür, dass etwas halt dann auch in dem richtigen Scope die Klassen bekommt und so weiter und so fort.
Das ist damit ja ein Stück weit einfacher diesem Problem zu begegnen.
Ja, ich meine, man könnte ja genauso gut einfach den Tab-Container mit Shadowdom basteln und dann den Content einfach in einen entsprechenden Slot rein projizieren, dann wird er ja auch nicht von den Styles als im Shadow-Tree groß belästigt.
Ja, ich glaube, dass die Idee eben ist, dass man vielleicht eben eine Lösung hat, wo man nicht zu schweren Geschützen wie dem Shadow-Dom greifen muss.
[14:03] Ja, das ist so die Idee. Was mir halt eben daran fehlt, ist irgendwie so den Austausch vom Default, dass ich also irgendwie sagen kann, wenn ich hier in meine Webseite ein Style-Element reinschreibe, dann meine ich zum Beispiel, dass es halt immer in diesem Scope-Attribut-like, Stil arbeitet, also immer nur sein Parent-Element halt eben stylt und halt nicht irgendwie was anderes.
Dass man da halt immer das dann da jetzt reinschreiben muss, dass das sozusagen ein Opt-in sein muss, finde ich ein bisschen lässig, dass es da keinen generalisierten wie gesagt Konfiguration quasi gibt, dass ich sagen kann, bei mir gilt halt eben dieses Verhalten grundsätzlich.
[14:41] Das ist wahrscheinlich schwierig mit der der Backwards-Compatibility, da müsste man sozusagen ja global für eine Website festlegen, hier, wir shiften praktisch in einen anderen Modus.
Nö, man könnte ja auch erlauben, dass man das Style-Element erweitert, auch so Web-Component-mäßig Style, und dass man dann da drin irgendwie über Element-In-Tunnels sagen kann, bei dir gelten andere Regeln.
Das gab es ja früher. Früher gab es ja dieses Is-Attribut, was man auf alle möglichen Elemente draufklatschen konnte, dann konnte man ja so den den Type Extend mit irgendwelchem extra Behavior, ohne so dessen grundsätzliches Aussehen oder Struktur zu verändern.
[15:20] Aber das gibt es ja nicht mehr oder jemals. Da erinnere ich mich jetzt nicht dran.
Nee, das hat auch in Safari nie funktioniert, deswegen war das nie groß ausgerollt.
Das gab es halt in Chrome und ich glaube, das war es dann auch.
Ich glaube schon, ja. Also was ich halt persönlich mache, wenn ich dieses Verhalten haben möchte, so Style per Default gescoped, ich hole halt die ganz, ganz, ganz, ganz, ganz schweren Geschütze raus und die heißen halt dann eben Shadowdom und dann Style-Element in den Shadow-Dom reinklonen und aus der eigentlichen Webseite entfernen, was den genau gleichen Effekt hat, aber halt wirklich super, super brutal ist.
Aber so brauche ich halt zum Beispiel meine Slides, wenn die irgendwie so extra Styling haben.
Dann sage ich halt eben so, Styles werden halt nicht einfach rein projiziert in so einen Slot, sondern dann wird halt tatsächlich geklont und gelöscht, was halt super Banane ist, aber geht nicht anders.
[16:12] Ich meine, mittlerweile ist ja auch ganz viel, dass man halt HTML über JavaScript generiert und dann auch die Styles entsprechend darüber generiert, und irgendwelche Bildtools, die im Hintergrund deines Styles sowieso scopen und du dann praktisch innerhalb eines JavaScript-Modules halt dein CSS-Modul mitlädst oder ähnliches.
Ja, in dem Szenario hast du ja eh kein Problem, weil du ja die Welt von Grund auf neu aufbaust. Dann ist ja alles toll.
Aber wenn du das machen willst, was ich will, nämlich HTML schreiben, aber nach meinen eigenen Regeln, dann bist du am Arsch.
Ja, nee, also der Punkt, auf den ich hinaus wollte, ist halt, vielleicht ist es gar nicht so applicable für viele Use Cases, weil halt viele Leute das mittlerweile, das Problem anders angehen.
Aber natürlich hast du recht, wenn man halt in diesem Use Case unterwegs ist.
[16:59] Dann ist es logisch, dass man da auch eine Lösung braucht.
Und vielleicht lohnt es sich dann aber auch halt nochmal sich zu überlegen, ist nicht das Shadow DOM doch der richtige Weg?
Oder hilft jetzt die AddScope-Rule in Zukunft? Ähm, ja.
[17:43] Oder, was heißt andere, sollten wir nicht irgendwie vom Style-Element nochmal was erwähnen, was so die Attributliste anbelangt?
Also ich habe ja das Style-Attribut auch gerne mal für ein Print-Style-Sheet genutzt in der Vergangenheit.
Weiß jetzt nicht, wie viel Print-Optimierung ihr noch für die Webseiten macht, aber vielleicht gibt es ja auch noch, anderes Interessantes. Naja, ich finde es halt eben schön, dass so Style-Elemente Style-Sheets beinhalten und die können können deaktiviert sein, aber die kannst du halt nicht deaktivieren per irgendeinem Attribut, sondern da musst du dann wieder mit JavaScript rumfriemeln und die auf Disabled setzen.
Und die sind auch nicht ohne weiteres zu klonen, was ganz schade ist, weil du hast ja heutzutage auch Constructable Style Sheets, wo du im Prinzip sagen kannst, ich mache jetzt hier einen mit New CSS Style Sheet und dann kannst du den wieder in deine Web Component einfach so rein deklarieren und dann sharen die Style Sheet Instanzen, wenn du davon mehrere Instanzen hast und das wäre alles super effizient, aber sämtliche APIs da drumherum sind so unglaublich unbequem.
Es könnte alles sehr viel einfacher sein, wenn es wirklich die Möglichkeit gäbe, das zu machen, was ich jetzt gerade gesagt habe, was keiner implementieren sollte, nämlich eine Möglichkeit, das Style-Element zu hacken, mithilfe von Customized Build-Ins oder was auch immer.
[18:54] Aber es geht. Das ist ja die wichtige Info. Ja. Ja, ich habe noch mal eine Frage.
Vielleicht wisst ihr das ja auch. Es gab ja mal dieses Type Attribut.
Das kennt man auch ansonsten noch so von den Link Elementen oder so.
Das mittlerweile deprecated auch auf dem Style, wo man dann Text slash CSS als sozusagen Mime Type angegeben hat.
Warum gab es das? Das war einfach angedacht. Vielleicht kann man in der Zukunft noch mal mit anderen Typen Styles vergeben. Oder gab es das mal?
Ich glaube, nicht wirklich implementiert. Aber ich meine, versetzt dich in die Lage zurück.
Du willst jetzt CSS da rein implementieren und alle anderen sagen, nee, nimm aber meinen Style-Sheet-Entwurf, der viel besser ist, aber komplett anders, komplett inkompatibel.
Und dann musst du dich halt für einen entscheiden als erstes.
Und was sagst du dann natürlich?
Ja, aber keine Sorge, Leute, wir machen da ein Time-Attribut rein.
Das heißt, wenn in Zukunft eure Idee sich als die bessere herausstellt, dann haben wir da eine Möglichkeit, was anderes noch reinzubauen.
[19:54] Siehe ja auch JavaScript. Da gab es ja irgendwie mal schon eine Zeit lang irgendwie Visual Basic im Internet Explorer. Ja, stimmt.
Da hat das Type-Attribut ja Sinn gemacht. Genau.
Ja, also für die Überzeugungsarbeit und um sich das in Zukunft offen zu halten, ist das auf jeden Fall ein guter Weg gewesen.
Ich habe es nur irgendwie noch nie halt gesehen, dass es was anderes gab.
Naja, haben wir das auch geklärt.
Noch eine spannende Eigenschaft oder ähnliches, was ihr gerne noch zum Style-Element erwähnen wollen würdet?
[20:31] Naja, vielleicht noch einfach, weil es Upcoming ist, es gibt so ein globales Attribut, Blocking, das so gerade in der Mache ist, das noch so ein bisschen experimentell ist, dass man eben auch darauf liegen kann mit dem man bestimmte Elemente, markieren kann und sagen kann, dass sie zum Beispiel also momentan kann man bei Blocking nur Render reinschreiben, also dass man eben sagt hey, dieses in dem Fall dieses Style-Element wenn, das ist Render-Blocking also wenn zum Beispiel da Add-Import Sachen drin sind, dann sollen die quasi erstmal alle importiert und aufgelöst werden und dann.
[21:17] Genau, dann wird das Ganze, die Seite erst gerendert, wobei ich den Eindruck, also ich würde jetzt aus dem Bauch aus sagen, dass das sowieso so wäre Oder ist Add-Import asynchron? Ich weiß es nicht.
[21:30] Und die Idee da ist eben, zum Beispiel, wenn du diese View-Transitions machst, die es bald gibt, die sollen ja auch als Multi-Page-Application-Transitions dann funktionieren.
Das heißt, du gehst von Seite A zu Seite B und dann kannst du auf beiden Seiten auch per CSS Bereiche markieren, die ineinander quasi überblenden sollen.
Sodass du quasi so eine smoothe Navigation hast.
Und das Problem da ist, dass die Browser-Seiten eben progressiv rendern.
Und das möchtest du halt bei so einer Überblendung eben nicht.
Also da willst du eigentlich erst, du willst in das Fertige überblenden und nicht in irgendwas, das gerade im Aufbau befindlich ist.
Genau, und da geht man dann jetzt hin und macht eigentlich was, was ein totales Anti-Pattern ist, weil wir ja alle gelernt haben, progressiv rendern, non-blocking, asynchronen, so möglichst schnell Dinge auf den Schirm kriegen.
Und hier blockiert man das Rendern eben.
Also man hält halt länger die weiße Seite, um dann was Fertiges zu haben, in das man überblenden kann.
Moment, das verstehe ich jetzt nicht. Das Blocking-Attribut ist auf dem Style-Element.
Und das löst ein Problem in den View-Transitions.
[22:49] Also das ist zumindest einer der Gründe, warum es überhaupt dieses Blocking-Attribut gibt.
Also ist ja immer so, wir lösen Probleme, wir haben neue Probleme.
Wir haben View-Transitions, geil. Oh shit, wir haben neue Probleme.
Ja, ich meine, bei View-Transitions könnten ja auch tatsächlich nicht funktionieren.
Jetzt irgendwie nicht so wegen JavaScript-Effekt oder so was, sondern auch einfach hier Reduced Motion.
Wenn ich irgendwie so das in meinem System aktiviere, würde ich ja auch sagen wollen, ich will auch keine View-Transitions haben.
Und dann krabbe ich keine View-Transitions, aber weil ja sozusagen das Blocking-Verhalten, losgekoppelt ist von den View-Transitions, sondern einfach dann so auf alle Style-Elemente geballert ist unter der Annahme, das würde halt eben View-Transitions geben, dann habe ich am Ende irgendwie langsam ladendere Seiten für einen Effekt, den ich nicht sehe und nicht sehen möchte, das wäre doch Banane.
Ja, und das wäre auch Banane. Ja. Ich bin da auch noch nicht, also hier, wir gucken noch mal da, hier Chrome-Plattform-Status und dann kommen wir da Firefox, no signal. Safari, no signal.
Web-Developers, positive.
[23:58] So, wo ist denn hier der Explainer? Also ich habe die Abstimmung nicht gesehen, wo man dafür positiv abstimmen kann.
Ja. Wahrscheinlich warst du da gerade im Urlaub an dem Tag. Das wird sein. Ja.
Okay, pass auf, hier ist der Explainer dazu.
Okay, Use Cases.
Block rendering on critical web fonts to prevent layout shifting or a flash of unstyled text.
Okay. Gut, kann man machen.
Block rendering on script inserted stylesheets or scripts.
This prevents flash of unstyled content e.g.
The page uses a loader script to load the actual business stylesheets.
Und das löst ja auch nur ein Problem, wenn da irgendwas nachgeladen wird, was tatsächlich asynchron wäre, sprich Imports, wenn sie asynchron wären, und irgendwelche Bilder.
[25:02] Also mir scheint halt der Hebel für, verhalte dich jetzt so oder so, einfach an der komplett falschen Stelle angebaut zu sein.
Ja, also hier ist noch so ein Use Case, den ich so ein bisschen besser nachvollziehen kann.
Wenn du es auf ein asynch, also ein asynchrones Script drauflegst, dann also stell dir vor, so A-B-Testing-Tools, dann könntest du quasi quasi die Non-Blocking laden.
Und dennoch würde die Seite noch nicht gerendert.
Also im Untergrund wird schon alles gemacht und getan, aber es wird halt noch nichts dargestellt.
Das heißt also, der eigentlich die Verarbeitung ist, wird nicht mehr ausgebremst.
Aber das Rendern, das passiert eben erst, wenn dieses asynchrone Skript ausgeführt ist.
Also man blockiert nicht den HTML-Parser, sondern man sagt bloß Renderer, warte noch einen Moment.
Ja, genau. Okay, das macht Sinn.
Und Request-Animation-Frame wird dann nicht gefeuert? Ja, genau.
[26:09] Ja, also ich bin, weiß jetzt, ich bin da auch ein bisschen sagen wir mal underwhelmed von dem Ding, aber ja.
Vielleicht werden wir ja in Zukunft noch ein bisschen mehr sehen, wie das unser Web Engineering positiv beeinflussen kann oder vielleicht gibt es auch nochmal eine ein oder andere, Änderung und dann haben wir nochmal eine Spezialsendung, vielleicht eine mit einer 6 vorne oder 600 irgendwas.
Eine Brennpunktsendung machen wir dann. Eine Brennpunktsendung zum Thema Page Transitions oder Blocking Blocking Renderen. Die Vorteile von Blocking Renderen.
Dann werfen wir das asynchrone Horn weg. Blasen nur noch in das blockierende Renderhorn. Ja.
Und am Ende machen wir einen Wettbewerb, wer am meisten blockieren kann und die Webseite am langsamsten laden.
Ja. Aber dazu mehr im nächsten Jahr.
[27:08] Darkhouse und so. Ja, nicht schlecht.
[27:13] Alright, aber bis dahin können wir uns ja dann doch nochmal, vielleicht auch nochmal mit was anderem beschäftigen vielleicht finden wir ja auch noch was in unserer schönen ja, in unserer schönen Bibliothek, genau, ich würde einfach mal den Button jetzt
SVG Text Positioning (dy)
[27:28] mal selber, mich mal einmoderieren und selber einmal den Button drücken Zieh mal einfach aus dem Schrank Ja, und das, ich sag mal Ach du Schande, Also schaffe, dass die dass die zwei jetzt hier, die zwei zwei Sachen, die wir bisher hatten, ja doch schon sehr, also das war ja was für ein Mainstream sozusagen.
Haben wir jetzt hier eine spezielle API und man wird es nicht glauben, die ist nicht mal verlinkt bei uns.
Das ist die SVG Text Positioning Element API.
Wer kennt sie nicht? Und darin geht es um das DY, Die DY-Eigenschaft. Und da habe ich jetzt mal hier die Seite zu geöffnet und festgestellt, boah, Leute, ich habe davon keine Ahnung.
Ich kann dir das sagen, wenn du das noch nie gesehen hast, ist das auch richtig.
Das ist ein Implementierungsdetail. Das ist eine Basisklasse in Anführungszeichen.
Also so ein Grundinterface. Und das wird halt von dem erben, so Sachen wie das SVG-Textelement.
Also die Dinger, mit denen du wirklich Text in dein SVG rinderst und ein paar andere erben von dem, damit sie halt so Features haben wie eine XY-Position und so. Das ist wirklich nur eine reine Basisklasse.
[28:41] Ja, also anscheinend kann man damit irgendwas in SVG machen, aber ich weiß nicht genau, ob wir das erklären müssen.
Du kannst Text rendern. Also ist ja irgendwie jetzt nicht so beknackt, dass du sagst hier, jo, mach ein Textelement in SVG rein und dann hier so Position, Koordinaten, zack, bumm, hast du Text.
Ja gut, das erklärt sich von selbst, dass man das braucht in einem SVG.
Aber halt diese Basisklasse jetzt hier mit Text-Positioning-Element und darauf die Eigenschaft dy, die das dy-Attribute, was ist denn dy?
Also y ist die y-Koordinate, okay, aber die d-Sache, was bedeutet das?
Warte mal, das haben wir gleich. dy ist Indicates a shift along the y-Axis.
[29:32] Ich glaube, das ist relativ zu einem anderen. Genau.
Ja. Okay. Ich erinnere mich.
Genau. Also ich habe das benutzt, weil, wir veranstalten hier in der örtlichen Grundschule einmal im Jahr so einen Trödelmarkt und ich habe das, ich musste das Standlayout machen und habe ich mir so schön auf Google Maps so quasi die Grafik geholt von oben, das Satellitenbild, und dann hätte ich in irgendein Programm reingehen können, wie, hier, was weiß ich, irgendein Vektorgrafikprogramm, und hätte das draufsetzen können, aber dann hätte ich auch per Hand alles rumschubsen müssen und ich hab mir gedacht, nee, ich hab ja meine Anmeldungen, die übrigens alle auf Tito sind, ich exportiere mir die, und dann fütter ich die eben ein und generiere diese ganzen Stände daraus automatisch und die Reihen und das hab ich halt mit SVG gemacht.
[30:35] Und da hab ich dann eben im Prinzip per Hand das DOM für das SVG geknetet.
Und da hab ich auch dieses DY benutzt, um da ...
Also, du hast diese Textelemente, und dann kannst du in die ...
Das ist ein bisschen schwieriger in SVG, da hast du ja keine automatischen Umbrüche und so Zeug, das ist ein bisschen doof.
Und dann steckst du da quasi, um das noch mal zu unterteilen, T-Span-Elemente rein.
Und da kannst du dann dieses dy-Attribut zum Beispiel nehmen, um zu sagen, jedes weitere T-Spender, das ich da reintue, soll bitte einfach um folgenden Abstand weiter nach unten gegenüber dem vorherigen sein.
Genau, und das war dann irgendwie ganz cool, da musste ich die nicht irgendwie alle einzeln mit Werten platzieren.
Das macht Sinn. Ja, dass man halt sozusagen als Referenz zu dem, was man schon, also es gibt eine Initialposition und ab dem Stand zum nächsten Element, wenn das auch immer ans Ende der Zeile kommt oder von der Höhe her, dass du nicht…, anderthalb mal die Höhe des Elements berechnen musst und dann eine absolute Pixelzahl da reingeben musst, einfach zu sagen, okay.
[31:49] Fünf Pixel weiter unten zum vorhergehenden oder sowas. Genau.
Verstehe. Gibt es dann dieses DY-Attribut denn auch auf, wisst ihr das zufällig, anderen Elementen jetzt nicht nur Text, sondern sagt man mal auch mal einen Kreis oder ähnliches?
Ich glaube nicht, weil da hast du das Problem ja nicht so sehr.
Du musst ja, wie gesagt, in CSS deine Zeilennummern selber managen.
Und dann ist ja wirklich sozusagen dieses Verschieben um einen relativen Anteil relevant.
Wohingegen du ja beim Kreis einfach sagen kannst, ich habe ja mein Koordinatensystem und ich weiß, wo ich sein muss. Mehr oder minder.
[32:28] Genau, und wie man ja auch sieht, kommt das hier aus der SVG Text Positioning Element API.
Ja, genau. Genau. Die ist halt, wie gesagt, die Basisklasse für diesen ganzen SVG-Text-Kampel.
Hier, ich habe jetzt auch die Seite gefunden bei MDN. Die Y shifts the Textposition vertically from a previous Textelement.
[32:52] Das ist halt ein bisschen ungewohnt für so unser einen, weil man es vielleicht eher gewohnt ist, so Überlegungen in CSS irgendwie zu formulieren.
Aber es ist halt alles hier Attribute und Zeug und deswegen sehr, sehr gewöhnungsbedürftig.
Ich habe ja auch bei MDN gerade gelesen, die Y kann man auf FE Drop Shadow, FE Offset, Cliff Ref, Text, T Ref und T Span verwenden.
Genau. Und die letzten drei sind die, die von dem Interface erben, das wir da gerade hatten.
Und die anderen sind unrelated, aber da heißt es halt eben genau gleich. Ja.
Nur der Vollständigkeit halber. Ja. Ja.
All right. Ich will für die Vollständigkeit halber noch eins sagen.
Also nur, falls irgendwer da draußen einen Use Case hat, wo man sich so denkt, keine Ahnung, ich will irgendwie ein SVG erzeugen und dann da irgendwie ein Screenshot von machen, damit da eine Rastergrafik rauskommt.
Und man will halt mit SVG machen, aber man kann irgendwie schon HTML und CSS und Zeug.
Ich will nur sagen, man kann das halt eben auch wunderbar mit HTML und CSS machen.
Das verhält sich in erster Näherung ziemlich vektorisch.
Man kann ja mit relativen Größen arbeiten, mit Prozenten und was nicht allem.
Und wenn man am Ende einfach nur der Rastergrafik daraus screenshotten möchte, ist wirklich eine HTML-Seite und ein bisschen CSS und ein Papetier das Einfachste, was man da machen kann.
[34:12] Mhm. Ja, stimmt. Will ich nur mal erwähnen, nachdem ich irgendwann mal für genau den Use Case irgendwie Monate damit verbrannt habe, mich wirklich in CSS reinzubeißen, bis ich irgendwann gesagt habe, fuck it, mit CSS und HTML wäre ich schon längst fertig geworden. Oh wait, ich kann ja schon längst fertig sein.
Und dann war ich halt drei Stunden später auch fertig. In SVG hast du dich eingegraben, ne?
Genau. Du kannst ja auch hier in den Browsern, kannst du glaube ich in allen ja mittlerweile auch in dem Element-Panel, Element rechts klicken oder Kontextmenü klicken und ein Screenshot von der Note machen. Das geht ja auch.
Das heißt, du brauchst doch nicht mal dir ein Puppet hier hochfahren.
Das stimmt. Es sei denn, du willst das irgendwie in industriellen Maßstab machen und zack, zack, zack, zack, zack. Ja. 9000 Frames haben oder so.
Das würde ich doch nie wollen. Pro Sekunde.
[35:01] Ich würde vorschlagen, wir gehen weiter zu unserer nächsten Eigenschaft.
Und Shep, da wäre es wieder dein Turn. Burn. Ich klicke. Nochmal drauf zu klicken. Uh.
Wollen wir mal so tun, als wäre das nicht passiert? Schmackhaft.
Genau, also wir machen das jetzt glaube ich nicht. Wir können es ja kurz sagen, es geht, wir sind jetzt im Prinzip in einer ähnlichen Ecke.
SVG FE Drop Shadow Element und ich glaube mit X kannst du wahrscheinlich dann einstellen, wie weit der Drop Shadow in der X-Achse geht. Ah, spannend.
Ja, so mittelspannt, ich drücke einfach mal.
[35:42] SVG-Filter an sich sind schon super spannend, aber nicht das.
Aber auch harte Braintwister. Aber SVG ist eh so eine komplett andere Welt.
Also da muss man echt erst mal klarkommen da drin.
Ja, genau. Oder was ich gerade gesagt habe. Man lässt es halt bleiben und sagt einfach, Webseite, CSS, passt schon.
Ja, da drei Monate einarbeiten. Also ich benutze SVG schon immer mal wieder ganz gerne, weil es halt ein paar Dinge kann, die HTML und CSS eben nicht können.
Und zum Beispiel kannst du damit so eine Art im Grunde so Sperrtext machen oder du kannst halt Text machen, der mitwächst, also mit der Breite von, also erstmal generell natürlich, wenn das SVG größer und kleiner wird, aber du kannst eben auch Text einpassen in die verfügbare Breite.
Und wenn das halt viel Text ist, dann werden die Buchstaben eben so ein bisschen gedrungen und wenn du wenig Buchstaben hast, dann werden die halt sehr so fett und du kannst eben dann auch das Letterspacing auch erhöhen, wenn du möchtest. Also so Sachen, das geht halt...
[36:51] Eben noch nicht in CSS. Nee, das ist richtig, aber du hast es halt sehr viel einfacher, SVG dann in die Webwelt reinzubringen, statt umgekehrt.
Also erst mal so, die Abdeckung ist relativ groß von dem, was du halt mit HTML und CSS machen kannst. Und dann nimmst du halt noch ein bisschen SVG, um das so on top zu streuseln. Hatte ich bei meinem Use Case genauso.
Da war halt der Use Case, ich brauchte so ein paar Grafiken, im Prinzip bloß so Waveforms, und die waren halt parametrisiert.
Und die habe ich tatsächlich einfach dann generiert als SVG.
Und dann konnte ich die in CSS als Background-Image einfach referenzieren anhand ihrer ID.
Und dann, zack, bumm, hatte ich dann beides. Aber halt eben 99% waren HTML und CSS. Ja.
[37:31] Okay. Na, jetzt sind wir bei Border-Top-Style
Border-top-style
[37:33] gelandet. Ja, bei Borders allgemein, würde ich sagen, oder?
Von mir aus auch da, ja. Tja, Border-Top-Style, ich weiß gar nicht.
Ich kann nur sagen, ich benutze halt Border-Style-None oder Solid und nichts anderes.
Weiß nicht, wie es euch geht. Nicht manchmal für so Fokus-Styles.
Also der Standard-Fokus-Style ist ja so diese leicht gedottete Outline.
Ja, aber auch nicht in allen Browsern.
Das ist ja nur glaube ich Internet Explorer gewesen damals, oder?
Okay. Ist das anders? Also keine Ahnung. Jedenfalls manchmal gönne ich mir halt tatsächlich eine dotted Outline für Fokus-Styles, wenn es halt irgendwie dann deutlich genug noch ist.
Ja, oder halt Dash. Ich glaube, ich wäre mehr so der Dash-Mensch.
Ja, die haben nicht immer so richtig schöne, die schließen nicht immer so richtig schön, weißt du?
Doch, das ist da irgendwie ein bisschen nicer. Ist halt relevant dann, wenn du deinen Text irgendwie einen Meter groß an die Leinwand wirfst und sonst vielleicht eher nicht so.
Aber das passiert halt bei mir hin und wieder mal und deswegen bin ich da eher bei Dodged, muss ich sagen.
[38:38] Ja, ich muss aber auch sagen, also die prozentuale Anwendung von etwas anderem als Border, Non und Solid als die beiden Styles ist sehr, sehr wenig bei mir gewesen in der Vergangenheit.
[38:57] Ich weiß nicht, und dann explizit Top-Style festzulegen, macht man dann doch irgendwie nicht so häufig.
Ich glaube, eine Sache, wo ich das vielleicht noch irgendwie jetzt gerade im Kopf habe, ich weiß aber nicht, ob ich da Top auch immer mit reingenommen hatte, das war dann, oder halt Top-Left oder Top-Right oder wie auch immer das war, wenn man mal zum Beispiel so ein Dreieck machen wollte an so einer Bubble oder etwas, Tooltip.
Ja, man baut einen Tooltip und möchte da dran, der ist so eine Bubble und man möchte da so eine kleine Ecke haben, damit die da hin zeigt auf den Text, den man gerade angeklickt hat oder so.
Da gab es ja diesen Trick, dass man dann mit den Bordern dann Before oder After Pseudo-Element stylen konnte entsprechend.
Dementsprechend, da hat man das vielleicht mal verwendet, wenn man da eine Sache in Top oder in Bottom, wie auch immer, halt auf Null setzen musste und der Rest war halt dann die Größe, die man es haben wollte, in Pixeln ausgedrückt.
Ich hoffe, ihr erinnert euch noch an den Trick. Ich weiß nicht, ob man das heute auch noch so macht.
Naja, ich habe ein schönes Tutorial für die Shownotes rausgegraben von html-seminar.de.
[40:04] CSS-Dreieck ohne Grafiken über CSS. Haben die denn auch erklärt, wie man dann quasi einen Schatten haben kann, der um das quasi die Bubble und den Pfeil rumgeht und nicht irgendwie nur um die Bubble und auf den Pfeil dann einen Schatten wirft?
Wir hier bei html-seminar.de kümmern uns nicht um solche randständigen Use Cases.
Wir erklären die Basics und zwar so, dass man es auch versteht.
[40:32] Sehr gut. Aber du kannst es ja erzählen. Dann haben wir das geklärt. Erzähl.
Ja, einfach, genau, also CSS-Filter-Effekt, also der Drop Shadow aus den CSS-Filtern, der arbeitet da eben wie alle anderen Filter-Effekte auf die sichtbaren Pixel eines Elements.
Das heißt also, wenn du jetzt zum Beispiel... Also du musst erst mal sagen, was der normale Filter machen würde.
Also die Eigenschaft Box-Shadow, die nimmt sozusagen nur das Element selber und guckt nicht auf, was hat das für Kind-Elemente, die vielleicht noch raushagen und so, nimmt nur das Element selber und lässt das in Schatten werfen.
Auch wenn das vielleicht auch innen drin transparent ist oder so, dann wirft das eben als gesamte Box trotzdem im Schatten.
Und bei den Filtern, die gucken halt, okay, gibt es irgendwelche Kind-Elemente, die in diesem Element drin sind, die links und rechts irgendwie an den Rändern rausgucken, dann werde ich die auch berücksichtigen.
Oder hat das Element innen drin vielleicht transparente Bestandteile?
Vielleicht, sagen wir mal so, stell dir ein Spossenfenster vor, dann würde eben der Schatten auch diese Form im Prinzip nachempfinden.
[41:53] Ja. Weil es ist ja quasi ein SVG-Filter, ne?
Es ist im Grunde ein SVG-Filter, genau, der nach in die CSS-Welt rübergeholt wurde.
Und letztlich ist ja diese Drop Shadow-Funktion, die man da hat, nichts anderes als ein.
[42:11] Ja, sagen wir mal, ein syntaktischer Zucker für diese CSS-Filter.
Also man kann theoretisch auch CSS-Filter definieren im HTML und aus dem CSS mit der Filtereigenschaft heraus auf diesen Filter verweisen, per ID zum Beispiel. Und das würde auch gehen.
Genau. Und da kann man dann sehr abgefahrenes Zeug machen, wenn man wirklich so einen komplexen SVG-Filter sich bastelt oder sich möglicherweise einfach copy-pastet.
Dann kann man tatsächlich irgendwie so Turbulenz und Verwerfung und was nicht alles, Reflexion und das dann einfach so in seinen CSS reinpacken und auf seine ganz normalen HTML-Konstruktionen anwenden, was eigentlich ganz cool ist.
SVG ist halt doch für einiges ganz gut zu gebrauchen.
Wir kommen heute nicht mehr drum rum. Also SVG ist hier das, was sich durch die Sendung zieht, glaube ich.
Ich hoffe auch, dass wir dann in der nächsten Eigenschaft, die wir jetzt hoffentlich aufrufen, dann auch wieder einen Link dazu herstellen können.
Oder vielleicht können wir auch nochmal auf die Internals von SVG eingehen.
Ich meine, sie interessieren halt auch brennend.
CSS‘ <position>-Datentyp
[43:20] Okay, soll ich mal draufdrücken? Hit it away. Okay, ich hab mal draufgedrückt und es kommt raus. Oh.
Der CSS-Typ Position. Okay, das ist ein eigener Typ, sieh an.
[43:34] Aber gut, macht ja Sinn. So diese Angaben von wegen hier Top Left 50%, 50%.
Diese tatsächliche Angabe von ja zwei Koordinaten letztlich von XY kommend ist ein eigener CSS-Datentyp, so wie eine Color oder eine Breite oder was nicht alles, macht ja irgendwo auch Sinn.
War mir jetzt nicht so klar, aber ergibt sich ja eigentlich logisch schon woher.
Ja, ich hätte das auch eher als einfache Number gesehen.
Aber... Das hat ja Einheiten, es müsste also schon eine Length sein.
Oder eine Length, okay. Das sind ja zwei. Genau.
Wie meinst du, es sind ja zwei? Es ist ja ein zweistelliges Tuppel-X-Y-Koordinator und nicht nur eine Länge. So wie eine Breite.
Kann man nicht sogar noch mehr angeben? Also als nur zwei?
[44:29] Doch, kannst du schon. Du kannst mittlerweile, glaube ich, vier angeben.
Und dann, dann, dann. Beziehungsweise, nee, du kannst nicht vier angeben.
Doch, du kannst auch vier angeben. Oder? Lass mal gucken. Sehe ich gerade, ja.
Ja, genau. Aber dann, das sind aber dann nicht vier Werte, sondern du Präfix, die dann, dann kannst du nämlich sowas sagen wie, also traditionell war es ja immer so, dass der erste Wert ist X von links und der zweite ist Y von oben.
Und wenn du jetzt irgendwas aber unten rechts positionieren wolltest, dann war das für dich einfach ein bisschen Arbeit, vielleicht auch teilweise gar nicht so einfach möglich, weil dieses Position-Ding ja auch so eine ganz spezielle Eigenschaft hat, die wir gleich noch besprechen können, aber du kannst dann jetzt eben sagen, hey, Bottom so und so viel und dann Right so und so viel und dann ist eben die Referenz unten rechts und nicht oben links mehr.
Es ist, als würdest du absolute Positionierung verwenden, wo du ja auch entweder sagen kannst, Top so und so viel, Left so und so viel oder du kannst ja sagen, Bottom so und so viel, Right so und so viel und das kannst du halt jetzt eben auch in diese CSS-Syntax einer Koordinate einbauen für die Position deines Hintergrundbildes.
[45:41] Und es war Opera, die das zum ersten Mal hatten, weiß ich noch. Gott hab sie selig.
Hey, die gibt's noch, nur nicht mehr in, ja. Nur nicht mehr mit eigener Engine, ja. Also, ja.
Hey, wir sagen ja immer noch, der Edge existiert noch. Also, dann existiert Opera auch noch.
[46:00] Was ich noch sagen wollte ist, also weswegen das vielleicht ein eigener Datentyp ist, ist, dass wenn du mit diesem Wert ja nicht nur sagst, wie in einem Container das positioniert werden soll, sondern du verschiebst auch sozusagen den Snap-Point in dem Bild, das du positionierst.
Denn, also sagen wir mal, intuitiv würdest du ja sagen, keine Ahnung, der Punkt ist oben links.
Also wenn du 0,0 machst, dann positionierst du das Bild ja oben links in der Ecke.
Ja. Und dann ist ja der Snap-Point auch oben links in dem Bild.
Ja. Das würde aber umgekehrt bedeuten, dass wenn du 100% X machst, dass von dem Bild ja nichts zu sehen ist.
Also, weil das wäre dann ja, da wäre ja der Ankerpunkt in dem Bild ja immer noch oben links.
Du würdest das komplett an der rechten Seite des Elements platzieren, das Hintergrundbild, und damit wäre das dann quasi aus dem Sichtfeld raus.
Aber das passiert ja nicht. Also, tatsächlich ist es dann, es funktioniert das ja so, dass das dann rechts angedockt ist, das Bild.
Also, das ist ja weiterhin sichtbar. Das heißt also, dieser Ankerpunkt, der wandert dann in dem Element, das das Hintergrundbild hat, und er wandert aber auch in dem Bild von links nach rechts und von oben nach unten.
Und ich glaube, das ist der Grund, warum das eben eine separate Geschichte ist.
[47:29] Also, damit ist einfach gemeint, Top 100% ist halt nicht das Gleiche wie Bottom 0.
Weil Bottom 0 snappt unten jetzt das Element, was du halt positionieren willst, an.
Und Top 100 drückt das ganze 100% von oben über den Bildschirm nach unten und du würdest es wirklich nicht mehr sehen.
Nee, ich glaube, dass das nicht der Fall ist. Also, warte mal.
Ich mach mal hier einen Code-Pen.
Oh, jetzt wird es spannend. Weil das dachte ich schon, dass du nicht dadurch, dass du halt praktisch etwas nach unten drückst, nur deshalb den Punkt verschiebst.
Wobei, bei 50% 50% tut es das ja schon, also hast du wahrscheinlich recht.
Und nee, nee, ist gar nicht wahr. 50 Prozent, 50 Prozent macht nämlich genau das nicht.
Aber Center macht es schon.
Doch, 50 macht es auch, glaube ich. 50 Prozent macht wirklich die linke obere Ecke in die genaue Mitte des Elements rein. Das kennt man ja von dem alten Hack nochmal.
Doch, deswegen musste man immer Transform noch machen.
Das war der Hack, den du meintest. Weil Transform relativ ist und und die Positionierung halt eine absolute ist.
[48:56] So dachte ich jetzt auch, aber vielleicht ist es auch, also das ist bei Position zumindest so, wenn du dann Top und Left machst, aber ist es auch so, wenn du zum Beispiel jetzt einen Background-Position verwendest?
Also das ist die Frage, genau.
Genau, also hier geht es doch um Backgrounds, nur bei dieser Eigenschaft.
Richtig. Und da ist es nämlich, ich habe ja, ich versuche gerade hier in irgendeinem Bild zu finden, dass ich mal schnell hier bei CodePen reinpacken kann.
Gibt es Place-Kitten nicht mehr? Ja, das gibt's schon.
Da kriegst du wahrscheinlich irgendwie Kors um die Ohren gehauen.
Das ist ja auch aus einer ganz anderen Zeit.
So, Breite mach ich jetzt mal hier. Ich muss hier dem Ding irgendwelche Maße geben. Zack. Höhe 400 Pixel.
So, seh ich da jetzt mal was? Background.
Ich hab hier HTTP Unsplash. Fotos random. Da müsste doch eigentlich ein random Foto kommen, oder nicht?
Aber wahrscheinlich eins, das sieben Megabyte groß ist. Ja, vielleicht einfach eins, das nicht random ist, sondern Bildadresse kopieren.
Also ich gehe davon aus, dass du recht hast, weil ich glaube, Hans und ich sind auf dem Position-Absolute und dann Transform-Hack unterwegs.
Und du hast wahrscheinlich mit dem korrekten Use Case hier in Background-Position recht. Ja.
[50:14] Genau, also ich mache jetzt mal Background-Position 50%, 50% und dann gebe ich dem Div noch ein Border, ein PX-Solid und dann gebe ich euch den Link, Save, einloggen.
Link ist wichtig für die Shownotes. Link ist super wichtig. Damit alle sehen können, wie unrecht wir hatten.
Genau, hier, ich packe das mal rüber.
[50:46] Wobei ich sagen muss, das Bild noch nicht da ist, wo ich es haben möchte.
Aber ich glaube, es könnte an Background-Repeat liegen.
Das ist auch so eine doofe Eigenschaft, die man eigentlich immer abschalten will, oder?
Background-Repeat, ja. Das wird immer nur auf No-Repeat gesetzt.
Na ja, also wenn man manchmal so Hintergrund-Patterns haben möchte oder so was, vielleicht nicht, oder?
Das ist richtig, aber Web 2.0 ist vorbei.
Ach ja, genau. Und ich brauch jetzt natürlich auch noch ...
Background-Size muss ich natürlich auch noch kleiner machen.
Weil sonst ist das Bild eh zu groß. Ha!
So, jetzt mach ich mal hier 100.
So, genau. Jetzt könnt ihr den Pen mal öffnen. Und dann seht ihr, ich hab jetzt auf der X-Achse das Bild auf 100 Prozent platziert.
Und es ist aber sichtbar.
Also, es ist nicht weg, wie es eigentlich bei Position wäre. Ja, das ist richtig.
Ich mache jetzt mal left 100% daraus.
[51:49] Und schon funktioniert es nicht mehr. Wieso das denn? Ich dachte, man kann vier Werte angeben. Ja, aber nicht drei.
Ja, nicht drei. Okay. Aber left müsste dann das Gleiche sein.
Also das ist ja quasi Standard dann.
Ja, ja, aber die Frage, ja, gut, das stimmt natürlich. Da hast du recht.
Das ist aber, also, ich meine, es ist klar, dass es so ist, wie du beschrieben hast.
Ich verstehe aber nicht, Nicht warum, weil es ist ja sozusagen dann ein inkonsistentes Verhalten zu sowas wie Left Top, diese Geschichte, die wir eben meinten.
Genau, aber das ist wahrscheinlich so, dass ich für mich war es immer so, dass es intuitiv richtig war und ich erst irgendwann gemerkt habe, dass irgendwas komisch ist, als ich das mal wirklich an eine bestimmte Position haben wollte.
Weil da habe ich dann gemerkt, ah, okay, Moment, das ist ja nicht nur einfach, dass es quasi die Positionen in diesem Element also betrifft, sondern irgendwie ändert sich auch sozusagen dieser Ankerpunkt oder Fokuspunkt in dem Bild selbst.
Das kann man aber auch gut benutzen, um sowas zu machen, wie in Bildern Fokuspunkte zu setzen.
[53:08] Zum Beispiel, also ich meine, das kann man ja heutzutage auch mit Object-Fit und Object-Position machen, aber bei Object-Fit gibt es ja zum Beispiel nicht die Möglichkeit, da gibt es ja nur, Object-Fit-Contain und Cover, aber wenn du vielleicht das mal nicht machen wolltest, dann ist Background-Position oder Background-Size vielleicht dann spannender.
[53:33] Genau, und du kannst eben dieser Background-Position einen Fokuspunkt oder Object-Position einen guten Fokuspunkt setzen in dem Bild.
Das heißt, wenn man dann beispielsweise möchte, dass wenn ein Gesicht auf dem Bild ist, egal wie groß das Bild ist, dass trotzdem das Gesicht zu sehen ist oder die Nasenspitze an einer bestimmten Stelle ist oder ähnliches.
Ja, sehr spannend auf jeden Fall, dass sich das auch so, also für mich ist es spannend, dass sich das halt so unterschiedlich verhält und dass man eigentlich dieses, genau das, was du sagst, man hat ja schon ewig lange immer diese Position-Eigenschaft.
[54:14] Den Datentyp auch verwendet in sowas wie zum Beispiel Background Position oder Transform Origin.
Aber so richtig darüber im Klaren bin ich mir jetzt erst darüber, dass du das so nochmal erklärt hast.
Ja, ebenso. Also, jetzt ist aber die spannende Frage, ihr Lieben, wie sieht denn das in SVG aus?
Kann man da eigentlich auch auch eine Background-Position festlegen?
Da hast du ja das Konzept Background in der Form gar nicht.
Du hast ja deine Objekte und die platzierst du halt im Koordinatensystem und dann stapelst du sie vielleicht noch und das war's.
Du kannst natürlich auch auf alles CSS draufwerfen, aber dann produzierst du was, was meistens mit den Browsern funktioniert und nicht in normalen Imagebetrachtern.
Ich glaube auch diese, genau, es gibt kein Konzept von Hintergrundbildern in SVG so richtig.
Also ich weiß, dass ich mal irgendwie das Root-Element einfärben wollte.
Und das war gar nicht so, also es ging nicht. Also ich musste dann wirklich ein Rechteck bauen, das die Größe des Root-Elements hat.
Und das konnte ich dann mit einer Fill-Farbe ausstatten.
Ja gut, aber das ist ja auch irgendwie einigermaßen okay, weil das Konzept einer Hintergrundfarbe ist ja im Webbrowser nun das schrägere.
[55:38] Wie kann etwas, was einfach nur existiert, sozusagen, also Root, also das Dokument an sich, eine Farbe annehmen?
Ja, das ist noch nicht mal so ganz das, aber wenn du wirklich eine leere Webseite hast, so wirklich nur ein leerer Body, dann ist ja der Body durch seinen Standard 8 Pixel Margin dann in Summe 16 Pixel hoch. Ja. Und that's it.
Und wenn du dem Body aber, der 16 Pixel hoch ist, eine Hintergrundfarbe gibst, dann wird die ganze Seite diese Hintergrundfarbe annehmen, obwohl das Element, das du stylst, bloß 16 Pixel hoch ist.
Ist das so? Jupp.
[56:19] Also, okay, spannend. Also beim HTML-Element, da verstehe ich, also da war mir das bewusst, beim Body-Element nicht. Ja.
Naja, so ist das mit diesen spannenden Eigenschaften. Ich habe einfach nur versucht, noch mal eine Brücke zu schlagen zur SVG, unserem Lieblingselement des Tages.
Das hatten wir ja auch, also vielleicht können wir die Bombe ja jetzt platzen, Wir haben ja gesagt, nach der 600.
Folge wollen wir uns in einen SVG-Podcast verwandeln.
Das, Shep, ich weiß nicht. Wir wollten das uns eigentlich aufheben, hatten wir vorher abgesprochen. Jetzt habe ich es gespoilert.
Ich bin immer noch der Meinung, dass wir das einfach zu XML absolut generalisieren sollten.
Also nicht nur SVG, sondern auch MathML, XML, XHTML, der ganze Krempel.
Das wäre gut. Ja, genau. Die spaßigen Zeiten sind vorbei, Leute.
Jetzt wird mal hier ein bisschen was gelernt und geackert. Jawohl, Schlips anziehen und einen SVG-Paser, einen HXML-Paser, Gottverdammte-Achs, schreiben.
Ja, wir brauchen mal Working Draft Schlipse. Das wäre mal cool.
Das ist auf jeden Fall irgendwie eine Art von Merch, das kriegst du nicht bei jedem Podcast.
Lass uns das echt mal erforschen. So lila-weiß-gestreifte, weißt du?
Ja, oder lila und das Logo eingestickt. Das Logo muss halt dann so ein Pin sein, weißt du, wo andere ihre Nationalfahne haben, muss bei uns am Revers halt das Logo sein.
[57:45] Ja, also wir freuen uns auf jeden Fall dann auf eure zahlreichen Zuschriften, wie ihr das dann findet.
SVG, wie gesagt, eins der Kernthemen ab 601, aber...
[57:59] Ne, seid jetzt nicht zu aufgeregt und seid entspannt, denn eine Sendung kommt jetzt erstmal noch, die noch normal ist und danach geht es dann mit den coolen Themen los.
CSS‘ <url>-Datentyp
[58:08] Bis dahin würde ich aber einmal nochmal den Button drücken, wenn ihr wollt.
Ja, bitte, sehr gerne. Dann gucken wir uns noch was an.
Genau, und jetzt sind wir schon... Wir haben heute irgendwie den...
Also der Zufall ist halt, wie der Zufall es will.
Und zwar geht es um einen weiteren Typ im CSS. Und diesmal geht es um eine URL.
[58:26] Ja, eine URL. Wer kennt sie nicht? Es ist eine URL zu einem Bild, beispielsweise einem Hintergrundbild in CSS.
Die URL-Funktion wird dafür verwendet. und man kann nicht nur URLs reingeben in diese URL-Struktur im Sinne von HTTP Doppelpunkt Doppel Slash und so weiter, sondern man kann natürlich auch so interessante Konstrukte fahren wie Data Doppelpunkt Image Slash PNG und dann Base64 inkludiertes PNG da reingeben oder Ähnliches.
Ja, pass auf, genau, oder Ähnliches, weil da kommen wir nämlich wieder zum Thema.
So, jetzt wird es nämlich spannend.
Wir kommen jetzt wieder zum wichtigen Thema des Podcasts zurück, Weil was du da ja auch reinschreiben kannst, statt Image PNG, ist ja Image SVG und dann kannst du dir das Base64 spannen, kannst du da einfach in die URL direkt das SVG reinschreiben und jetzt sagt sich vielleicht der eine oder die andere, das ist ja völlig beknackt, aber ist es halt eben nicht, wenn man tatsächlich an solchen Positionen, wo es eine URL gibt, man wirklich ein SVG haben möchte, um halt einen SVG-Filter so Single-Use-mäßig einfach in sein CSS direkt einzubetten oder halt ein SVG als Hintergrundbild, das man irgendwie generiert hat oder so, das kommt dann direkt da rein, so alles in eins.
[59:38] Muss man nur irgendwie aufpassen, dass sich nicht der Editor verschluckt, der das Ganze versucht dann zu Syntax-Highlighten. Fragt mich nicht, woher ich das weiß.
Ja, aber es gibt ein paar Zeichen, die man noch escapen muss.
Ja gut, aber wenn man das ja auto-generiert, ist das ja gar kein Problem.
Ja, das habe ich auch schon öfters mal gemacht.
Da hat, glaube ich, der Chris Coyier ein schönes auf CSS Tricks, glaube ich, dann.
Wie ist das denn hier? CSS Tricks.
[1:00:10] Was ist das? Inline SVG. Jetzt mache ich hier. Using SVG. Aha.
Das muss doch das sein. Ich wollte nochmal neben den SVG-Sachen, die natürlich jetzt gleich spannend sind, können wir auch sofort wieder darauf zurückkommen, nochmal auf eine andere Sache eingehen, mir fällt viel beim Durchscrollen hier durch die Doku jetzt gerade nochmal ein, dass es ja auch eine Zeit lang so eine Möglichkeit gab, Border Radius im Internet Explorer, ich sag mal jetzt einfach Version 7, aber vielleicht war es auch die 6er, das weiß ich nicht mehr ganz genau, auch irgendwie hinzubekommen, weil es noch nicht überall unterstützt wurde, in dem man irgendein Skript da in so eine URL-Eigenschaft reingepastet hat, um daraus dann so halbwegs abgerundete Ecken zu generieren.
Erinnert sich irgendeiner von euch noch daran?
Ja, klar, sicher. Ich frage mich jetzt, wo die Erinnerung bei dir herkommt, so jung und dynamisch wie du bist, warum du dich mit so fossil verstaubten Sachen rumschlägst. Aber ja, diese HTC-Dateien waren das.
HTC, ja genau. Und ging das nicht auch über die URL-Funktion?
[1:01:28] Das erinnere ich mich jetzt ehrlich gesagt nicht mehr so direkt.
Ich glaube, die haben ja, ich glaube, dass die auch URL benutzt haben, oder?
Ich hab's jetzt hier mal rausgeguckt.
Behavior-Attribut. Genau, Behavior-Attribut. Da hast du URL reingesteckt.
URL und dann irgendwie sowas wie einen PNG-Filter gedönst, damit man da transparente PNGs hinkriegt. Hatten wir ja auch nicht.
Wir hatten ja nichts. Dafür wurde das ja auch verwendet. Boah, das ist schon echt hacky, ne?
Das ist schon echt crazy. Ja, ich weiß jetzt auch nicht genau, woher das kam. Ist das crazy oder ist die Realität eigentlich viel crazy-iger, die wir heutzutage haben?
Weil ich meine, du hattest damals ja einen so dermaßen reduzierten, sagen wir mal, Problemscope, was so CSS anging. Da ging halt ja auch nicht viel.
Und dann gab es halt so ein paar IE-Probleme, wie irgendwie die PNGs waren nicht transparent, da hast du eine Zeile reingepastet, dann lief, Und wenn du heute irgendwie einfach nur so überlegen willst, okay, ich will eine Webseite bauen und du musst dann erst mal anfangen über Dark Mode und Responsive nachzudenken, ist ja allein schon qua, Problemraum, den du bearbeiten musst, alles schon viel herausfordernder als das früher, wo man sich halt eben dachte, mein PNG sieht doof aus, was tue ich? Copy, paste, fertig.
Es ist eher diese basalen Dinge, dass die halt so anstrengend waren.
Also ein transparentes PNG hinzubekommen oder Spacer GIFs, die du verwendet hast oder, oder, oder.
[1:02:54] Und also ja, du hast recht, heute ist es viel komplexer, aber damals waren es halt so Sachen, wo du halt die Hände über den Kopf zusammenschlägst, wenn du jemandem, der jetzt heute sich ins Webengineering einarbeitet, sagst, wie das damals lief, der lacht dich erstens aus, klar, oder die, völlig zu Recht, aber auf der anderen Seite halt auch ist man halt auch so, Alter, was habt ihr für Probleme, die ihr da lösen müsstest, das ist doch alles Quatsch.
Ja gut, aber heutzutage ist das Problem dann halt irgendwie, keine Ahnung, meine Serverkomponenten rendern nicht, weil der Flux-Kompensator in der neuesten React-Beta seine API geändert hat oder sowas.
[1:03:37] Es ist ja nicht wenig absurd. Also ich kann mehr zu den Problemen Relaten, die halt heutzutage entstehen Weißt du, was ich meine?
So diese alten Dieses HTC File, damit du einen Border Radius hinbekommst, das ist halt etwas Da fühle ich mich nicht gut bei Da denke ich mir, das ist ein Hack Und genau das war es ja damals, Es wurde ja, also es Gab ja Webseiten, die dann Hack den Browser oder was weiß ich Hier ist der IE7 Hack, ich weiß noch irgendwo Irgendwo gab es eine Webseite, da konnte man immer nachgucken und kopieren.
So funktioniert es im IE7, aber es hat keine Auswirkungen auf den IE8.
Und hier ist ein Hack, der ist nur für den Netscape-Communicator.
Ich weiß nicht, ob das da möglich war, aber ihr wisst, was ich meine.
Im Firefox 2.7, 1.5, verwende bitte diesen Hack.
Und Safari 4, da verwendest du bitte diesen Hack. Und das war halt, das ist halt ein Hack.
Und heute ist es halt, es funktioniert halt nicht, weil du mal wieder irgendwas schlecht zusammengestöpselt hast oder irgendeine Library sich nicht updaten lässt.
[1:04:49] Ja genau, also das ist sicherlich richtig so. Die gemeinsame Baseline ist so groß geworden, dass die meisten Probleme, die du im Alltag zu lösen gedenkst, ja einfach so out of the box funktionieren, wo du ja nicht mal irgendwelche Libraries für brauchst, wenn es einfach nur darum geht, ich will jetzt mein Hintergrundbild positionieren oder mein PNG soll gut aussehen.
Oder irgendwie auch was Absurderes, wie ich will ein neues Bildformat verwenden.
Dann kriegst du das ja heutzutage mit irgendwelchen Sprachmitteln wie Picture Element und Ähnlichem tatsächlich hin auszuliefern.
Du verstehst das, dann nimmst du das und du verstehst das nicht, dann nimmst du das andere.
[1:05:19] Und da muss man halt sagen, es ist weniger Getrickse.
Es ist immer noch kompliziert und teilweise hackisch, aber es fühlt sich nicht mehr so als faul gegen die Browser an, was du da machst.
Aber das ist eigentlich ein guter Punkt, den du gerade machst mit diesen Bildern.
Also dieses Bildformat kennst du nicht, also verwende ein anderes.
Das ist ja eigentlich nur, man hat sich auf eine Art und Weise geeinigt, Hacks in den Browser reinzuschreiben, sodass sie allgemein verträglicher sind.
Aber im Endeffekt ist es doch das Gleiche, wie du machst einen Plus oder einen Stern vor die CSS-Eigenschaft und auf einmal funktioniert es in einem speziellen Browser. Würde ich nicht sagen.
Letzteres nutzt einen Bug aus und ersteres ist die Benutzung eines Features.
Also das Picture-Element ist dafür gedacht, dass du sowas machen kannst.
Das andere ist halt wirklich so ein Bug und dann kommt irgendwie ein Update und dann geht alles kaputt. Das passiert ja mit dem Picture-Element ja nicht mehr.
Ja, aber das ist ja genau der Punkt, den ich meine. Die haben halt einfach nicht Bugs, sondern die haben es halt in Feature umgetauft, haben es ein bisschen verändert, aber im Endeffekt ist ja das Behavior ähnlich.
Es funktioniert halt dann nur da, wo es halt auch unterstützt wird.
Und das war ja in der Vergangenheit auch so. Aber natürlich, das eine ist ein Bug und das andere ist halt explizit so eingebaut.
Aber nichtsdestotrotz, der Outcome ist ja der gleiche.
Ja, also sie haben quasi den Trampelfad asphaltiert.
[1:06:43] Ja, das ist eigentlich ein ganz gutes Bild dafür. Das gefällt mir. Da gehe ich mit. Gut.
[1:06:51] All right. Zurück zum Thema URL. Ich wollte noch sagen, da ist vielleicht noch so eine Sache interessant, die darüber hatte der Stefan Judis mal irgendwann einen Blogpost geschrieben.
Und zwar kannst du keine, in der URL-Funktion, kannst du keine Custom Properties einbinden. Das geht nicht.
Was daran liegt, dass diese URL-Funktion, die gibt es in zwei Varianten, in der alten und in der neuen.
In der alten, also das geht ja auch immer noch, du kannst eben eine URL da reinstecken und sie nicht in Anführungszeichen oder in Single Quotes stecken Und quasi die neue Version, die versteht halt, dass du es in Quotes steckst.
Problem ist halt, dass der Parser eben einfach nicht weiß, ist das jetzt quasi die alte oder die neue Schreibweise.
Und wenn du in die URL-Funktion eine Variable reinstecken möchtest, dann denkt er, ah, okay, das ist die alte Schreibweise.
Da sind ja keine Anführungszeichen.
[1:08:04] Und dann escapet er alle Klammern.
Und du hast ja die var-Funktion da drin. Und dann werden die Klammern sozusagen disabled automatisch durch den Parser, weil er die escapet mit einem Backslash.
Das heißt also, aus dieser funktionierenden Funktion wird eine nicht funktionierende Funktion.
[1:08:25] Genau, und, äh, Die Lösung ist, es gibt eine neue Property, die aber, glaube ich, noch in keinem Browser implementiert ist, die aber spezifiziert ist.
Die ist im Prinzip wie die URL-Funktion, die heißt aber Source SRC.
Macht genau das gleiche, aber eben nur in der neuen Variante. Ja.
Also mit Anführungszeichen. Also sie gibt quasi einfach nur dem Parser die Garantie, dass wenn er das parsst, dass das eben nach dem neuen Muster ist und dann dann kann der Browser eben nicht auf die Idee kommen, dass das vielleicht doch die alte Syntax ist und er das dann vielleicht irgendwie so parsen muss, sondern er weiß, okay, es kann nicht die alte Syntax sein, es gibt es nicht per Speck und dann funktionieren Variablen da drin auch.
Okay, was ist denn, wenn ich mir mit AddProperty eine Custom Property definiere mit dem Typ URL? Was kriege ich denn dann? dann.
Dann kriege ich einfach nur etwas, wo ich dann eine komplette URL syntax reinschreiben kann und das kann ich dann per Custom Property, als Wert irgendwo verwenden, wo es eine komplette URL inklusive dieses Strings URL, Runde Klammer auf, nimmt. Verstehe ich das richtig?
[1:09:44] Moment, da bin ich jetzt nicht mitgekommen. Was willst du machen? Mit der Custom Property definieren.
Und da kann ich als Typ ja auch URL angeben. Das ist ja erlaubt, ebenso wie Color und den ganzen anderen Kram. Ja.
Aber wenn ich dann sehe, das ist eine URL-Value, dann lese ich das als die komplette Syntax inklusive der drei Buchstaben und der runden Klamm.
Hm, das weiß ich nicht genau. Kann gut sein, ja. Doch, müsste eigentlich, ja.
[1:10:17] Ja, verflixt. Laute Ausnahmen, ey.
Und der Hack, den du da hast, ist ja auch wieder sehr schön.
Das erinnert mich so an so Empty und Blank, die Pseudoklassen.
[1:10:28] Wo so irgendwie der erste Anlauf so einer ist, wo man so merkt, oh, das ist irgendwie komplett daneben. Also lass mal einfach irgendwie Version 2.0 erfinden und einfach neben Version 1.0 stellen und hoffen, dass niemand jemals Version 1.0 jemals anschaut.
Du meinst hier die Pseudoklasse Empty, oder was? Genau, Empty und Blank.
Oder heißt es Blank? Ich glaube, es heißt nicht Blank, genau.
Aber Empty war ja so, dass wenn du auch nur ein Space oder ein Return in dem Element drin hattest, war es nicht mehr Empty und dann griff das nicht mehr. Genau.
Und das haben die ja nachträglich quasi umspezifiziert, dass dass sowas dann auch kollabiert sozusagen einfach und nicht als Content gewertet wird. Ist das so?
Ich meine, ja. Es kann auf jeden Fall noch kein einziger Browser.
Da gab es doch mal eine andere Pseudoklasse noch dazu. Also, empty können alle Browser. Und ich glaube, dass die das umspezifiziert haben.
Aber da können wir noch mal gucken.
Genau, also umspezifiziert haben sie es, supported ist es nicht.
Aber blank ist auch nirgendwo supported.
Obwohl das tatsächlich als Spezifikation auch existiert.
Also ich hab's nicht komplett geträumt Ja, und das wird noch von keinem Browser unterstützt?
Nö Okay, ja, steht zumindest in der MDN so Okay.
[1:11:49] Hm.
Genau, und das andere, was war das andere? Ah ja, Blank hast du, genau, hast recht, ja.
Und Blank ist dann, das ist dann wirklich so voll ...
Äh ... Hä? Hä? Selects empty user input elements.
Das ist was ganz anderes. Das ist was anderes, an was ich mich erinnere.
Ja, ich glaube, dass tatsächlich, da gab's zwei, und dann haben die gesagt, nee, lass uns einfach empty dann, Lass uns das mal richtig machen.
Ja, okay. Dann habe ich das tatsächlich auf einmal... Die Browser machen das nicht. Die machen die Dreckssäcke.
Naja, dann kannst du ja nicht ausrollen. Es gibt ja genug Code, der MT benutzt und so mit dem alten Verhalten.
Und jetzt einfach Version 2.0 ausrollen und dann sehen alle Webseiten anders aus. Dürfte schwierig hinhauen, oder?
[1:12:46] Ich weiß es nicht. Gleiches Problem wie Type-of-Null ist Object.
Das haben sie ja auch nicht in den Griff gekriegt. Und ich bezweifle, dass sie das nicht kriegen.
Meine These ist ja, dass das eher, sagen wir mal, dass die Programmierer eher erwarten, dass das empty greift und es dann nicht greift.
Und sie das aber nicht sozusagen absichtlich machen.
Also ich glaube, das wäre eigentlich allen gedient damit.
Naja, außer allen, die jetzt gerade eine richtig aussehende Webseite haben.
Durch einen Bug, also dadurch, dass empty irgendwo falsch verwendet wird.
Und das sind ja die, um die es geht.
[1:13:23] Ja, ich weiß nicht, wie viel es davon gibt. Das kann man leider ja auch nicht als Browser-Hersteller so irgendwie messen, ne? Also bei Chrome sagen sie...
Ja? Also bei Chrome sagen sie ja immer, sie können zumindest feststellen, wie viel das benutzt wird.
Genau, aber du weißt ja nicht, ob das dann Absicht, also ob quasi der Effekt, der dann eintritt, ob der so gewünscht ist.
Hat jemand wohl wissend, dass Empty nicht matcht auf Elemente, die noch Widespace enthalten, das dann benutzt deswegen?
Oder ist es eigentlich eher, also das kannst du nicht unterscheiden von Leuten, die Empty benutzt haben, weil sie im Prinzip wollten, dass ein Element zum Beispiel dann verschwindet, wenn nichts drin ist.
Sagen wir mal, wenn es ein Border hat oder so und da steckt aber nichts drin, dann willst du es vielleicht auch gar nicht anzeigen.
Ja, das ist schon klar, aber du kannst ja zumindest mal gucken, ob sozusagen irgendwie du sehen kannst, dass irgendwo eine CSS-Regel geschrieben wird, die irgendwas targetet, was empty ist, und dass diese Regel nirgendwo matcht.
Weil du halt da überall immer irgendwelchen Whitespace noch drin hast.
Also das kannst du entweder automatisch feststellen, oder selbst wenn nicht, kannst du halt einfach irgendwie so ein kleines Bataillon Praktikanten hernehmen und jedem von denen zehn Webseiten auswerten lassen, und dann rechnest du das halt hoch.
[1:14:44] Gewagte These. Vielleicht haben die das ja auch schon gemacht und deshalb wollen sie das ja umspezifizieren und glauben, damit durchzukommen, im Gegensatz zu Type of Null as Object. Aber ich glaube nicht, dass das nicht feststellbar ist.
Das ist auf jeden Fall, glaube ich, schon eine Weile unspezifiziert.
Und wenn die Browser-Herstellers es nicht umsetzen, dann wird es wahrscheinlich auch nichts mehr geben.
Ich finde, vielleicht interessiert es auch einfach niemanden. Also ich fände es gut.
Ich gucke halt immer, dass ich dann tatsächlich auch kein Widespace und kein Return und nichts dazwischen habe. habe.
Was dann immer so ein bisschen, je nachdem, was man für ein Template-System hat, muss man immer ein bisschen aufpassen.
Ich wollte es gerade sagen, das ist ja schon einfach so, also die Gnade desjenigen, der sein Template-System unter Kontrolle hatte, der nicht irgendwelche Plugins über drei Ebenen in SharePoint reinwurschteln muss.
Also du hast leicht reden. Ich achte darauf, dass da nicht irgendwo ein Whitespace drin ist.
Weil du das ja auch im Griff hast. Aber das gilt ja nicht für jeden so. Naja.
Dies stimmt. Da gebe ich dir recht.
[1:15:44] Also hier, check deine Template-Privilegien, mein Freund. Ja, chill an the base, man.
Alrighty. Alrighty. Ich glaube, wir machen...
Deckel drauf, ne? Genau, würde ich auch sagen. Also die URL-Eigenschaft haben wir zur Genüge behandelt und sind auf jeden Fall auch links und rechts nochmal abgebogen.
Aber das Wichtigste ist, wir haben natürlich immer den den SVG-Vergleich mit an den Start gebracht.
Ich hoffe, ihr freut euch auf die zukünftigen SVG- und XML-Sendungen, die anstehen.
Liebe Hörerinnen und Hörer. Und HTML-CSS haben wir ja durchgespielt. Also, farewell.
Das war schön mit euch. Mit HTML-CSS.
Und JavaScript auch. Komm, was soll's? Weg damit.
Wer braucht das heutzutage noch? Vor allem, wenn wir XML machen, dann können wir auch direkt zum Original hingehen und können Javas schreiben.
Java, XML, so dass es doch wie die Welt eigentlich wirklich wirklich zusammengehalten wird.
Und J-Script aber auch.
[1:16:44] Ist das dieses Zeug für die Script-Kiddies da, so im Internet Explorer?
Ja, genau. Das war doch die IE-Flavor von JavaScript. Damit man DHTML-Schnee machen kann zur Weihnachtszeit.
Herrlich. Ach, das steht ja auch wieder an. Ja, ich hoffe, diese Sendung kommt vorher noch raus.
Wir sind jetzt noch nicht ganz in der Schneezeit angekommen.
Aber bestimmt sind auch eure Webseiten bald wieder verschneit.
Wir freuen uns natürlich auf auf zahlreiche Einsendungen von Webseiten, die diese schöne, ja, diesen schönen Schneefall dann doch uns zeigen.
Vielleicht auch gern mit Video. Und dann muss er liegen bleiben. Liegen bleiben, ja.
Ich glaube, wir können auch fair sagen, ich habe hier irgendwo im Regal auch noch ein SVG-Buch bestimmt rumliegen.
Also für die Nerds unter euch, die sagen, sie sind jetzt da voll drin in der Geschichte mit dem Schnee.
Feuer und Flamme. wir machen einen kleinen Wettbewerb draus, wer die schönste Einsendung hat zu dieser Schneethematik auf der Webseite der oder diejenige, bekommt von uns hier ein Buch zur Verfügung gestellt, ich kann nicht garantieren, dass es SVG ist, aber irgendwas schönes wird sich finden lassen im Bücherregal und bis dahin sagen wir erstmal, wir hoffen, ihr seid nächste Woche am Start, wenn es heißt, Sendung Nummer 600 die Hälfte von.
[1:18:11] 1200 Sendungen haben wir dann gemacht, nämlich 600.
Ich hoffe, ihr seid am Start. Wir hören uns, wir sehen uns und bis dahin erstmal alles Gute.
Macht's gut und danke Peter und danke Shep, dass ihr so viel SVG-Wissen hier auch preisgegeben habt.
Bis zum nächsten Mal. Ja, wir laufen uns warm hier.
Tschüssi. Tschüss.
[1:18:37] Music.
[1:18:40] Bis zum nächsten Mal.