Wo wir sind, ist vorne, Folge 45. Heute geht's Bleeding-Edge, State-of-the-Art, CSS.
Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzelein.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Giesmann und Javascript-Jongleur Konstantin Groß.
Hallihallo.
Hallöchen.
Ja, sind wir mal wieder.
Wir waren vorher schon im Radio-Jongle-Modus, ne?
Ja, es werden Dinge kommen.
Ja, doch, nee, ich muss mich jetzt drauf committen, es werden Dinge kommen und sie werden, wie immer, sehr merkwürdig, aber einzigartig.
Einzigartig, aber merkwürdig, ja, gut, weiß ich nicht, dass die anderen entscheiden. Das ist nicht die Absicht, die dahinter steckt, auf jeden Fall. Naja, gut.
Also, wir können gleich zum Bier kommen, ich habe gar nichts zu reden, ich habe gar nichts zu reden, ich habe gar nichts zu reden, ich habe ein Klosterdunkel von Alpiersbacher Klosterbräu.
Es ist aber, glaube ich, gar nicht dunkel, also es ist relativ klar, wenn ich durch die Flasche richtig sehe, aber egal.
Ich bin so der Langweiler momentan.
Das ist schon wieder dein, dein Wölfchen.
Ich bin halt, ich bin halt kein, ich trinke halt nicht so viel und dann muss ich halt, ich muss halt sechs Wochen dann, wenn ich mir so ein Sixpack kaufe, muss ich sechs Wochen, muss dann, äh, dauert dann ein bisschen.
Vielleicht, ich habe ja schon mal erklärt, ich bin halt, ich bin halt Podcast- und Stream-Alkoholiker, aber ich trinke halt sonst so gut wie nix.
Und dann kommt es halt nicht weg, nee, verstehe ich.
Und dann kommt es nicht weg, ich gucke halt immer mal wieder, ich trinke halt auch sonst kein Bier.
Und das heißt, ich, genau, und ich gehe dann halt einfach beim Supermarkt, wenn ich eh gerade einkaufen muss, dann gucke ich so, ah, was gibt es jetzt gerade?
Manchmal gibt es ja so Aktionsbiere und irgendwie je nach Jahreszeit was.
Und das war zum Beispiel, das habe ich auch noch nie getrunken hier und das habe ich gedacht, jetzt probieren wir das mal.
Es röstmalzig und vollmundig und hat 5,2 Prozent.
Mainz ist geboren in der Karlsruher Südstadt.
Steht auch gut.
Das ist auch gut.
So, jetzt.
Also, hier nebenan.
Oh, oh, das war, das war hervorragend.
Warte mal, das kann ich nicht drauf, ich schüttel mal ein bisschen in die Gefahr hin, dass es gleich schäumt.
Keine Chance, keine Chance.
Das war, das war, dieses war schon wirklich Premium.
Auf meinen Kopfhörern hat es sich traumhaft angebracht.
Also dann, zum Wohl.
Zum Wohl.
So, wir haben hier durch unser Portal angestoßen, weil alle die Portal schon mal gespielt haben, das ist das, was wir machen.
Bei mir ist das blau, bei ihm ist das rote Portal.
Und dadurch stoßen wir halt immer an.
Also, das ist röstmalzig, okay.
Also, es ist, ähm, mhm.
Ja, ja, ja, doch, äh, ist gut.
So ein bisschen Lakritz.
Ja, ich muss mal so Einzelflaschen kaufen.
Ich glaub, es gibt ja tatsächlich, ähm, oder gab's zumindest, ich bin ja schon lange nicht mehr lang gelaufen, aber, ähm, gibt's so einen Craft-Bier-Laden, da beim ehemaligen Karambolagen in der Nähe.
Ach, ja.
Weißt du, wo ich meine?
Ja, ja, ja.
Ähm, da, das ist so ein ganzer Laden irgendwie voll mit lauter, mit lauter verrückten Biersorten.
Da müssen wir mal zusammen hin und dann suchen wir uns mal irgendwie von jedem zwei Flaschen raus und dann ...
Oder lass uns das so machen, genau.
Und dann können wir auch gemeinsam das Gleiche trinken.
Genau, das ist doch auch cool.
Ja, das ist eine gute Idee.
Craftbiere.
Craftbiere?
Craftzahl kenne ich, Craftbier ist mir neu.
Aber egal.
Komm, lass uns den Blödsten für später aufheben.
Ja, dann sind wir noch durch.
Gut, also dann geht's weiter.
Und ich, laut Plan fang ich an, ne?
Aber dann hab ich ja Einleitung und Retro angefangen, ne?
Egal.
Also ich mach heute mal so ein bisschen Rant wieder.
So zum Anfang.
Gleich die Laune richtig gut.
Wenn ich das Wort sage, rollen sich wahrscheinlich diverse Zehennägel hoch.
DSGVO.
Ist ja auch bald Halloween, passt auch.
Gruseligkeitsfaktor.
Ja, ich hab, äh, zur Zeit geht eine Abwarn, Abwarn, Abwarn, Abwarn, eine Abwarnmelle, eine Abwarnmelle, eine Abwarnmelle, äh, durch das Internet, durch, durch das Internet, also vom Anfang bis zum Ende des Internets.
Und, äh, und zwar geht's um Google Fonts, äh, weil das, ähm, das wollte ich mir noch aufschreiben, damit ich kein Blödsinn erzähle.
Aber jetzt erzähle ich halt Blödsinn, dass, äh, das, äh, Oberlandesgericht München, glaub ich, äh, war das, ähm, ein, ein Urteil gefällt hat, irgendwie Anfang diesen Jahres, ähm, laut dem Google Fonts halt nicht zu technisch notwendigen Inhalten zählen.
Und, äh, dass, äh, dass, äh, dass da ganz böse, böse meine IP-Adresse an amerikanische Server von Google übertragen wird. Ähm, und, äh, ja, dementsprechend darf das eben nicht sein, dass ich die direkt von Google Fonts ein, äh, äh, einbinde.
Ohne, dass ich da irgendwie das, das vorher verhindern kann.
Und dementsprechend werden da jetzt von, wahrscheinlich von Abmahnanwälten, die sich irgendwie spezialisiert haben, aber auch von Privatpersonen, die meinen, sie können sich da ein bisschen was verdienen, ähm, massenweise Webseitenbetreiber abgemahnt.
Und da kostet so eine Abmahnung, also irgendwie 100, 170 Euro. Also es ist jetzt nicht so viel, ne, es gibt ja auch, äh, abmahnbare Sachen, so, ne, gleich mal tausende Euro im Raum stehen.
Ähm, aber wo es halt irgendwie heißt, da meine Daten, äh, Datenschutz wurde verletzt und, äh, ich will Schadensersatz. Wo ich auch denke, wo ist genau der Schaden und dieses, also die IP-Adresse als, aber da haben wir es schon mal drüber gehabt, also das, äh, ja.
Übrigens Landgericht München, ich hab's kurz recherchiert. Ja, es ist auch egal, also nur der, der Vollständigkeit halber nachgereicht.
Ja, und das ist halt, ähm, ähm, äh, ja, klar, natürlich sind wir auch in der Pflicht als, als Gestaltende, äh, uns da auf dem Laufenden zu halten, ähm, was, was so Dinge angeht und wenn wir eine neue Webseite machen, klar, versuchen wir da auch möglichst alles nach, nach bestem Wissen und Gewissen zu machen, aber wir sind natürlich auch keine Fachanwälte für IT-Recht, ja, inzwischen hab ich aber das Gefühl, müsstest du eigentlich sein oder müsstest du eigentlich auch als kleiner Betrieb inzwischen schon zur Seite stehen haben, ähm, damit du überhaupt irgendwas in das Internet stellen kannst,
ohne, dass sofort jemand kommt und dir irgendwas Böses will. Also, ähm, ja, es ist, wenn man alles komplett richtig machen will, dann, dann muss man sich eigentlich direkt Rechtsberatung mit ins Boot holen, inzwischen.
Und, äh, entsprechend kam es jetzt tatsächlich vor, dass mittlerweile, glaube ich, zwei Kunden von uns, ähm, tatsächlich eine Abmahnung bekommen haben wegen, äh, Google Fonts und es ist halt so, wenn wir eine Webseite machen, aber nicht extra einen Pflegevertrag schließen, dann werden wir da auch nicht, also, da ist falsch gesagt, wir werden nicht proaktiv.
Wir haben sogar, äh, Anfang des Jahres schon mal eine E-Mail rausgeschickt wegen irgendwelcher Änderungen, also, wir machen das sogar, aber wenn das halt teilweise Kunden sind, die dann irgendwie vier Jahre nicht mehr Kontakt mit uns haben, dann ist das für mich halt, ne, das ist kein aktuelles Projekt.
Wir kriegen da kein Geld mehr, also, da renne ich nicht hinterher. Wenn ich das mache, aus gutem Willen, ja, dann schicke ich eine Rundmail an alle Kunden, die ich noch in der Datenbank habe, ähm, aber da renne ich nicht hinterher.
Und mit manchen Kunden haben wir einen Pflegevertrag, und wir haben das auch, ne, wir haben das auch angeboten, hier so, ein Pflegevertrag kostet so und so viel, für je nachdem, was, was drin sein soll.
Und viele wollen das aber halt nicht, die sagen, ich hab ja eine funktionierende Webseite, ne, brauche ich nicht.
Naja, ist ja dann halt, aber, ja, aber rechtlich seid ihr raus.
Ne, klar, also, wenn die auf WordPress basiert, dann ist halt irgendwie so, nach drei Jahren guckst du rein, ja, schön, immer noch WordPress-Version 4 irgendwas mit, keine Ahnung, wie viel tausend Sicherheitslücken, aber ist halt dann nicht, nicht mehr unser Bier, ne, und, ähm, aber es ist trotzdem halt nervig.
Und für die Kunden ist es halt dann trotzdem, oh, sie haben ja damals das gemacht, jetzt kommt da jemand und mahnt mich ab, ähm, die meisten verstehen es, ähm, ein paar haben dann so ein bisschen, ja, das kann ja jetzt aber nicht sein, ne, so.
Aber das war alles, die, die Entscheidung fiel, nachdem dieses Webprojekt abgeschlossen war, und von daher sehe ich uns auch da fein aus der Sache raus.
Absolut, also, richtig.
Aber, äh, da wäre meine Frage, äh, so an, an alle Zuhörenden, ähm, vor allem natürlich die, die selbstständig sind oder in irgendeiner Form direkt, für direkt Kunden Webseiten gestalten, egal, ob jetzt selbstständig oder angestellt.
Ähm, wie wird das denn, wie handhabt ihr das oder wie wird das bei euch in der Firma gehandhabt?
Also, habt ihr solche Pflegeverträge oder ist für euch auch so, na, wenn das rum ist, ist rum und, ähm, da muss sich dann der, die Kundin, äh, drum kümmern.
Äh, würde mich mal interessieren, wie das andere so handhaben.
Und, äh, da wir meistens ja auf WordPress setzen inzwischen, hab ich ja mal geguckt, gibt's da nicht irgendwie einfache Möglichkeiten und es gibt tatsächlich ein Plugin, das heißt OMGF, also irgendwie Oh My Google Font.
Und, ähm, das installiert man und dann saugt sich das irgendwie automatisch, die verwendeten Schriften raus, äh, cached die zwischen in der WordPress Instanz und zieht die von lokal, also genau das, was man haben will.
Ähm, das Problem ist nur, dass das mit dem Theme, das wir hauptsächlich verwenden, natürlich nicht funktioniert.
Äh, das heißt, da hab ich jetzt eine eigene Lösung gestrickt, erstmal manuell, wo ich, ähm, mit vertretbarem Aufwand, der natürlich auch bezahlt wird dann, wenn es einen Auftrag gegeben wird, ähm, mir die Fonds runterladen kann und, äh, dann entsprechend lokal in, in WordPress einbauen kann.
Und jetzt bin ich gerade dabei, für dieses Theme ein Add-on zu schreiben, das genau das automatisiert macht.
Ah.
Ja.
Also, ich war, ich bin gerade mal auf die Seite von dem Plugin, ähm, ähm, ich glaub, eher auf WordPress, genau, und dann Powered by.
Und dann, äh, der, der, der findet sich, glaub ich, ziemlich gut, der das macht, ähm, der hat das quasi so, der hat, sein Logo ist quasi so eine Art Unterschrift, ähm, dahn.dev.
Ah, okay.
Naja, egal.
Dahn von dem Berg.
Ja.
Das, äh, hab ich so noch nie gesehen, dass jemand quasi als Logo, äh, von sich selbst auch auf der Webseite quasi so eine Art, äh, ja, Unterschrift nimmt.
Jo, ähm, genau.
Dann sind wir damit durch.
Äh, ich hab einen Retro-Punkt, ähm, ich, äh, ich spreche ja manchmal über Tweets, die ich gemacht hab, wo, mit denen irgendwas passiert ist, ähm, und der ist jetzt, äh, schon vom 19. Okura schon fast alt.
Äh, ähm, ähm, ich hab mir mal angeschaut, ähm, was für CSS in Webviews von macOS so drin ist.
Und ich muss dazu sagen, ich bin sehr froh, dass ich's gemacht hab zu dem Zeitpunkt, weil ich hab jetzt seit, ähm, gestern, ich war da ganz vorne mit dabei, ähm, macOS Ventura, also die, die grad die neueste Major-Version von macOS.
Und da find ich jetzt grad gar keine Webviews mehr drin.
Das heißt, es ist sehr gut, dass ich das gemacht hab, weil nach dem Update, äh, gut, ich könnte auf einem, äh, auf einem anderen Rechner noch gucken, ähm, wo noch ein alteres macOS drauf ist.
Aber ich kann jetzt bei mir gar keine Webviews mehr finden, könnte das also jetzt gar nicht mehr machen.
Das hab ich also gemacht, ähm, es gibt, äh, so ein, äh, so ein Blogartikel, ähm, von Jim Nielsen, wo er erklärt, wie man denn sich den Webinspektor von Webviews in macOS, äh, anzeigen lassen kann.
Und, äh, das hab ich gemacht und, ähm, in dem Fall hab ich mir die Seite angeschaut von, äh, von der Apple-ID, weil das war ein Webview in den, in den Einstellungen.
Und hab da ein paar interessante Sachen gefunden, ähm, da dachte ich mir, jetzt guck ich mal so, und dachte, ah, okay, interessant, das CSS zum Beispiel wird von der Apple, aus dem Apple-CDN geladen, also das heißt, ohne Internet wäre das, wären, sind diese Einstellungen gar nicht möglich.
Da es da um die Apple-ID geht, also Sachen, die sowieso mit online verbunden sind, ist das okay.
Wahrscheinlich wird das vorher gecheckt, ob die Verbindung besteht, bevor überhaupt dann das Ding aufgeht.
Aber es erlaubt natürlich auch komplettes Tracking, also die wissen ganz genau, wie oft das aufgerufen wird und so, ne, also Tracking, was man halt über Files machen kann.
Ähm, die wissen dann auch ganz genau theoretisch, äh, was für eine macOS-Version und so weiter, also können sie alles.
Aber weißt du, weil wir es gerade von DSGVO hatten, ich find das halt echt krass.
Also, ich mein, das ist ja genau das Gleiche. Also, man könnte diese Styles auch lokal haben.
Aber sie werden so eingebunden, dass es eben auf Server, äh, hier von Apple online geht und die da drüber tracken können.
Warum ist das in Ordnung?
Aber, ne, ja.
Tja, nee, es ist bestimmt nicht in Ordnung. Es hat sie nur deswegen noch keiner abgemahnt.
Ah, okay.
Vielleicht drehe ich den Spieß mal um.
Oh, ich weiß, also, ja, finde, es sollte sich mal jemand mit Apple anlegen. Das ist immer eine gute Idee.
Ähm, nee, damit sag ich nicht, dass man es nicht machen sollte. Keine Ahnung. Also, das ist halt was, was ich rausgefunden habe.
Tut mit diesem Wissen, was ihr wollt. Ich weiß nicht, ob es im aktuellen macOS noch so, ob es das noch gibt, Webviews.
Ähm, genau. Also, falls ihr wisst, dass es irgendwo noch Webviews gibt, ähm, sagt Bescheid. Ich würd da auch gerne noch mal reingucken.
Ich find das hochspannend, wenn, ähm, OS, äh, Design mit, äh, JavaScript und CSS und HTML gemacht wird.
Also, das find ich total spannend, weil das ist nämlich eigentlich, ähm, auch gar nicht aufgefallen.
Es war so gut integriert, dass man's eigentlich nicht gemerkt hat.
Wenn man ganz genau hingeguckt hat und es wusste, hat man gesagt, ah, stimmt, das ist ein bisschen anders als auf den anderen Views, aber ansonsten ist nicht aufgefallen.
Also, was hab ich denn noch so gesehen? Ich sag noch so zwei, drei Sachen. Der, der Thread, ähm, ist etwas länger geworden.
Ich, warte mal, irgendwie schon so zehn, elf Tweets.
Ähm, zum Beispiel hab ich rausgefunden da drin, dass es so aussieht, als ob dasselbe CSS auch für Sachen auf Windows verwendet wird.
Ähm, also, erstens hab ich eine klasse Punkt-Windows, äh, die ganz gern so irgendwo vor Sachen dran geschrieben wurde, gefunden.
Ah, okay. Ja gut, also, gerade bei diesem Sign-in, ne, klar, das kann auch in der Windows-Umgebung passieren.
Das sagt erst mal noch nix, aber, ähm, da war halt oft dann Font-Family, Family, Segway UI, Segway UI, äh, doppelt.
Also, einmal mit Leerzeichen, einmal ohne Leerzeichen und dann noch Tahoma und Sans Serif.
Also, das spricht schon stark auf dem Windows-System hin, weil das sind Fonts, die weiß ich gar nicht, aber ich glaub, auf dem Mac OS gar nicht standardmäßig sind halt so Windows-Standard-Fonts.
Nee, Segway ist, äh, ist definitiv Microsoft-Font, ne?
Dann haben sie zum Beispiel, ähm, es gibt ja so Helferklassen oft, um, um so, äh, Bereiche an, oder Bereiche zu verstecken, visuell, aber für einen Screenreader lesbar zu machen, also Elemente.
Ähm, und, äh, interessanterweise haben sie dafür quasi Alias, äh, drei Alias-Klassen.
Also, einmal heißt, gibt es eine Klasse, also, wo immer dasselbe CSS drinsteht, einmal A11Y, SR-Only und Visually Hidden, und es ist alles genau das Gleiche.
Also, ich kann's mir nicht merken.
Ja, ich wollte grad sagen, so einfach nur Syntactic-Sugar quasi so, ah, was war's nochmal für eine Klasse? Na, eins von den drei, ja, bitteschön.
Das find ich, find ich ein bisschen krass.
Ähm, dann hab ich gesehen, dass sie EO-Fonts eingebunden haben.
Äh, das ist ja so für die uralt Internet-Explorer, also, äh, ich glaube, der IE8 war der letzte, der noch keinen WoW unterstützt hat.
Ja, krass. Ähm.
Also, echt, so weit zurück geht das schon.
Ja, IE9 konnte, konnte schon WoW, ich weiß nicht, ob er das volle Feature-Set kannte, äh, konnte, aber, ähm, ja, und da hab ich, ich könnte jetzt noch, könnte jetzt noch weiter, relativ lang weiterreden.
Ähm, schaut euch den Thread mal an, ich hab da noch einige andere interessante Sachen rausgekramt.
Also, unter anderem haben die zum Beispiel auch ein eigenes Media-Query erfunden, ähm, was es im Standard so nicht gibt. Es gibt so was Ähnliches.
Kleiner Tease, es gibt so was Ähnliches, aber das, was ich da gefunden hab, gibt's im Standard meines Wisses noch nicht.
Ähm, genau. Also, einfach mal, könnt ihr mal reingucken, ähm, und, äh, mir noch ein Like da lassen, wenn's euch gefallen hat.
Also, ich, ich hatte Spaß dabei, äh, mir das anzugucken und hab auch ein bisschen was an Feedback dazu gekriegt. Ähm, ja, ist ne coole Sache.
So.
Gut.
Dann geht's weiter.
Äh, ich bin aufmerksam geworden auf Twitter, ich weiß aber nicht mehr über wen, sonst hätt ich das noch dazu geschrieben, auf den Sovereign Tech Fund.
Oh, ich glaub, ich weiß wie.
Ja? Hast du das auch in der Timeline gehabt?
Ja, ich hatte, ich hatte, äh, ich hatte was getwittert zu, ich könnte mir auch vorstellen, irgendwie Open Source Developer zu werden, wenn ich, äh, wenn die Kohle irgendwie halbwegs stimmen würde, also so unabhängig.
Und ich glaube, da hat dann einer darauf hingewiesen, guck mal, es gibt doch so ein Tech Fund, aber ich bin mir nicht sicher, ob das genau der war.
Es war, es war, es war, ist das was Deutsches oder ist das?
Ja, das ist vom, vom, vom Bundesministerium für Wirtschaft und Klimaschutz wird das finanziell, also das ist wirklich ein, ein deutscher, äh, äh, Tech Fund hier von, von der Bundesregierung.
Ähm, ähm, Southern Tech Fund und, ähm, ich hab mir das dann so ein bisschen angeschaut, was, was ist das denn so, was, was, ja, was, was machen die genau, was unterstützen die für Projekte?
Und an sich ist das natürlich eine gute Sache, dass Open-Source-Geschichten unterstützt werden und die Regierung das auch sieht, dass da Bedarf besteht. Und dann ist mir was aufgefallen, was aber so ein bisschen so ein Geschmäckle hat.
Da sind von sieben, das ist gerade die Pilotrunde, das gibt es glaube ich noch nicht so lange, ich weiß aber jetzt auch nicht, seit wann es den jetzt gibt, aber von sieben Projekten in dieser Pilotrunde drehen sich fünf um das Thema Kryptografie.
Und irgendwie so staatliche Einflussnahme auf irgendwelche Kryptografie-Dinger und Backdoors kam mir da so spontan in den Sinn, weil das gab es ja auch schon in der Vergangenheit, dass in Open-Source-Projekte versucht wurde, was einzuschleusen.
Ich weiß nicht wie erfolgreich, aber teilweise sogar in den Linux-Körnel, ist jetzt auch schon eine Weile wohl her, Anfang der 2000er war das glaube ich, aber gab es bestimmt auch immer wieder und ich bin mir eigentlich relativ sicher, es gibt bestimmt auch erfolgreiche Versuche sowas einzuschleusen, die halt einfach noch keiner gemerkt hat.
Weil das Pull-Request erstmal so in Ordnung aussieht und vielleicht, also je nachdem auch wie die Reviewer drauf sind, ob es da ein gescheites Review überhaupt gibt oder so, oh ja, der scheint schon zu wissen, was er da tut oder sie, oh ja, looks good to me und dann rein damit.
Und ich fand es halt einfach, es gibt so viele Projekte, die unterstützenswert wären, Libraries, die sich in fast jeder Software befinden und ich weiß auch gar nicht, ob das, das sind glaube ich aber auch keine deutschen Projekte.
Projekte jetzt unbedingt, die da unterstützt werden, wenn die jetzt irgendwie sagen würden, okay, wir unterstützen halt, äh, Deutschsprache, da ist zum Beispiel Curl drin und Curl ist glaube ich kein, kein, kein deutscher, äh, das weiß ich nicht, es ist aber so, also und Open SSH zum Beispiel noch, WireGuard.
Genau, und das ist halt irgendwie so, hm, Open SSH, ja, verschlüsselte Übertragung, WireGuard, VPN-Protokoll, ähm, also es ist so, warum diese krasse Fixierung auf Kryptografie?
Und da ist halt dann schon, ich kann das schon verstehen, also, was, okay, was ist dein Gedanke dazu?
Ja gut, klar, natürlich hat der Staat auch Interesse an verschlüsselter Kommunikation, ja, ähm, meine Befürchtung, und ich bin jetzt kein Verschwörungstheoretiker, aber es ist halt einfach irgendwie, ich finde es halt ein bisschen seltsam, dass, dass das halt so krass viel, äh, Kryptografie-Zeug ist, wo man eigentlich auch andere Projekte unterstützen könnte und, äh, das halt irgendwie so.
Das ist aber so die Basis für vieles, deswegen finde ich das schon gerechtfertigt. Ich weiß nicht, was hättest du denn gerne unterstützt gesehen?
Ähm, pff, ich hab jetzt keine konkreten Beispiele, aber wenn du guckst, was die häufigsten Pakete sind.
Also du hättest denen gerne einfach deine Konto nochmal geschickt.
Nein, da geht's gar nicht um, um, um, um Neid jetzt irgendwie oder so, dass, da gar nicht, also, ähm, ich hab nicht mal irgendwie Projekte, wo ich jetzt groß irgendwie unterstützt haben möchte und Geld dafür haben möchte, aber, ähm, es ist eher so, die Auswahl an Projekten, also, es wäre schon alleine schöner, einfach ein bisschen Diversität auch in dem Bereich zu haben, ja, also, wir haben irgendwie, äh, halt noch, ich meine, es gibt ja so viel, es gibt ja nicht nur Kryptografie und Datenübertragung, also, äh, es gibt irgendwelche Grafik, äh, Geschichten.
Ähm, Machine Learning ist ja jetzt gerade so ein Thema, wo man was unterstützen könnte, ähm, ja, weiß ich nicht, also, gut, sowas wie Curl, nur was anderes, ne, Curl ist ja wirklich überall fast, fast drin, wo es drum geht, ähm, ich, ich suche mir, also, ich, ich, ich ziehe irgendwo was von einem Server oder ich, ich mach eine Verbindung und, und zieh mir die Header, die zurückkommen oder was weiß ich, ähm, also sowas, sowas Grundlegendes, ja, was jetzt aber gar nicht unbedingt jetzt um, um, um Kryptografie irgendwie, wie geht, ähm, fand ich einfach ein bisschen komisch und das war einfach nur so als, als, als
Gedankenanstoß, äh, wollte ich das mal gesagt haben.
Ja, ja, und ich widerspreche.
Ich, ne, ich, ich, ich hab, ich hab so das Gefühl, dass, dass, ich bin froh, dass das solche Projekte sind und ich nicht irgendwas, was ich noch nie gehört hab, ähm, weil, weil das sind eben so grundlegende Dinge, die, die ganz vielen Dingen zugrunde liegen, ohne dass man's weiß und die halt vielleicht auch gerade deswegen wenig Funding kriegen, weil sie sind halt, die werden als voraus, als gegeben vorausgesetzt, das ist halt da, das benutzt man halt.
Und gerade, gerade solche Projekte, bei denen ist es ganz wichtig, dass, dass die gut, ja, dass da guter Code ist, dass, dass man das unterstützt, also ich kann, ich find das gut, ich find diese Liste, ich kenn das nicht alles.
Ja, aber teilst, also, teilst du die Bedenken gar nicht, dass da irgendwie Einflussnahme stattfinden könnte, entweder in Form wirklich von, von selber versuchen Code oder halt irgendwie so, äh, quasi, äh, plötzlich wird der Hauptcontributor halt vom Geheimdienst angesprochen und es heißt, äh, hey, hör mal, äh, was, was hältst du denn davon, wenn's noch ein bisschen mehr Geld gibt und, äh, dafür gibt's dann halt irgendwie ein Backdoor, äh, wo wir was aushebeln können.
Ja, aber dafür brauchst du keinen Tech-Fund, dafür kannst du das Geld einfach so überweisen, also, das kann, das, das würde ich doch nicht, das würde ich doch nicht, das würde ich doch nicht, in so einer, in so einer Runde würde ich das doch nicht machen, also, da würde ich den direkt hinschicken und würde klar sagen, hey, ich kann dir mal, ich geb dir drei Bitcoins und, äh, die, die kriegst du von, die kriegst du von irgendwo, sag mal, deine Wallet-ID, so, äh, also, das würde ich ganz anders machen, wenn ich da, wenn ich, wenn ich, wenn ich da irgendwas Schiefes drehen wollte mit, hier, baue mir mal eine Backdoor ein, ähm, das, also, nee.
Weißt du, die besten heimlichen Sachen macht man komplett offensichtlich.
Halt, halt in plain sight, ähm, ich weiß nicht, das ist, das halte ich, das halte ich für zu.
Dann bin ich einfach nur Paranoid.
Auch okay, schreibt's in die Kommentare, äh, wie ihr das seht.
Fazit, Konstantin ist Paranoid, so nennen wir auch die Sendung heute.
Alles klar.
Paranoid-Stantin, egal.
Dann, das ist der, äh, dann geht's weiter.
Ah ja, ich hab, äh, ich hab mal wieder was, was lernen müssen, was ich, was man eigentlich wissen hätte können, ähm, und ich bin voll auf die Schnauze geflogen damit und ich dachte mir, mach mal so ein kleines, so ein kleines, so ein kleines Fuck-Up, äh, kleine Fuck-Up-Geschichte.
Äh, vielleicht, äh, vielleicht, vielleicht kürzen wir es ab, einfach niemals von Buttons, die Größe ändern oder von Dingen, auf die geklickt werden, niemals nachträglich ändern, aber bei bestimmten Aktionen.
Ich hab natürlich nicht dran gedacht, hab, ähm, wir haben mal über, über, äh, Hints gesprochen, ähm, für Shortcuts.
Das hatten wir, ich weiß nicht, ob wir es im Podcast hatten oder im Stream, ähm, dass halt man einen Button auch drücken kann, in Anführungsstrichen, äh, mit der Tastatur, in der man einen Shortcut auslöst.
Jetzt war mir halt wichtig, dass das auch kommuniziert wird, dass es diesen Shortcut gibt für einen bestimmten Button.
Und hab dann naiv, wie ich war, gedacht, naja, es wäre ja vielleicht ein Weg, dass man in den Button den Shortcut reinschreibt, wenn er verfügbar ist, also in dem Fall, wenn ein bestimmtes Element fokussiert wird.
Woran ich nicht gedacht hab, ist, dass wenn man dann versucht hat, draufzudrücken, das Ding den Fokus verliert, der Text wieder weggeht und der Button in dem Augenblick, wo man drückt, kleiner wird und dann, äh, ins Nichts klicke.
Was, wieso, wieso, wieso verliert ihr den Fokus beim Drücken?
Ähm, also das war halt so gedacht, dass das, ähm, eine Textarea, wenn die den Fokus hat, weil nur dann der Shortcut funktioniert, bekommt der Button einen extra Text.
Welcher Button?
So, äh, der Button zum Absenden, der Button zum Absenden, genau, da ist ein Button zum Absenden.
So, bekommt ein extra Text, du kannst mich absenden mit Shortcut Blah.
Mhm.
So, ähm, und wenn du jetzt aber nicht den Shortcut verwendest, weil da funktioniert alles wunderbar, wenn du nicht den Shortcut verwendest, sondern die Maus, dann kann es dir passieren, dass du auf einen Button drückst, dieser Text dann wieder verschwindet, weil der Nut da ist, wenn der Fokus drauf liegt.
Ähm, okay.
Ähm, der Fokus, der Fokus geht aus der Textarea raus, geht auf den Button, beziehungsweise ist in diesem Augenblick gerade erst mal nirgends, nämlich bei Blur ist er erst mal auf Body.
Ähm, und dann, äh, gut, man könnte jetzt sagen, der Text steht immer da, aber dann stimmt der Zustand nicht, weil du es nur abschicken kannst, während du in der Textarea bist.
Ja, deswegen hab ich auch nur dann den Hint eingeblendet.
Ja, gut, also müsste man ...
Und dann, dann wird der, ich hab noch schon eine Lösung dafür gefunden, das ist jetzt ein extra Element, also so quasi so eine Art Tooltip, das da drauf zeigt, dann hast du das Problem nicht, also der Button selbst bleibt unangetastet.
Ähm, aber in dem Augenblick, das war, das war so blöd, ich muss dir das einfach mal erzählen, du drückst drauf und in dem Augenblick wird der Button kleiner und ist unter deiner Maus kein Button mehr und dann hast du, geht der Klick halt einfach ins Leere.
Hervorragend, also, sehr schön.
Also, ansonsten wäre mir noch eingefallen, halt entweder den Button entsprechend viel Platz schon einplanen, also der Button ist halt einfach breiter, als er sein müsste vielleicht, ähm, sieht aber halt komisch aus, weil es wahrscheinlich dann auch nicht zentriert ist mehr, ne, das ist auch doof.
Ja, nee, also ...
Ähm, oder halt der Button quasi, ne, je nachdem, wie das Layout aussieht und wie breit die Spalte ist, wo das drin ist, hätte man den einfach voll breit unter die Textarea zum Beispiel setzen können, ne, und dann, äh, halt nicht zentriert auslässt.
Ich hab da nochmal recherchiert, was Best Practices in dem Bereich sind, also zum Beispiel, wenn du jetzt, ähm, Google Docs nimmst, das hat ja auch eine Menge Shortcuts, da zeigen die Tooltips an,
wenn du mit der Maus drüber gehst, in meinem Fall hab ich das dann halt bei Focus, äh, ist auch okay, ähm, genau, Tooltips oder, äh, wenn man Bootstrap verwendet, da gibt's natürlich auch Tooltips, oder was ich jetzt verwendet hab, ein Pop-Over, äh, aus dem Bootstrap-Bereich, das ist so ein bisschen größerer Tooltip, der ein bisschen anders aussieht.
Genau, ähm, das und dann vielleicht noch, äh, weiß gar nicht, ob das jetzt in die Retro noch reinpasst, wir haben ja auch schon mal über Gaming gesprochen, ähm, und vielleicht spielen wir das mal demnächst, Konstantin, äh, ich habe entdeckt jetzt, dass es, dass es vor,
vor sechs oder sieben Jahren ein neues, äh, ein neues, in Anführungsstrichen damals, äh, Worms rausgekommen ist, und zwar ein, eins, das nicht 3D ist, sondern 2D wieder, das sich sehr anlehnt an Worms Armageddon, was ein sehr, sehr geiles Spiel war damals,
Und das hab ich zwar auch noch, das Problem damit ist allerdings, ähm, dass das so alt ist, äh, und da ich, da ich das nicht bei mir nativ installieren kann auf dem Mac, das ist so alt, dass die Speicherstände nicht mit Steam oder sowas synchronisiert werden.
Das heißt, äh, du spielst da endlos lang und, äh, dein Fortschritt ist einfach dann weg, also jedes Mal, wenn du es jetzt in Cloud Gaming machst, ist es jedes Mal weg danach.
Und da ich das nicht bei mir auf dem Mac lokal installieren kann, ich will auch kein, ich will mir auch kein Windows mit Bootcamp, falls jetzt irgendwie Leute auf diese Idee kommen, will ich eigentlich nicht machen.
Also, ich, ich hab, äh, gerade gesehen, ich, ich hab sogar, äh, Worms, äh, WMD, hab ich sogar in meiner Steam Cloud.
Ah, ja, dann, das ist ja super, dann, äh, dann, dann, dann zocken wir das mal.
Ähm, da steht eigentlich irgendwie Steam Cloud Out of Date, und ich kann aber auch nix irgendwie machen, dass das nicht Out of Date ist.
Ich bin da, ich bin da noch, äh, am, am Kampagnen durchspielen und hab mein erstes Online-Spiel schon gespielt gegen irgendjemanden und hab gnadenlos verloren.
Ähm, aber da kann man sich da immer noch ein paar Tricks abgucken. Ja, das, das würd ich gern mal, das würd ich gerne.
Ja, das machen wir mal.
So ein kleines, ist so ein kleines, nettes Spiel, äh, irgendwie, wer Worms kennt, vielleicht, vielleicht muss man noch kurz erklären für die, die es nicht kennen, diese Reihe oder wissen, wie das geht.
Es ist quasi so ein, wie so eine Art Ballerburg, wer, wer, für die, für die ganz Alten unter euch, die vielleicht, äh, noch diese, diese alten, äh, Atari-Spiele kennen.
Also, ähm, es sind auf einer Karte, die so, äh, die, wie soll ich denn sagen, ist halt alles 2D, ähm, meistens sind's Inseln und links und rechts oder zwischendrin ist Wasser.
Da sind kleine Würmer, Regenwürmer platziert, die halt krasse Waffen haben, irgendwie so, äh, ich glaub, die Standardwaffe ist so ne Bazooka.
Und, ähm, es gibt aber auch ganz absurde Waffen, wie eine heilige Handgranate oder ein Schaf, oder eine alte Frau.
Und bei dem, bei dem, bei dem WMD sind noch, noch krassere Sachen, also irgendwie, du kannst einen Meteoritenschauer irgendwie machen und keine Ahnung was alles.
Ähm, und Ziel ist eigentlich, dass deine Würmer, und du hast normalerweise, keine Ahnung, so 3, 4, 5, ähm, dass die, dass, dass bei deinem einer mindestens einer übrig bleibt und die anderen alle weg sind.
Und die haben halt, äh, so Lebenspunkte, die dann halt weggehen oder man kann sie auch ins Wasser werfen.
Und du musst auch die Windrichtung dann so ein bisschen mit einrichten.
Genau, Windrichtung ist bei bestimmten Waffen mit entscheidend, ähm, ja, es ist, es ist echt, ist ein witziges Spiel und, äh, ich glaub, das würd ich auch im Stream gern mal spielen.
Also, vielleicht auch, vielleicht auch mit der Community. Ich hab gesehen, da kann man Multiplayer, glaub ich, bis zu acht Leuten oder so.
Das ist, glaub ich, dein völliges Chaos, äh, aber Chaos ist gut.
Also, wenn, wenn, wenn du mal wieder Lust auf LAN-Party hast, so wirklich vor Ort, dann lass uns nachher mal noch quatschen.
Ja, aber ich bin auch im Stream dabei, also, auf jeden Fall.
LAN-Party vor Ort, das klingt irgendwie weird.
Krass, ne? Also, gerade noch so, ne, du hast auch Corona geschädigt, wie wir alle sind.
Ja, ich glaub, äh, ja, lass uns, lass uns da mal drüber reden, ich würd gern mal wissen, ob das überhaupt geht, so, wie ich, äh, muss ich meinen alten Laptop noch mal auskramen, vielleicht, da, da ist noch das, das alte Quake 3 drauf und ein Tournament.
Okay.
Ja, ja.
Alles klar.
Gut.
Können, können diese neuen Maschinen ja nicht.
Ja, fertig, genau, so, also, das ist mir über den Weg gelaufen, fand ich witzig, dachte ich mir, ähm, spielen wir mal, reden wir mal kurz drüber in der Retro.
Wunderbar.
Dann kommt ...
Die Property der Woche.
Sogar mal grammatikalisch zurecht ...
Ja, man, Zug drauf heute, hey.
Äh, die Property der Woche heute ist, oder in dieser Woche ist, äh, die, wie soll ich sagen, ich hab vorhin zum Konstantin schon gesagt, das ist der kürzeste MDN-Eintrag, der mir jemals untergekommen ist.
Auf meinem Monitor ist, äh, ist der Eintrag so kurz, dass ich ohne zu scrollen schon den Browser-Compatibility-Chart sehen kann, der ganz unten bei diesen Artikeln, ähm, meistens ist.
Und zwar geht es um, ähm, Document Current Script. Ähm, und warum reden wir da drüber?
Weil ich da vor kurzem, ähm, durch einen Arbeitskollegen drauf gestoßen bin und hab gedacht, hä? Also, er so auch so, ah, krass, das gibt's. Und ich so, ah, das kannte ich auch nicht, das gibt's, glaub ich, schon voll lange.
Lass mich mal raten, was das ist, weil ich hab's mir nicht angeschaut.
Ja, rat mal.
Ich, ich, ich, ich glaube, das gab's mal ganz früher, als man das sowieso noch häufiger gemacht hat als heute. Bei Inline-Script-Blöcken kann ich damit, ähm, da krieg ich das Skript-Element, das HTML-Element zurück, ne?
In dem, von dem Skript, in dem ich gerade, dass ich gerade ausführe.
Ganz genau.
Ja, und dann kann ich zum Beispiel damit den, den Skript-Block irgendwie ersetzen durch was anderes, äh, theoretisch.
Ich weiß gar nicht genau, wofür man's braucht.
Also, das wäre so der einzige Anwendungsfall jetzt erstmal, der mir so, äh, auffällt.
Mir fällt, mir fällt auch so mit ...
Oder, oder, oder, dass du vielleicht Attribute an dem Skript-Block irgendwie draufsetzt.
Du könntest Attribute, du könntest zum Beispiel Async irgendwie, irgendwie sowas, könntest du ...
Aber, aber, aber geht das, geht das nur bei Inline-Scripts, oder geht das auch mit Skript-Source tatsächlich?
Weil ...
Ähm, das geht, glaub ich, nur mit, das sind Skript-Elemente tatsächlich.
Ach so, äh, ah, du meinst, dass ich's in das Skript ...
Aber ich kann ja auch Skript erzählen.
Oh, das weiß ich tatsächlich nicht.
Das müsste man ...
Das müssen wir mal ausprobieren, ja.
Das müsste man, äh, wenn wir jetzt im Stream wären, würd ich's jetzt schnell ausprobieren.
Ähm, das, das reicht ihr uns nach in den Kommentaren, glaub ich.
Aber guck mal, also, in dem, in dem Examen steht ja document.currentscript.async.
Und wenn, und Async macht ja nur Sinn bei nachgeladenen Skripts, ne?
Äh, ja, das kann ja aber, das kann ja aber trotzdem, ähm, im Skript-Tag kann ja also drinstehen.
Und das kann ja sein, dass es das ausliest.
Aber warum sollte ich das auslesen wollen, wenn's gar keinen Sinn macht?
Also, also, das deutet für mich schon darauf hin, dass man wirklich auch, äh, ja, hab ich's noch nie ausprobiert, ähm, aber vielleicht funktioniert das ja.
Ist ein verrücktes Ding.
Ähm, was, weiß ich, wie gesagt, Anwendungsfälle, ich wär, ich wär interessiert, wofür man das sinnvollerweise braucht.
Ich fand's ne witzige Sache, weil ich so dachte, ah, ist wieder so ein, so ein altes Ding, was man einfach, was man vergessen hat oder nie wusste, dass es das gibt.
Genau, das war's schon.
Der, der, der Internet Explorer taucht hier natürlich gar nicht mehr auf, jetzt will ich auch noch kurz, äh, gucken, bei Can I Use, konnte der das schon?
Weil das, ich meine, das wäre wirklich was ganz altes, oder?
Nee, tatsächlich, Internet Explorer 6 bis 10 und 11 konnte das alles nicht.
Was?
Ja, krass, ich dachte, das wäre wirklich, wenn dann so aus diesen Uhrzeiten, wo man das noch, äh, wo man eher sowas gebraucht hätte, ne?
Eher sowas gebraucht hätte, ja.
Okay, krass.
Und Chrome kann es erst seit 29?
Mhm.
Aha.
Okay, interessant.
Ja, dann bin ich echt gespannt, wenn das erst so spät dazugekommen ist, dann muss es dafür einen Anwendungsfall geben, der sich uns jetzt noch nicht erschlossen hat.
Also, falls ihr da was findet, sagt mal Bescheid.
Oder wenn ihr da was wisst, schon mal...
Früher war das, war das so, dass man da irgendwie das, das, äh, das letzte Element, das zu dem Zeitpunkt der Ausführung gerade im DOM war, das hat man dann genommen.
Weil, ne, das wurde ja von oben nach unten durchgearbeitet.
Ja.
Und wenn du dann ein Inland-Skript hattest, konntest du es so machen.
Aha.
Als Beispiel ist hier irgendwas mit, mit so Werbezeug, äh, eingedingst, ne?
Also, dass du quasi, du hast nur ein Skriptblock, hier soll die Werbung sein und dann ersetzt wirklich das Skript, dieses Skriptblock durch das Bild oder iFrame oder was auch immer, was da am Schluss dann sein soll.
Hier könnte ihre Werbung stehen.
Sehr schön.
Gut.
Ja, das war doch mal flott.
Okay, das war echt fix.
Dann geht's weiter.
Hier ist WWS IV mit dem Tagesthema.
Oh Gott, ey, wir haben einen Zug drauf heute, ey.
Das ist Wahnsinn, mein Bier ist noch gar nicht leer.
Also, ich meine wirklich beim Thema.
Ja, mein Bier ist auch noch dreiviertel voll.
Ja, unser Thema heute, ähm, sind, und da haben wir auch im Stream schon drüber gesprochen,
und ihr könnt auch gerne mal bei uns im Stream vorbeischauen auf Twitch.
Wir streamen da, äh, vielleicht am Freitag wieder, glaube ich.
Am Freitag, also ich weiß noch nicht, wann die Podcast-Folge jetzt veröffentlicht wird, je nachdem, wie schnell ich da bin.
Äh, aber wahrscheinlich, äh, könnte sein, dass der Stream schon gewesen ist, äh, bis die Folge rauskommt.
Genau, wir werden es sehen.
Ähm, auf jeden Fall geht es heute darum, ähm, wir haben uns wieder die State of CSS-Umfrage angeschaut,
und wir wollten die jetzt diesmal nicht komplett durchmachen, weil wir das ein bisschen langweilig fanden.
Und, äh, deswegen haben wir uns nur die Eigenschaften angeguckt, die jetzt neu in der Umfrage drin waren.
Und, ähm, da sind teilweise sehr, sehr, sehr neue Sachen dabei und teilweise uralte Sachen dabei.
Ähm, und wir wollten einfach mal so ganz grob durch die Liste durchgehen, ähm, und so ein bisschen erklären, was sie tun.
Ähm, und, äh, wir gehen jetzt nicht extrem in die Tiefe bei allem.
Es gibt, manche davon sind sehr einfach erklärt, manche davon brauchen sehr lange Artikel, um abschließend erklärt zu werden.
Ähm, wir wollen mal so ein bisschen dran kratzen, also so, so ein kleines, kleines Zuckerl mitgeben.
Überbleckrand, anlegen.
Genau, dass, dass man, dass man, äh, vielleicht dann sagt, ah, stimmt, da gab's doch mal was.
Ähm, und dann kann man sich selbst, auch selbst nochmal irgendwie den, den Artikel in der Tiefe durchlesen.
Werden wir auf jeden Fall einige Artikel, äh, in die Shownotes packen.
Nicht nur MDN diesmal, sondern auch so ein paar Demos.
Gut, dann, äh, fangen wir doch mit dem Ersten an, oder? Voll innovativ.
Wir machen einfach wild durcheinander, also wir, das ist tatsächlich so in der Reihenfolge, wie sie in der Umfrage aufgetaucht sind.
Und, ähm, die Umfrage, äh, genau, da sind die mit New markiert, also dann konnte man irgendwie erkennen, das sind die, die jetzt irgendwie in der Umfrage hinzugekommen sind.
Genau, und das Erste wäre, achso, ja, wir haben es nicht abgesprochen, wer was macht, ne? Wir machen einfach, wie es kommt.
Genau, und Object, Object View Box ist das Erste. Ähm, war auch für mich tatsächlich neu.
Und da hast du einen Artikel verlinkt, der das eigentlich schon ganz anstaulich, äh, mit leckeren Brownies, äh, verdeutlicht, was man da machen kann.
Und es gibt auch später nochmal eine andere Property, wo, wo, wo das dann das gleiche in CSS quasi ist, ne?
Äh, äh, ja, was ähnliches.
Ja, genau. Also sagen wir mal, was das ist, also, ähm, oder vielleicht, was man sieht als, als Beispiel, ähm, da gibt's ein, ein Bild, äh, von einem Teller mit Brownies.
Und man möchte jetzt aber nur den Ausschnitt mit den Brownies haben.
Also klar, was macht man? Man schneidet in Photoshop oder dem, äh, anderen Grafikprogramm, äh, der Wahl, äh, den Ausschnitt raus und tauscht das Bild aus, ja?
Aber, ähm, wär's nicht cool, wenn man das Ganze auch direkt im Browser machen könnte, also den Bildausschnitt zu verändern.
Was ja dann auch den schönen Vorteil hat, dass man das auch irgendwie bei Hover machen kann, zum Beispiel, da rein zu zoomen oder, äh, fallen bestimmte anderen noch, äh, tolle Beispiele ein, was man, was man mit alles machen kann.
Zoom zum Beispiel, ne? Wir haben einen Shop, ähm, und ich, ne, wie man das auch bei Amazon oder so kennt, ne, ich klicke da drauf und dann hab ich so eine vergrößerte Vorschau
und kann dann durch Mausbewegung da in dieser Vorschau, ähm, in dieser Vergrößerung drin, drin rumscrollen.
Und, äh, das macht eben diese Property.
Ja, ziemlich coole Sache. Also das ist auch wieder sowas, wo, äh, im Prinzip, äh, Best Practices, die Leute sich erarbeitet haben und von Hand gebaut haben, jetzt quasi in Standard den Weg gefunden haben in Form von einer Property.
Finde ich ziemlich coole Sache. Äh, dann machen wir doch gleich weiter mit, äh, Viewport Percentage Length Units.
Ähm, das finde ich, das finde ich eine ziemlich coole Sache. Nachdem ich verstanden hab, was es ist, hab ich gedacht, ah, geil, das, äh, das, äh, das braucht man doch.
Ähm, und zwar, äh, die Leute, die schon mal mobile Webseiten entwickelt haben, die kennen eventuell das Problem, äh, dass man vielleicht wissen möchte, wie hoch der Viewport ist.
Und dann könnte man sagen, ja klar, kein Problem, äh, nimmst du 100 VH, äh, and you're good to go, ne? Also das ist die Höhe.
Aber, äh, bei so, bei, bei mobilen Browsern hast du halt oft das Problem, ähm, dass da das nicht richtig ausgerechnet wird, weil die Browser das, das verändern, die Größe.
Also du hast noch irgendwelche Leisten oder, ähm, auch das Keyboard, ne, das, das natürlich hochplöppen kann.
Genau, ähm, beim Scrollen, äh, wird ja oft irgendwie dann die Adresszeile klein oder ganz rausgescrollt.
Also das heißt, eigentlich ist es kein, kein, äh, kein, äh, kein, äh, ja, kein statischer Wert, so wie es angezeigt wird momentan mit VH, ähm, sondern es ist ein dynamischer Wert.
Und, ähm, jetzt gibt es drei neue Werte, die dem Rechnung tragen sollen, wie die Realität da aussieht, ähm, nämlich L, also wenn wir jetzt bei VH bleiben, ähm, weil das ist das Interessantere, es gibt nämlich, ähm, auch VW, äh, es gibt L, VH für, äh, The Heist.
Der Longest, äh, The Longest, genau, also die größtmögliche Ausdehnung davon.
Die ich jemals haben kann, also sprich, äh, komplett, wäre da eine komplette Bildschirme, oder?
Oder können da auch vielleicht schon wieder Elemente, die quasi immer da sind, äh, mit eingerechnet sein?
Genau, also ich glaube aber, Highest Possible, also das bedeutet eigentlich, dass es, wenn wirklich alles aus dem Weg ist, ja, also wenn gar keine, wenn ich, wenn ich, wenn ich vollen, die volle Größe meines, meines Models,
Mobile Displays zum Beispiel zur Verfügung habe, weil ich halt jetzt gerade weggescrollt habe, dann gibt es SVH, das ist die kleinste mögliche, der kleinste mögliche Platz, also wenn alles da ist, keine Ahnung, ich weiß gar nicht, ob Keyboard dazu zählt, aber wahrscheinlich schon, ähm, aber auf jeden Fall irgendwie, alle, alle Toolbars, Browserzeilen, keine Ahnung was, ähm, und dann gibt es DVH, das ist Dynamic, für den jetzt im Moment vorhandenen Platz.
Das heißt, das ist das, was man in den meisten Fällen eigentlich immer haben wollte, man will den aktuellen, die aktuelle Höhe haben, wie es jetzt gerade ist, und dieser Wert verändert sich dann quasi, beziehungsweise, nee, 100 ist dann immer wirklich 100 Prozent des aktuellen, also egal wie, wie hoch das gerade ist, das passt sich dann dynamisch an.
Also wenn ich zum Beispiel jetzt irgendwie, ich hab ein Hero-Bild und das soll immer die sichtbare Fläche einnehmen, ne, dann hätte ich das Problem, wenn ich das einfach nur mit VH mach, also 100 VH und mit Auto, ähm, als Hintergrundbild, ähm, dann würde die Tastatur dann trotzdem drüber liegen können, ne, und wenn ich das eben mit dem verfügbaren Platz mache, dann, und die Tastatur geht auf, dann klappt auch dieser Hero, wird dann quasi kleiner und, äh, und nimmt dann trotzdem den sichtbaren Bereich noch ein.
Wenn ich das in dem Artikel, ähm, den wir auch noch verlinken werden, hier von, von dev.to richtig verstanden hab, hat, ähm, Chrome das mal so gemacht, dass quasi VH dynamisch war, ursprünglich, und, äh, aber in Safari war es wohl seit 2015 so, dass es statisch ist, und irgendwann haben sie es angeglichen mit Chrome.
Und seitdem ist es statisch und hat dann quasi keinen Wert mehr. Von daher finde ich das, äh, ich finde es interessant, weil eigentlich hätte mich, mich persönlich nur das Dynamische interessiert.
Aber interessant, man weiß nicht, was für, was für Anwendungsfälle das noch haben kann, finde ich interessant, dass es auch, äh, LVH und DVH, also eben auch LVW theoretisch und DVW, ich weiß nur gar nicht, ähm, wie, was für Fälle es geben kann, dass das sich ändert.
Da bin ich mir gar nicht, weil da müsste ja eine Toolbar von rechts oder von links reinfahren.
Oder da der, der Space, der wird eigentlich ...
Könnte, du hast doch mal, du hast doch mal so einen neuen Browser gezeigt, der irgendwie Dinge anders machen will, wo dann irgendwie Tabs links sitzen und so, äh, im Stream, ne?
Also wäre das ja vielleicht, und da war ja auch, dass, dass man diese Tabs eben einklappen kann und dann nur noch die Faf-Eigens hat und so, ähm, wäre zum Beispiel ein Anwendungsfall dafür.
Genau, der Browser, und da hab ich, weil ich den vor kurzem noch mal, äh, gesucht hab, weil ich nicht mehr wusste, wie er hieß, ähm, er heißt ARC-Browser, egal, das nur so am Rand.
Das kannst du vielleicht auch noch in die, äh, zu den Links dazu, dann packen wir das auch noch in die Shownotes.
Dann haben wir auch die Podcast-HörerInnen dazu.
Genau, der ist immer noch nicht, äh, ich konnte ihn immer noch nicht ausprobieren, weil er immer noch, äh, irgendwie, äh, Invite-Geschichte ist, wo ich noch keinen Link bekommen hab.
Ihr wisst's, ne? Ihr kennt's.
Überall trägt man seine E-Mail-Adresse ein, äh, um irgendwelche Invite-Codes zu kriegen oder sowas.
Und dann kriegt man den Invite und zwei Monate später wird's dann öffentlich, so wie bei Dallin.
Ich glaub, manche machen einfach nur ein cooles Konzept, ähm, um E-Mail-Adressen einsammeln zu können.
Die wollen, die entwickeln die Software, die machen nur ein geiles Video.
Ja, wer weiß, also, äh, fänd ich, fänd ich, äh, ja, ne geile Strategie.
So, warte mal, das ist da, da sind wir richtig.
So, okay.
Gut, also, ich glaub, das haben wir, also, damit sind wir durrisch.
Gut, dann, äh, kommen wir zum Media-Queries-Range-Kontext.
Oder ich hab's auch gefunden als Range-Syntax, äh, bei Can-I-Use.
Und das ist eigentlich auch, äh, so Syntaktik-Sugar nur, ne?
Also, du, du kannst ein Media-Queries-Add-Media, ähm, wenn du da, wenn du jetzt vorher einen bestimmten Bereich definieren wolltest,
dann hast du's halt kombiniert, Add-Media, dann Min-Width 100 Pixel, and Max-Width 1900 Pixel.
Und man kann jetzt mit dieser neuen Syntax einfach sagen, Add-Media 100px kleiner gleich Width kleiner gleich 1900 Pixel.
Dadurch wird, wird ein bisschen direkter sichtbar, ne?
Der, der, die, die Breite, die ich anstrebe, liegt zwischen diesen 100 Pixel und den 1900 Pixel.
Also, ähm, ja, ist einfach ein bisschen übersichtlicher und man muss nicht irgendwie so rumdenken mit Kombinationen und, äh, Min und Max und wie auch immer.
Finde ich eine cool, ziemlich coole Sache. Also, das, finde ich, dann liest sich deutlich intuitiver.
Ja, ja.
So, von, von, von meinem Gefühl her jetzt. Und, äh, frage ich mich, warum das nicht schon immer so war.
Ja, hätte auch der Standard sein können, ja.
Ja, hätte der Standard sein können. Aber ich meine, man muss auch überlegen, Media-Queries sind schon ganz schön alt jetzt aus heutiger Sicht.
Also, ich erinnere mich noch ...
Für mich, ich weiß noch, wie neu das war und wie toll das war, dass man so, so einen Einfluss plötzlich hatte.
Ja, ich, ich erinnere mich noch, ich erinnere mich noch ganz genau, ähm, wann ich zum ersten Mal gesehen habe, so in echt, wie das funktioniert.
Und das war, das, das war, alle haben, das klingt, aus heutiger Sicht klingt es lächerlich.
Ich war da auf der Web-Tech-Konferenz in Mainz und das war 2010.
Genau, ich glaube, das war meine erste Konferenz überhaupt, auf der ich war.
Und da war der, äh, Michael Jendrychik, manche kennen ihn vielleicht noch von damals, der hat damals viel, äh, viel Web-Design-Blog gemacht.
Der hat auch so, er hat auch ein Buch darüber geschrieben.
Ähm, hat einen Vortrag darüber gehalten und hat das dann gezeigt und er hatte halt, ich meine, damals 2010, du musst es mal noch dazu sagen, da hatte noch nicht jeder ein Smartphone.
Das war, also alleine schon, du warst der Besitzer eines Smartphones, aha, du kannst da Sachen machen und zeigen, die andere nicht.
Ich hatte damals noch keins.
Ich glaube, ich habe mein erstes 2011 gekauft und seine Demo, die er gebaut hat, die war so simpel, ähm, er hatte im Prinzip eine Seite gebaut, die im Hochformat auf seinem Handy,
grün war und wenn man sie dreht, ist es so rot geworden.
Ja, abgefahren, oder?
Magie.
Einfach nur die Farbe, einfach nur die Farbe geändert.
Für rot-grün-Schwäche war es natürlich so, nein, man hat es schon gesehen, ich war da, ich saß da irgendwie, keine Ahnung, in der dritten, vierten Reihe und alle so, oh.
So ein Raunen, die wahrscheinlich durch den Saal.
Ja, wirklich, wirklich, das war, er hat es natürlich auch noch lustig präsentiert, hat es so ein bisschen übertrieben, so, oh krass, ich zeige euch jetzt, was mega abgefahren ist.
Aber es war wirklich schon so, im Moment so, das ist hängengeblieben bei mir.
Ja, das habe ich, weißt du, ich habe mir viel nicht gemerkt von Konferenzen, aber daran kann ich mich ganz genau erinnern, dieses Media-Queries, das ist jetzt ein Ding, das kommt jetzt alles, und damals war halt noch, naja, du optimierst Seiten halt, ähm, keine Ahnung, auf 1024 Pixel Breite oder sowas.
Und es gibt nicht responsive, doch, es gab so ein paar Seiten, die haben so mit 100 Prozent, Wikipedia, ja, Wikipedia war schon immer quasi so eine Art responsive, die haben schon immer irgendwie versucht, die 100 Prozent auszunutzen, da bin ich bis heute kein Fan davon, ehrlich gesagt, das ist, das ist nicht gut für einen Lesefluss, diese ewig langen Zeilen, aber ja, ähm, das war damals, responsive Rap-Design, das kam damals erst, und ja, super, dass sich das jetzt weiterentwickelt, weil das waren genau diese Media-Queries, äh,
mit denen wir es da jetzt heute noch zu tun haben, und ja, jetzt gibt es eine schöne Syntax.
Ähm, genau, so soll ich das, das nächste gerade noch machen?
Ähm, das haben wir auch schon mal angesprochen.
Genau, das haben wir schon mal angesprochen.
Da kann man verweisen auf unsere Folge Nummer 5.
Jetzt sind wir bei was Uraltem, tatsächlich, was, was schon ewig im Standard ist, ich kann gar nicht genau sagen, wie lange, ähm, aber tatsächlich relativ.
Ja, so lange noch gar nicht, also IE9 hatte das, ähm, das erste Mal.
Ja, IE zählt nicht, äh, hast du mal geguckt?
Aber gut, ja, der Chrome und so weiter, die hatten das alle schon.
Naja, Mama, warte mal, ich, ich, ich, äh.
Chrome 4.
Firefox hatte das doch, guck mal, Firefox hatte das in Version 2.
Firefox 2, ja.
In Version 2, also so alt ist das.
Chrome, Chrome zählt für mich gar nicht zu den echten Browsern, weil, weil ich schon da war, bevor Chrome da war.
Gut, ich war auch schon da, bevor IE und Firefox, aber das sind so, da kann ich mich nicht so genau dran erinnern, wann die aufkamen, aber bei Chrome weiß ich ganz genau, seit wann es da ist, ähm, und, äh, ja, deswegen zählt er für mich nicht bei alte Browser.
Der ist für mich, der ist für mich schon New School.
Ähm, aber Firefox Version 2 ist halt schon, für mich ist das sehr alt.
Das ist noch, das ist aus einer Zeit, als Firefox noch so jährlich oder so eine neue Major-Version bekommen hat.
Ja, ja, 3.6 und so war dann irgendwie.
Ja, ja, das war, und dann gab's so Punkt 5er und, ja, das war, das war schon, und neue Browser-Version mit neuen Features, das war ein großes Event und das gab's dann irgendwie nur alle paar Monate oder einmal im Jahr oder so.
Und jetzt ist es eben so, oh, mit Version 2, 2500 haben wir jetzt gerade das Web revolutioniert, kommt im nächsten Abteilung.
Ja, genau, jetzt über 2.500, genau.
Also, aber Current Color, genau, ich hab gar nicht gesagt, was es ist, ähm, mit Current Color kann ich einem anderen, eine andere Eigenschaft innerhalb von CSS die Farbe geben, ähm, die, die Textfarbe, die das schon bekommen hat, die das, oder, nee, muss gar nicht bekommen haben, die Textfarbe vom Element, selbst wenn die, äh, irgendwie vererbt wurde, das heißt, wenn ich jetzt irgendwie, ähm, dem, der Text eine rote Farbe hat von, von, äh, von einem Selektor und ich möchte jetzt, dass der Border die gleiche Farbe kriegt, dann kann ich sagen,
Border Color, Doppelpunkt Current Color, das wird tatsächlich in CamelCase geschrieben, was interessant ist, das gibt's in CSS auch nicht so oft, ähm, genau, das, das ist es im Prinzip schon, das heißt, ich kann diese Textfarbe auch weitere Elemente vererben und wenn die Color geändert wird, dann wird die auch mit geändert bei den anderen.
Ja, also, ich hab da, ich hab die Demo, die ich damals für die Podcast-Folge gebastelt hatte, hab ich nochmal, nochmal verlinkt, da ist einfach nur ein Button in einem Fließtext, äh, der dann halt die rote Textfarbe, äh, erbt, damit man das ein bisschen visuell hat.
So, und das ist tatsächlich ein Ding, wo mich jetzt gar nicht so arg wundert, dass das in der, ah, ich mach's nochmal auf, ja, ist cool, wo mich gar nicht so arg wundert, dass das jetzt in dieser, in dieser Umfrage auftaucht, weil das nämlich sowas ist, ähm, was, ich glaube, immer noch relativ unbekannt ist, obwohl's schon sehr alt ist.
Und es gibt auch nicht so arg viele Anwendungsfälle dafür, meiner, meiner Meinung nach, also.
Inline-SVGs.
Genau, da hatten wir's, da hatten wir's ja auch schon, da hatten wir's ja auch schon, da hatten wir's auch drüber, da, da hat man noch eine zweite Farbe, die man nicht verändern kann, ähm, aber genau, äh, so, es, ich hab selten den Fall, dass ich die Textfarbe und den Border in der gleichen Farbe haben will, oder der Hintergrund und die Textfarbe, sowieso möchte ich niemals in der gleichen Farbe haben.
Ähm, und dann, keine Ahnung, möchte man vielleicht noch ein Gradient, was gibt's denn noch für Möglichkeiten, wo man eine Farbe verwenden kann?
Funktioniert Current Color in Gradients?
Weiß ich nicht, nicht ausprobiert, ich hab nur grad überlegt, was gibt's denn noch für Möglichkeiten, wo man eine Farbe reinkommt?
Also ich hatte tatsächlich mal, äh, vor einer Weile den Fall, vor ein paar Wochen, wo ich wirklich den Border von einem Element gleich der Textfarbe haben wollte, und dann hab ich gedacht, ha, ich hatte schon, ich hatte schon beide Hacks, wer hatte hingeschrieben, dachte ich, haha, nee, da kann ich ja Current Color benutzen.
Und dann hab ich's benutzt, einfach nur, weil's geht.
Und nächstes Mal, wenn ich's, wenn ich's refactoren muss, dann, dann muss ich nur einen Wert ändern, sehr gut.
Genau, also nie, aber egal.
Ja, aber egal. Ja, aber ich mein, es ist, ja, warum nicht? Manchmal, man soll ja auch Spaß bei der Arbeit haben, oder?
Genau.
Okay. Gut, das war Current Color.
Jetzt kommt Color Mix, und mit Color Mix kann man zwei Farben ineinander mischen, wie im Farbkasten. Aber, ähm, ist noch experimentell, ne? Das ist wirklich jetzt so was, wirklich Bleeding Edge.
Es ist so Bleeding, dass es, glaub ich, noch in keinem Browser unterstützt ist.
Guck mal, äh, Color Mix.
Äh, ja, alles rot.
Äh, ich hab Color Mix.
Aber wann man in Safari und in Firefox, hinter nem Flag, immerhin.
Es gibt Flags, ja.
Und zwar schon seit Firefox 88, krass. Also schon, schon sehr lange jetzt, hinter nem Flag. Ähm, ja, wie funktioniert das genau mit dem Mix? Also Color Mix, also CSS-Funktion, und, äh, ich kann dann sogar, äh, Farbräume angeben.
Also in LCH, in SRGB. Und dann kann ich sagen, hier, den Farbwert 20% und weiß, äh, mischen. Oder 40% von dem Farbwert und, äh, von dem anderen. Also es ist halt schön, um irgendwie, ähm, so ein Farbschema abzubilden. Ähm, und, äh, sich nicht die Werte irgendwie selber vorher mischen zu müssen, quasi, und dann die Hex-Werte zu nutzen, sondern halt zu sagen, ähm, ich hab einen Basiswert, den ich vielleicht sogar in einem, in einem Custom Property, ähm, abspeicher, der vielleicht sogar veränderbar ist aus irgendwelchen Gründen.
Und dann wird dieses Farbschema eben angepasst.
Genau. Gut, dann, äh, kommen wir zu, wir bleiben bei den Farben. Es kommt noch ein bisschen was mit Farben, seh ich grad. Ah ja, wo, noch einiges.
Mit den Farben, da haben sie, da haben sie einiges hinzugefügt.
White Gamut Colors. Ähm, jetzt muss ich grad mal gucken. Ähm, da hab ich jetzt, hab ich gar nicht geguckt. Bei Can I Use. Ähm, ah ja, okay, gut. Das ist auch noch eher so Experimental.
Ähm, genau. White Gamut Colors sind quasi Farbwerte, die ich angeben kann in bestimmten Farbräumen, in die, die halt, äh, breiter sind als sRGB, was der, was der Standard Farbraum fürs Web ist.
Also, ähm, also mehr Farben. Ähm, und zwar, ähm, es gibt da verschiedene Varianten, ähm, wie, wie das, äh, erreicht werden kann. Und White Gamut Colors ist im Prinzip, ähm, dass ich, wenn ich eine Farbe angebe, dass ich den Farbraum davor schreibe und in Klammern dann den Wert, je nachdem, wie dieser Farbraum den Wert erwartet.
Das sage ich extra deswegen so, weil, äh, die Notation bei den unterschiedlichen Farbräumen durchaus unterschiedlich sein kann. Also, äh, wenn man bei RGB gewöhnt ist, dass man irgendwie, ähm, das mit Hex zum Beispiel schreibt, kann die Notation, ist die Notation bei LCH zum Beispiel ganz anders, wobei ich jetzt grad nicht mehr auswendig weiß, wie sie geht.
Aber da gibt's noch zum Beispiel, also, es gibt dann LCH, äh, was man, was man verwenden können soll. Es gibt Lab, äh, OK LCH und OK Lab. Ähm, das ist aber auch noch relativ weit entfernt. Ähm, was auf jeden Fall in Safari schon funktioniert, äh, was man schon ausprobieren kann oder was, was ich auch schon getestet hab, ähm, wo ich auch mal eine Demo gebaut hab, ähm, ist das Ganze mit, äh, der Color Function zu machen.
Da kannst du nämlich auch, äh, den Farbraum reinschreiben und dieser neue Farbraum, der schon funktioniert in Safari, ist der, äh, Display-P3-Farbraum.
Ich hab gerade mal versucht auf meinem Android-Handy, aber da geht's natürlich noch nicht, weil Chrome und, äh, nicht, äh, mit, mit, mit Flag halt. Äh, deswegen sieht bei mir das, äh, in dieser Demo das Grün und das Rot gleich aus.
Leider. Aber du müsstest auf dem iPhone das wahrscheinlich schon sehen, ne, den Unterschied.
Auf dem iPhone seh ich's, ähm, und, äh, ja, auf dem iPhone funktioniert's auf jeden Fall.
Und, ähm, auf dem Monitor, ich bin mir grad nicht sicher, ob auf meinem MacBook-Monitor, ob das da korrekt ist.
Ich glaube aber auf dem, auf dem eigenen, da kommt's dann echt drauf an, ob du einen anderen Monitor angeschlossen hast und was der für einen Farbraum unterstützt,
ob, wie, wie der kalibriert ist, da, da kommen viele Sachen ins Spiel.
Ähm, ich glaube, auf dem MacBook-eigenen Monitor geht das auch.
Das unterstützt auch schon den P3-Farbraum.
Genau, also, äh, das ist, ja, diese, diese Demo, da könnt ihr dann, müsstet ihr relativ schnell sehen können, ob euer Gerät das unterstützt oder nicht.
Äh, wenn es das nicht unterstützt, diese, äh, wir haben da so eine, so eine Code-Pen-Demo, die wir auch noch verlinken in den Shownotes.
Ähm, wenn die beiden Farben, die übereinander sind, ähm, gleich aussehen, also zweimal das gleiche Grün,
Ähm, dann wird es nicht unterstützt, äh, bei euch, äh, und ansonsten wird auf jeden Fall irgendwie was unterstützt.
Oder es wird irgendwie hingefakt, das könnte ich mir auch vorstellen, dass bestimmte Browser da irgendwie sagen, naja, sie waren was anderes.
Aber irgendwie, wer weiß, wer weiß.
Okay.
Das nächste finde ich, finde ich ganz cool, Relative, äh, Colors, das hatten wir auch im, ähm, im Stream, und zwar hatte uns da der, oh, weißt du es noch, wer es war?
Nachdem wir das im Stream behandelt hatten und die Umfrage gemacht haben und genau diesen Punkt hatte, äh, kam hinterher jemand per Twitter und hat gesagt, ah, ich hab da gerade ein Problem, ich versuch gerade, ähm, da zwischen zwei Farbräumen zu konvertieren, ich hab da einen Hex-RGB-Wert und ich will den irgendwie, ähm, mischen, ne?
Ja, ich kann noch mal, ich kann noch mal gucken, es war, äh, äh, oh, oh, ich muss weiter runter scrollen, zu viele Notifications.
Äh, hä, ich glaube, ich, woher finde ich es jetzt gerade doch nicht, auf die Schnelle.
Also jedenfalls ist das im, im, äh, CSS-Color-Module.
Ah, es war Sky-Loki.
Level 5, Sky-Loki war es, ja.
Ja.
Ähm, und da kommt das jetzt.
Und, äh, das Ding war, also ich hab ne, ich hab ne, äh, Custom-Property und da drin ist irgendwie ein Hex-Wert definiert und den will ich jetzt benutzen, um, äh, genau, um Transparenz, äh, mit der RGBA-Notation zu machen, ne?
Also um die Farbe irgendwie abzusoften.
Und das wäre schön, wenn es ginge, aber das geht leider noch nicht und das wird aber kommen mit dieser neuen Spezifikation, wo ich eben sagen kann, nimm diesen Farbwert aus dem und dem Farbraum und nutze ihn in dem anderen Farbraum.
Also zum Beispiel könnte ich auch statt Hexenotationen wirklich Blue als Farbwert, diese benammten CSS-Farben nehmen und jetzt will ich aber das Blue irgendwie zusammenmischen mit 80% und dann kann ich sagen RGB, also die RGB-CSS-Funktion, from war dann den Custom-Property-Namen und dann RGB-80%.
Das heißt RGB nutze ich einfach wirklich als Buchstaben, um diese einzelnen Farbkanäle einfach zu übernehmen, wie sie sind und kann dann sagen, mit 80% Transparenz.
Ich könnte aber auch zum Beispiel auch sagen, übernehmen nur R und G, aber halbiere den Blauwert, indem ich das mit der Kalk-Funktion noch zusätzlich kombiniere, also Kalk B durch 2.
Also RGB sind wirklich Variablen, die ich dann wiederum benutzen kann und das ist echt eine coole Sache, also dass ich zum Beispiel ein Eingabefeld habe mit einem Farbwert und das wird dann automatisch übernommen durch eine Custom-Property und dann aber wiederum weiter verwurstet und zusammen mit Colormix natürlich dann später auch werden da viele neue Möglichkeiten entstehen, mit Farben zu hantieren.
Genau, dann, wir rattern jetzt hier durch, wir haben auch einiges vor uns, genau, aber wir ballern jetzt einfach weiter.
Als nächstes hätten wir Gradient-Colorspaces, das mache ich auch ganz kurz, das ist dann eine Möglichkeit, die neuen Colorspaces, die halt mehr Farben enthalten, auf so HDR-Monitoren, nenne ich das jetzt mal,
das auch für Gradients zu verwenden und das ist gerade deswegen besonders hilfreich, weil gerade wenn man Verläufe hat, Farbverläufe mit relativ wenig Unterschied zwischen Start- und Zielfarbe,
dann konnte es durchaus passieren, dass man so einen Treppeneffekt hatte, weil einfach nicht genug Farben dazwischen sind, zwischen Start- und Zielfarbe.
Und mit den neuen Farbräumen auf, ja, besseren Monitoren ist die Gefahr dann, wenn du so einen neuen Farbraum dann dafür nimmst, deutlich geringer, dass du so einen Treppeneffekt kriegst.
Also das ist echt eine coole Sache, wie gesagt, da müssen wir noch ein bisschen warten, bis es in den Standards ist, aber auch, man braucht halt auch den passenden Monitor dafür, ne?
Also man kann nicht garantieren, dass das dann bei jedem gut aussieht und wenn man selbst so einen tollen Monitor hat, kann es natürlich auch, muss man, da wird es dann auch blöd, muss man halt eigentlich auch mal mit einem richtigen Scheiß-Monitor testen,
um zu sehen, ob man da nicht irgendeinen Bockmist eingebaut hat, den man gar nicht sehen möchte.
Also da muss man, muss man glaube ich dran denken.
Aber es wird spannend, wenn dann wirklich mehr Monitore so Farbumfänge unterstützen und das auch bei allen Handys hingegangen und gäbe ist.
Ich bin mal gespannt, ob das, lass uns mal eine Vorhersage machen.
Glaubst du, dass in zehn Jahren alle Monitore so erweitert mehr als sRGB anzeigen können?
Ist das so ein Standard dann?
Alle Monitore ist, sag ich mal, alle neu verkauften vielleicht, ja.
Also nicht alle existierenden.
Nein, das meine ich ja.
Ja, zehn Jahre halte ich schon für realistisch, ja.
Ich könnte mir vorstellen, dass die Billig-Monitore so bleiben, weil die tun es ja auch.
Ja, gut.
Ja, wird vielleicht immer so ein bestimmtes Segment.
Klar, weil es ist halt wahrscheinlich auch ein Kostenfaktor.
Vielleicht gibt es in zehn Jahren auch gar keine Monitore mehr.
Vielleicht auch das, ja.
Das war natürlich auch mein Gedanke, so, naja, okay, schwierig bei der Aussage,
weil wer weiß, ob wir nicht bis dahin alles holographisch haben.
Naja, mal gucken, lassen wir uns überraschen.
Oder ein Meteorit auf die Erde gespalten hat und du auf der einen Seite warst und nicht auf der anderen.
Oder es dazwischen so warm ist, dass wir alle von den Monitoren verbrannt sind.
Können wir den Podcast dann nur machen, wenn unsere zwei Erdhälften Sichtkontakt haben, zufällig,
damit wir eine Richtfunkverbindung aufbauen können.
Stannend.
Ja, achso.
Magst du Scrollbehavior noch machen?
Dann würde ich das nächste machen, wo ich die Demo gebastelt habe.
Achso, ja, gerne.
Also Scrollbehavior, das habe ich auch gerade bei einem Projekt gerade wieder gesehen.
Kann ja mal ein bisschen auf die Füße fallen.
Scrollbehavior ist eigentlich, man kann mit CSS steuern, wie zum Beispiel zu einem Ankerlink gesprungen wird.
Wenn ich jetzt einen Ankerlink auf der Seite anspringe, also mit einem Link, der zu einer ID springt und zu einem anderen Bereich der Seite scrollt,
dann ist das meistens, wenn man Scrollbehavior nicht angeschaltet hat, so ein wirklich ganz harter Sprung, so von A nach B.
Ich drücke drauf, zack, bin ich an einer anderen Stelle.
Und mit Scrollbehavior smooth ist dann tatsächlich eine Scrollanimation, die da stattfindet.
Und ich weiß gar nicht, ob man da Einfluss drauf nehmen kann.
Ich glaube, vom CSS aus nicht, also nicht auf die Geschwindigkeit, das ist dann halt so, wie es ist.
Aber es ist eigentlich so, ich glaube, das ist was, worauf man sich einigen kann, so von der Animation her, es ist nett.
Und dadurch, dass man es mit einer Zeile CSS hinzufügen kann, ist es eigentlich, was, ich finde es eigentlich immer ziemlich gut,
wenn ich nicht aufgehalten werde, wenn ich nicht das Gefühl habe, das bremst mich jetzt.
Finde ich es immer sehr gut, wenn ich sehe, in welche Richtung geht es denn.
Weil auf einer langen Seite, wenn ich da auf den Ankerlink drücke, habe ich keine Ahnung.
Oder springst plötzlich sonst wo hin.
Ob ich hoch oder runter gehe, das weiß ich vielleicht gar nicht, wenn ich irgendwo in der Mitte war vorher.
Also von daher finde ich, die Animation, die hilft auch, um sich zu orientieren, wo es hingeht.
Und das ist ein ganz billiger Weg, die zu erreichen.
Also Scrollbehavior smooth habe ich bei mir im aktuellen Projekt eingesetzt, finde ich eine sehr gute Sache.
Gut, dann kommen wir auch schon zu, wir bleiben bei den Scrollbars, Scrollbar Gutter.
Und das ist eine Sache, da habe ich mich echt gefreut.
Ich wusste das auch nicht, das ist völlig an mir vorbeigegangen tatsächlich.
Aber es ist ein Problem, das mich schon seit mittlerweile Jahrzehnten beschäftigt.
Und zwar, da habe ich im Stream live eine Demo dazu gebaut.
Ich glaube, da sieht man es echt vielleicht am besten.
Aber ich versuche es mal zu beschreiben.
Also man hat das Problem, man hat irgendwelche vielleicht vollbreiten Elemente, ein Menü oben an der Seite oder auch der Seitenkontext, der sich da irgendwie mehrspaltig aufspannt.
Und auf manchen Seiten ist vielleicht recht wenig Content.
Also zum Beispiel bei dem MDN-Artikel vorhin, der bei dir auf einen Monitor gepasst hat.
Aber auf anderen Seiten habe ich halt eine Scrollbar, weil die Seite so lang ist, weil da viel Text ist.
Und dann springt halt mein vollbreites Menü oder was auch immer für ein Element ich habe.
Oder vielleicht sogar ist es ein Model und rechts oben ist ein X in der Ecke, wo ich draufklicken kann.
Und das springt eben dann in der Breite hin und her, je nachdem, ob die Scrollbar dazukommt oder nicht.
Also zumindest auf dem Desktop ist das so.
Bei Mobile haben wir ja schon länger, ich weiß nicht, wie es bei iOS ist vermutlich, doch, da sind ja auch diese Balken, die da drüber liegen einfach.
Also da nimmt die Scrollbar keinen zusätzlichen Platz ein, weil man ist ja eh eingeschränkt auf dem mobilen Bildschirm vom Platz her.
Und die liegen dann da drüber, wenn man scrollt.
Und auf dem Desktop ist das nicht so.
Auf dem Desktop haben wir diese, beziehungsweise je nach Browser ist das vielleicht auch so.
Aber zumindest im IE oder auch hier im Chrome ist es eben so, dass ich diese Scrollbalken da habe.
Und dann wobbelt mir dieses Menü.
In der Demo habe ich es, wie gesagt, mit so einem Schließ-X, mit so einem Gefakten da rechts oben noch gemacht.
Das springt dann hin und her und ich muss vielleicht an einer anderen Stelle klicken, als ich das vorher gewohnt war.
Und da gibt es jetzt das Property Scrollbar Gutter.
Und wenn ich das auf Stable setze, dann berechnet der Browser automatisch den Platz mit ein, die die Scrollbar haben würde, wenn sie denn da wäre.
Sprich, das X bleibt an der gleichen Stelle, auch wenn ich hier dieses, das ist ein Tockel eingebaut, so ein Detail Summary mit einem langen Inhalt.
Das bleibt alles an der gleichen Stelle.
Jetzt ist es natürlich ein bisschen unschön, je nachdem, ob ich da vollflächige Bilder oder auch irgendwie einfach nur eine vollflächige Farbe im Hintergrund habe, dass ich rechts und links jetzt aber einen unterschiedlichen Abstand zum Bildschirmrand habe.
Und selbst da haben sie mitgedacht und haben noch ein zusätzliches Value eingebaut, das ich in Kombination einsetzen kann.
Also ich setze es erstmal auf Stable und dann kann ich es noch kombinieren mit dem Keyword Both Edges, also mit Bindestrich Both minus Edges.
Und dann habe ich rechts und links auf der Seite den gleichen Abstand.
Die Seite ist wieder zentriert, aber wenn die Scrollbar dazukommt, wackelt nichts.
Sehr schön.
Sehr simpel.
Und löst ein Problem, das wirklich, früher hat man das gelöst mit, haben wir auch im Stream schon gesagt, Overflow Scroll Y war dann so ein Ding, was man dann gemacht hat, damit es einfach halt immer da ist.
Das hat man auf den Body gesetzt und dann war immer diese Scrollbar da, war aber halt vielleicht ausgegraut, weil ich habe sie gar nicht gebraucht.
Und dann springt zumindest nichts hin und her, aber das kann man sich jetzt sparen.
Und bevor es das gab, war der Hack, glaube ich, dass man die Höhe des HTML und Body Elements Mindesthöhe auf 100% gemacht hat.
Dass der Scrollbar, dass dir quasi der Inhalt immer einen Scrollbalken erzeugt hat.
Ja, also auf 101 quasi, also leicht, so ein bisschen höher.
Ich glaube, 100 hat gereicht.
Der war dann ausgegraut, aber da.
Ja, okay.
Ich habe gerade nochmal nachgeschaut, weil ich mich gefragt habe, wie ist denn das eigentlich jetzt hier bei mir, kann ich denn irgendwie nochmal Scrollbalken so fix einblenden und dann, ich wusste, dass das in den macOS Einstellungen ist, die sind jetzt aber ja komplett neu.
So, die sehen jetzt ganz anders aus als vorher.
Also die letzten, ich habe mir jetzt nochmal von so macOS Jüngern sagen lassen, die es schon lang verwenden, also die letzten 15 Jahre oder so haben die Einstellungen von macOS gleich ausgesehen.
Und jetzt sehen sie anders aus.
Deswegen habe ich erstmal gesucht und zwar, aber das heißt da auch witzig, Rollbalken tatsächlich.
Rollbalken.
Und da kann ich jetzt einstellen, ob ich sie beim Scrollen sehe immer oder automatisch auf Grundlage von Maus oder Trackpad.
Also ich würde jetzt mal annehmen, dass wenn ich eine Maus verwende, dass ich ihn dann sehe und wenn ich ein Trackpad verwende, dass ich ihn dann nicht sehe, weil ich ja dann quasi den Inhalt bewege, so gefühlt.
Aber ist auch egal, fand ich witzig, nur gerade Rollbalken, das Wort.
Ich weiß nicht, ob ich das schon mal gehört habe und wenn, ja, dann, das klingt für mich sehr alt und irgendwie aus einer anderen Zeit, aus der Zeit gefallen.
Rums.
Ja, ich wollte dich aber noch ganz kurz was fragen zu den Scrollbalken. Hast du gerade zufällig bei dir einen Firefox oder kannst du einen aufmachen?
Ich kann einen aufmachen, ja, Moment.
Weil mich würde interessieren, weil das war immer der Browser, der die aufdringlichsten, brutalsten Scrollbalken hatte und ich würde gerne mal wissen, ob das immer noch so ist.
Also Klassiker, du könntest mal Trello da drin aufmachen, da hättest du auf jeden Fall einen horizontalen Scrollbalken oder irgendeine Seite mit Scrollbalken.
Wie breit ist der, wie groß ist der?
Weil mittlerweile sind die ja oft sehr dezent geworden und ich weiß es nicht.
Jetzt nicht arg viel breiter, also ich finde ihn inzwischen eigentlich dezenter als den in Chrome, muss ich sagen.
Aber er ist immer sichtbar, oder?
Ja.
Also es ist nicht so, dass er verschwindet zwischendurch.
Okay.
Naja, also er verschwindet dann, wenn die Seite ihn nicht benötigt.
Ja, genau.
Aber wenn, ja.
Also wenn du scrollbar, wenn du scrollen musst oder wenn du was höher hast, was hast, was höher ist als der Platz,
dann ist er da.
Genau.
Okay, nee, weil, wenn ich das richtig verstanden habe, unter MacOS ist das ganz interessant, kannst du das generell auf Systemebene abschalten oder einschalten.
Also dann machen das die Browser auch mit, egal welcher.
Ich habe nämlich jetzt gerade bei mir geguckt, ob ich einen Firefox-Scrollbalken habe.
Nee, der verschwindet auch, weil ich das halt auf Systemebene generell eingestellt habe.
Vor allem wollte ich einfach nur noch mal wissen, weil ich nämlich in Erinnerung hatte, dass der Firefox da der Schlimmste war früher.
Ich weiß noch, da konntest du in Chrome irgendwie die Scrollbars von Stylen und die waren dann irgendwie in Trello beispielsweise.
Weil da siehst du halt unter Umständen sehr viele Scrollbalken in Trello.
Weil du halt diese Spalten hast und wo die Kärtchen drin sind und immer dann, wenn du mehr Kärtchen hast als der Höhe, dann siehst du bei jeder einen Scrollbalken.
Und das ist wahnsinnig, das nimmt wahnsinnig viel Platz weg und es ist wahnsinnig stressig.
Ja, also das, nur am Rande.
Also da sind wir schon echt weit gekommen.
Und es ist auch tatsächlich noch recht frisch.
Also es ist jetzt in den Chromium-Browsern jetzt ein bisschen mehr als ein Jahr.
Und in Firefox war es erst dieses Jahr, im Februar, dass das veröffentlicht wurde.
Also das ist wirklich, hat lange gedauert, dieses Problem anzugehen.
Aber ich muss auch sagen, ich bin, ich bin, warte, warte, wie, wie, wie sage ich es jetzt am besten?
Ich bin, es gibt kein Scrollrad an der Maus Jahre alt.
Ja.
Das gab es nämlich, das gibt es nicht schon immer, liebe junge Web-Developer.
Es gibt nur zwei Maustasten Jahre alt.
Also es gibt keine mittlere Maustaste.
Und boah, jetzt gibt es eine dritte Maustaste, da kann man dann so scrollen und so, wow.
Also ich könnte nicht mehr ohne Scrollrad und ich könnte auch nicht mehr ohne Seitentasten an der Maus.
Das habe ich mir total angewöhnt, dass ich die verwende.
Das ist schon in Fleisch und Blut übergegangen.
Also ich glaube, wenn mir jetzt jemand eine Maus geben würde ohne Seitentasten,
ich würde trotzdem da drücken.
Und die ersten Mäuse, also da kann man jetzt ungefähr unser Alter abschätzen,
also die ersten Mäuse, die hatten ja sogar nur eine Taste.
Da gab es ja noch gar keinen Rechtsklick.
Aber das weiß ich gar nicht, ob ich so eine mal in der Hand hatte.
Ich glaube auch nicht, dass ich so eine mal verwendet habe.
Aber ich glaube, ich weiß noch genau, wie die erste Maus aussah, die ich jemals in der Hand hatte.
Und ich bin mir ziemlich sicher, dass sie zwei Tasten hatte.
Und ich bin mir ganz 100 Prozent sicher, dass sie kein Scrollrad hatte.
Aber wahrscheinlich noch so eine schwere Kugel.
Ja, natürlich.
Natürlich eine Kugel drin.
Also Laser oder, ja gut, Laser ist ja die nächste Generation schon.
Licht oder keine Ahnung, optische Maus, das gab es ja erst viel später.
Ich kenne das noch mit, man muss da die Fusseln unten an der Kugel raussammeln und so.
Weil wenn die Maus irgendwann nicht mehr ging, dann musst du unten aufschrauben.
Und dann unten raus, an diesen Rädchen, diese festgeklebten Haare und so.
Aber, ein etwas schön, jetzt kriegt ihr noch, wir verquatschen uns schon wieder, egal, aber ihr kriegt jetzt noch schönes Trollwissen fürs Büro.
Falls ihr im Büro seid oder in einer Partnerschaft, die ihr gerne beenden würdet, habe ich hier den absoluten Pro-Tipp für euch.
Ihr braucht dafür kein teures Equipment.
Ihr braucht dafür einfach nur ein Post-it.
Ein ganz gut klebendes Post-it und eine Schere.
So, das ist das, was ihr braucht.
Und ihr schneidet aus dem Post-it ein kleines Stück raus, das gerade reicht, um den Sensor der Maus zu überkleben.
Unten, ja.
Und da klebt ihr dann das Post-it drauf.
Und dann guckt ihr, wie die andere Person, die die Maus dann verwenden will, wie ein Depp versucht, die Maus zu benutzen und sie geht einfach nicht.
Und dann am besten noch in der Farbe des Mausbodens anmalen, damit man es auch nicht gleich sieht.
Das ist natürlich, das ist dann ganz premium.
Ganz schlimm ist, wenn ihr es wirklich hart auf die Spitze treiben wollt, dann malt ihr diesen Sensor mit einem Edding zu.
Das geht auch.
Aber das ist vermutlich irreparabel.
Ja, es beruht dann halt Sachbeschädigungen.
Ich kann auf jeden Fall sagen, ich bin damit schon ganz schön getrollt worden und saß da halt wie der Depp.
Ich glaube sogar mehrfach, ich weiß noch, genau der Kollege, hallo Robert, danke nochmal, das war ein guter Move.
Ich saß da halt wie der Depp und hab gedacht, hä, die ist doch angeschlossen, die leuchtet doch, wieso funktioniert die nicht?
Hä, das ergibt doch gar keinen Sinn, das dauert dann eine Weile, bis man draufkommt, dass man vielleicht mal drunter guckt.
Früher wäre das ein No-Brainer gewesen.
Ja, ja klar, da ist irgendwas mit der Kugel, ja.
Alles irgendwas mit der Kugel, ich mach die Kugel sauber, ich dreh sie rum.
Aber ich hab echt, keine Ahnung, eine Viertelstunde da gesessen und hab gedacht, das kann doch nicht wahr sein, hä, eine Maus geht doch nicht kaputt.
Was, was ist das? Und dann ist es halt einfach nur so ein kleines Stück Post-it, wo dann, glaube ich, der hat, glaube ich, sogar noch was draufgeschrieben, irgendwie so, hallo oder sowas.
Fies, fies, fies.
Also, das ist kleiner Tipp, kleiner Tipp, falls ihr eure ArbeitskollegInnen ärgern wollt oder testen wollt, wie viel die aushalten.
Oder wie gesagt, wenn ihr in einer unglücklichen Partnerschaft seid und die beenden wollt, vielleicht wenn ihr mit einem Gamer oder einer Gamerin zusammen seid, die völlig ausflippt, wenn sie nicht zocken kann, dann ist das, dann würde ich auf jeden Fall,
aber die Edding-Methode empfehlen. Da merkt man es, dann weiß man dann gar nicht, warum es nicht funktioniert.
So, Hörner abgesetzt.
So, dann kommen wir zum nächsten.
Und das ist, äh,
Font Palette.
Genau, Font Palette.
Und das ist jetzt was, wo ich mich jetzt auch auf dünnes Eis bewege, weil ich, das ist so eine von den Eigenschaften, wo ich sage, das habe ich jetzt so grob auf einem High-Level, habe ich es verstanden, aber jetzt nicht so ganz in der Tiefe, aber es geht darum, dass man von, ähm, Color Fonts, die auch noch sehr am
Anfang sind, und zwar, ähm, Color V1 und Color V2 sind verschiedene, ähm, Versionen von, von Farbfonts, also Fonts, die, die Farben innen drin haben, ähm, kann man die Standard Farbpalette von außen verändern.
Was das bedeutet, wäre zum Beispiel, wenn ihr jetzt Emojis habt, ähm, also ich glaube, das war mal so ein Beispiel, ich glaube, ich weiß nicht, ob das in dem Artikel drin ist, aber das ist mir auf jeden Fall mal über den Weg gelaufen.
Also wir haben da einen CSS-Tricks-Artikel, äh, zum Thema, den wir auch verlinken werden.
Ähm, zum Beispiel, äh, glaube ich, habe ich mal einen Emoji-Font gesehen, wo die Standard Emoji-Farbe ist halt gelb, ist ja oft so, ne, und dann kannst du aber sagen, nee, ich will jetzt aber, dass die Standard, dass die Emojis, das alles, was gelb ist, soll jetzt halt blau sein.
Und dann kannst, konntest du das über Fontpalette mit reingeben, nee, ich will das überschreiben, ich hätte jetzt gerne da, wo gelb ist, blau, und dann, äh, waren die Emojis halt einfach alle blau.
So, und das, äh, ja, das ist, ich bin sehr gespannt auf diese Color-Fonts, weil die nämlich dann, äh, wirklich dann auch erlauben, dass man, äh, Standard, dass, dass man, dass man eigene Fonts definieren kann für Emojis, das ist was, da bin ich excited, aber das betrifft natürlich nicht nur Emojis, sondern auch ganz normale Schriftarten, ähm, die halt einfach ...
Ja, das haben wir im, äh, Stream dann sogar getestet, ne, ich dachte, wir hätten dabei irgendwie bei Emojis dann Farben ausgetauscht auch.
Ja, genau, stimmt, wir haben das mal, genau, weil dann hab ich's daher noch.
Weil ist nämlich sogar schon, also Chrome, äh, ist, hat das auch seit diesem Jahr, ähm, Safari, auch seit diesem Jahr, ja, März, März, April, also, ja, ist auch jetzt ziemlich, ziemlich neu.
Und, äh, es gibt tatsächlich, und deswegen heißt es auch Font Palette, ähm, teilweise, äh, Fonts, die mehrere Farben definiert haben, innen drin, ähm, die dann zum Beispiel, ähm, äh, zwei Farben haben, ich hab hier in dem Artikel gerade, zwei Farben für die Schrift, weil's so eine Art 3D-Effekt ist, und dann auch nochmal ne Schattenfarbe.
Ja, und so weiter, und da kann's auch noch mehr geben, das heißt, du kannst diese ganze Palette damit überschreiben.
Könntest du dann den Schatten ausbinden, wenn du's transparent setzt dann zum Beispiel.
Äh, wahrscheinlich müsste, würde das dann auch gehen, genau. Ähm, und das sind auch coole Demos, äh, die jetzt bei mir im Browser tatsächlich auch schon funktionieren, äh, auf, äh, CodePen, ähm, das ist, also ich glaub generell, Color Fonts ist ein geiler, ne geile Sache, da bin ich echt excited, weil das Emojis überall hinbringen wird, und du kannst dann, weiß ich jetzt nicht, ob's ne gute Idee ist, ich bin mir mit Arbeitskollegen zusammen eigentlich immer
ziemlich einig, dass die Apple-Emojis die einzig Waren sind, aber es gibt auch Leute, die sind anderer Meinung, und, ähm, dann kann man dann auch, äh, die, das, ja, das eigene Vorzug der Emojis sind.
Das Leute, die die Microsoft-Emojis toll finden, das würde mich mal interessieren.
Die mit den schwarzen, dicken Rahmen drumherum, und da, wo die, äh, die Flaggen auch fehlen.
Wo die Gesichter auch so komisch sind, und die Flaggen fehlen, und, ja.
Ist das immer noch so, dass die Flaggen fehlen?
Ja, ja.
Ja, und du hast dann, dass du dann irgendwie, äh, das Herz ist dann halt dieses normale UTF-8, oder noch ASCII-Herz statt dem roten Herz, du musst das Herz dann in einer anderen Farbe machen, damit es dann richtig angezeigt wird.
Es gibt zwei rote Herzen bei Emojis.
Mhm.
Es gibt das Originale, das nämlich vom Kartenspiel herkommt, wo nämlich früher die HTML-Entity, das ist die erste HTML-Entity, die ich in meinem Leben gelernt hab, da hab ich mit Webdesign noch gar nichts am Hut gehabt, da wollte ich nur komische Symbole in den Chat eintippen.
Also, Kaufmanns- und Hartz-Semikolon, äh, hab ich damals gelernt, ähm, damit kannst du nämlich, genau, da gab's diese ganzen, und Spades, äh, gibt's auch, also die ganzen, die ganzen Kartensymbole gab's damals.
Deswegen gibt's zwei verschiedene rote Herzen.
Es gibt einmal das Herz, das vom Kartensymbol kommt, und es gibt halt ein Herz, das ein Herz sein soll.
Es ist völlig Banane.
Und das, wenn du über diesen Emoji-Picker in Windows dann das Herz machst, dann ist irgendwie, manchmal ist es dann dieses Ascii-Herz.
Genau.
Das hast du in Vs.Code aber auch.
Mhm.
Auch auf dem Mac.
Das ist interessant, weil die, war genau, hundertprozentig sicher bin ich mir da nicht, warum das so ist.
Äh, ja, ist aber so.
Genau, also wie gesagt, betrifft nicht nur Emojis, aber ist eine coole Sache, und ich freu mich sehr auf die Color-Fonts, ähm, weil da nämlich auch sowas wie, ähm,
Die Liebe Heide, die wir auch schon mal hatten im Podcast.
Genau, an die hab ich auch gedacht, ich hab's aber irgendwie nicht mehr gefunden grade, Liebe Heide.
Das werden mir hier mehrere Folgen angezeigt, aber wir haben noch nicht, haben die so viele.
Das war, das war mit Gerrit.
Das war die Folge mit Gerrit.
Ja, genau, hier, ah ja, genau, Gerrit von Aken, die Nummer 14, dann packen wir die auch noch in die Schuhe.
Ja, genau, Die Liebe Heide ist ein Color-Font, ähm, wo du, glaub ich, meines Wissens nach nicht die Farbe ändern kannst, weil das wahrscheinlich ein Color-V-One-Font ist.
Ah, das weiß ich gar nicht mehr, doch, ich, doch, irgendwie hatte ich doch was mit Farbe ändern.
Da kannst du aber, glaub ich, bei dem die Farbe nicht ändern, das ist aber, liegt aber wahrscheinlich daran, wie er angelegt ist, da ist es einfach nur, also es ist eine Schreibschriftart, die halt aussieht, als hätte wirklich jemand mit dem Kugelschreiber was geschrieben und ist wahnsinnig schön.
Ähm, genau, ist aber halt immer blau, immer dieses, äh, Kugelschreiber-Blau.
Jo.
Ähm, genau, Prefers Contrast und Forced Colors, äh, da kann ich nur zum, zum Ersten was sagen, wir haben da jetzt auch gar keinen Artikel oder so verlinkt, ähm, also wenn in den Systemeinstellungen, äh, es gibt ja diesen High-Contrast-Modus, gab's auch schon ganz früh bei Windows irgendwie,
95 oder 98, äh, wo dann alles wirklich so Hoch-Kontrast-Farben hat und, ähm, wenn man das aktiviert hat, dann kann man da mit Media-Queries auch drauf reagieren und kann eben dann sagen, okay, dann stell ich meine, meine Webseite auch entsprechend da.
Ähm, und wie gesagt, Forced Colors, da müsstest du jetzt was dazu sagen. Ist das, hat das was mit ...
Das ist tatsächlich der High-Contrast-Mode, das ist wenn, ähm, ähm, also ich glaub, ich, da bin ich mir nicht so hundert Prozent sicher, weil ich's schwer fand, äh, gibt's auch MDN-Artikel zu beiden, ähm, ich fand's schwer, sie auseinander, äh, zu dividieren, was jetzt was ist.
Ähm, auf jeden Fall, Forced Colors ist, sind die High-Contrast-Modes, wo du sagst, das müssen jetzt diese Farben sein, ähm, und ich glaube, du kannst, äh, du kannst bei Forced Colors auch bestimmte Farben,
Farben definieren. Ah, Properties affected by Forced Color Mode ist auf jeden Fall Color, Background, Color, das ist eine ganze Liste, ähm, und bei Prefers Contrast, ähm, wird im Prinzip nur gesagt, das ist ein, ähm, da kannst du im Prinzip nur eine Präferenz angeben.
Ah, okay, okay.
Also, äh, no preference, more, less, interessanterweise, ja, jemand, der weniger Kontrast wird. Ich weiß nicht, ob's, ob jemals jemand sagen möchte, ich hätte gern eine Niedrig-Kontrast-Variante,
von der Webseite. Hm.
Weiß ich, kenn ich keinen Anwendungsfall, also wenn, wenn's dafür was gibt, bitte gerne in die Kommentare schreiben.
Vielleicht gibt's da irgendwelche Fehlsichtigkeiten, die, äh, wo das dann zu unruhig ist.
Und dann gibt's noch Custom, ähm, und Custom, da kann man auch ein, äh, ein spezielles Set von Farben dann offenbar definieren, aber da geht's dann schon Richtung, wie gesagt, wenn es jemand mal genau auseinander
dividieren kann, den Unterschied, aber, wie gesagt, das eine ist eine Präferenz und das andere, da geht's tatsächlich um, um bestimmte Farben für bestimmte Werte.
Und das betrifft tatsächlich, Force Colors sind die, sind die Kontrast-Modi von, von Windows und die gibt's auch bei macOS, ich weiß gar nicht, ob's bei Android einen Kontrast-Modus gibt.
Aber es gibt, gab auf jeden Fall mal so einen ganz brutalen auf Windows, da erinnere ich mich dran.
Jo.
Das ist das.
Gut, gut, dann geht's weiter mit, äh, Focus Visible.
Und das ist auch echt gut, dass es das gibt.
Ähm, ganz früher war das so, dass der, ich glaub, inzwischen ist das auch nicht mehr so krass, aber
in Chrome war's, glaub ich, wenn du da ein Objekt fokussiert hattest, dann war da so ein blauer, so eine blaue Outline, äh, mit, mit so Feather-Effekt.
Außenrum, ne?
Genau, in Firefox war's so eine gepünktelte Linie.
Genau, und in Chrome eben dieses, dieses, dieser blaue Schein.
Und der war halt auch einfach immer blau und dann hat sich das natürlich eventuell gebissen mit dem, mit dem Layout, das man hatte.
Und ganz viele Leute haben dann direkt hier, äh, Sternchen, Outline, None, Important, ja?
Das, um das auf jeden Fall zu, zu entfernen oder, oder bei Focus zumindest.
Ähm, und das komplett weggemacht.
Aber es ist halt eine Accessibility-Hilfe, ne, dass du das siehst, wo du gerade drauf getappt hast.
Ja.
Und, ähm, jetzt kann man dafür sorgen, dass dieser Rand nur noch erscheint und dass ich den Rand auch farblich beeinflussen kann,
wenn ich tatsächlich das Element mit dem Keyboard, ähm, angefokust habe.
Also diesen Focus-Swing nennt man das auch.
Ähm, genau, dass ich halt sagen kann.
Genau.
Und, ähm, ansonsten habe ich keinen, keine Outline, aber in dem Fall, wo das tatsächlich per Keyboard fokussiert wurde, möchte ich es entsprechend hervorheben.
Ja, sehr gute Sache.
Jetzt gibt es überhaupt keine Ausrede mehr, äh, sichtbare Fokus-Styles, äh, einzubauen.
Also die ganzen Grafiker, die früher die gepunkteten Linien nicht haben wollen, da kannst du sagen, ja, egal, dann sag mir trotzdem, wie es fokussiert aussehen soll, äh, weil das sehen, das siehst du dann nicht mehr, wenn du zum Beispiel auf einen Link klickst.
Wenn du für einen Link einen Fokus-Style hattest, war nämlich das Problem, wenn du draufgeklickt hast, kriegt der halt den Fokus kurz, solange bis er halt dem Link gefolgt wurde, auf die neue Seite kommst.
Ähm, das war immer so das Argument, ja, das will ich doch nicht haben, wenn ich da draufklicke, soll der doch keinen Rahmen kriegen, wieso soll das denn sein?
Und jetzt, äh, mit, äh, Fokus-Visible hast du das Problem nicht mehr.
Genauso, ähm, auch, äh, kann man es natürlich auch für, für, für, für Eingabefelder, könnte man natürlich einen, einen stärkeren Fokus hervorheben, wenn man da jetzt für jetzt, äh, einen bestimmten Style hat für, für, für Keyboard.
Genau.
Dann machen wir weiter mit Has.
Ja, genau, da können wir, da haben wir nämlich eine eigene Folge dazu.
Dann können wir einfach drauf verweisen.
Da sagen wir, da sagen wir nur einfach, das ist jetzt, der Parent Selector ist da und hört unsere Folge, äh, Nummer 41, I can has Parent Selector.
Mehr sagen wir dazu nicht.
Genau, gut.
Und, äh, ja, bei Where trifft er eigentlich fast das Gleiche zu, ähm, da haben wir zweimal schon drüber gesprochen, einmal bei Jäger der verlorenen CSS-Features, Kapitel 1, das war unsere Folge Nummer 10, und bei Gekommen, um zu bleiben, Folge Nummer 13, haben wir das nochmal irgendwie angerissen, ähm, deswegen würde ich auch fast sagen, also du hast da noch einen Blog-Beitrag, äh, verlinkt, vielleicht können wir da noch kurz drüber sprechen, kannst du vielleicht sagen?
Nö, nö, nö, nö, nö, oder wir verlinken einfach nur, und dann, okay, hört die Folge, äh, klickt den, den Beitrag an, ähm, genau.
Ich glaube, woher ist, äh, ist so ein bisschen einfach, ähm, man spart sich ein bisschen Tipparbeit.
Genau, aber es ist tatsächlich cool, was man sich schon lange gewünscht hat, hört euch die Folgen an.
Cascade Layers.
Oh je, oh je, oh je, äh, mittlerweile habe ich es, glaube ich, so grob verstanden.
Für weniger important, so kann man, glaube ich, grob sagen.
Für weniger important, ähm, und.
Man hat Einfluss auf die Kaskade, es geht jetzt nicht immer nur nach, nach der Reihenfolge, und, und nach Spezifizität.
Spezifizität.
Spezlefizität.
Das ist die, der Weichheitsgrad, der, der Spezle.
Spezle sind halt so fitzelig.
Oje.
Die Spezlefizität, sehr gut.
Äh, genau, also man kann jetzt, ähm, man kann jetzt Bereiche definieren, Layer, äh, nennt sich das, ähm, die kann ich benamen, und, äh, es gibt da zwei verschiedene Möglichkeiten, das zu machen, also ich kann einmal am Anfang des Style Sheets sagen, add Layer, und dann einfach nochmal getrennte Namen, und in der Reihenfolge, wie ich sie da definiere, die Reihenfolge spielt am Ende eben auch die, die Rolle, äh, was da Vorrang hat.
Wenn also die Spezifität gleich ist, äh, dann, äh, ich bin, ich bin so verwirrt, ich weiß nicht, ob Spezifizität oder Spezifität im Deutschen heißt, ähm, es ist wie, wie, ähm, kennst du das, Peng, Peng Wings?
Peng, also haben wir zusammen im Stream angeschaut, ne, die Peng Wings, Peng Wings.
Ja, Peng Wings.
Mit, äh, Benedict Cumberbatch, äh, einfach mal googeln, ähm, genau, also, ähm, oder ich definiere wirklich, ähm, sieht dann ein bisschen aus wie Media Query, also add Layer, dann den Namen des Layers, und dann geschweifte Klammer auf, geschweifte Klammer zu, und darin kann ich dann, ähm, äh, ganz normal meine, meine Regeln definieren.
Und dann ist das eben abgekapselt in diesem Layer mit den bestimmten Namen. Und ich kann das aber halt auch immer wieder benutzen, also, wenn ich dann später was habe, was aber auch zu diesem Layer gehört, von der Logik her, dann kann ich das eben wieder drumrum basteln.
Weil sonst könnte ich auch sagen, naja, wenn ich eh alles an einer Stelle habe, dann ist es ja eigentlich auch wurscht. Aber, ähm, ja, dadurch habe ich eine Möglichkeit, äh, das nochmal zu beeinflussen, ähm, welche Regeln da irgendwie Vorhang haben, äh, Vorhang haben, welche Regeln den Vorhang haben.
Ähm, und, äh, man merkt, das wird schon, das Bier wirkt und es wird spät. Ähm, genau. Punkt.
Ja. Okay. So, jetzt ist es natürlich, bin ich natürlich genau bei dem rausgekommen, wo ich mich gar nicht mit auskenne, ne? Äh, nämlich Shadow DOM. Äh, ich bin jetzt nicht unbedingt der Web-Component, äh, Papst, da sollten wir sollten mal jemanden einladen.
Weißt du was? Äh, dann verweisen wir da einfach auch auf unsere Folge Nummer 40, da hatten wir nämlich genau das als Property der Woche.
Ah, genau. Machen wir das, dann machen wir das ganz leicht. Und, aber ich, ich möchte, ich möchte, also es geht um Shadow DOM Part, ähm, äh, ich hab auch noch in meinem Tweet dazu geschrieben, dass ich, äh, dazu tendiere Clickbait-Titel zu machen, wenn ich keine Ahnung von irgendwas hab. Ähm, wir sollten aber, und das, das, äh, halte ich jetzt einfach mal so fest für die Zukunft ohne Termin oder so, wir sollten mal jemanden einladen, der uns Web-Components genauer erklärt.
Gerne, so komplett Shadow DOM-Gedöns und Parts. Über solche Details, wo man über solche Details mal reden kann, das fände ich auf jeden Fall sehr interessant. Ähm, wir haben auf jeden Fall noch einen CSS-Tricks-Artikel, der unter anderem darauf eingeht, ähm, und, äh, wie Konstantin schon gesagt hat, wir haben auch das als Property der Woche schon gehabt, in Folge Nummer 40, wenn ich das richtig hier sehe, in der Doku. So, wir klicken uns schon wieder gegenseitig die Hitchen weg.
So.
Ja, Trigonometric Functions.
Yes.
Ja.
Ähm, ja, was, was soll man dazu groß sagen? Also, äh, ihr habt hoffentlich in der Schule alle aufgepasst und wisst, was Trigonometrie ist. Also, es geht um, äh, Cosinus, äh, wie heißt das andere? Sinus, Cosinus und Tangens.
Tangens.
Ähm, und das kann man dann eben auch damit, ich weiß gar nicht, wie es, haben wir das schon verlinkt, can I use, äh, Trigonometric Functions?
Gucken wir gleich mal, ähm, das kann man eben dann jetzt auch im CSS benutzen, in Verbindung mit Kark und so weiter und kann dann vielleicht mit irgendwelchen Transforms dann genau den Winkel berechnen lassen, indem ein Element zu irgendeinem anderen stehen soll und so weiter.
Ähm, ich hab in der Schule nicht so viel aufgepasst, deswegen kann ich ja nicht mehr so viel anfangen, aber ich weiß noch, was es, äh, dass es irgendwas mit Winkeln zu tun hat. Ähm, und andere Leute, die, die schlauer sind und mehr Fantasie haben, wie man das einsetzen kann, die freuen sich bestimmt, dass das jetzt möglich ist.
Ja, es gibt dazu auch einen schönen Artikel bei Codrops, äh, wo ich mich bis heute frage, warum es, warum Codrops auf einer Seite namens tympanus.net ist, ähm, aber egal. Ähm, da gibt's einen sehr langen Artikel, der sehr in die Tiefe geht, äh, wie man das mit SAS machen kann und wie das dann auch zukünftig einfach mit, mit purem CSS geht.
Und es gibt wohl Menschen, also ich wär jetzt nie auf die Idee gekommen, das zu machen, äh, ich, ich hatte bisher, glaub ich, noch keinen Anwendungsfall, wo ich's gebraucht hätte, äh, aber ich glaube, das ist, das kann schon, äh, eine interessante Erweiterung von CSS sein, äh, dass man das da nativ drum machen kann.
Aber der Vorständigkeit halber ACOS und ATAN und wahrscheinlich auch ASIN, nehm ich mal an. Äh, vielleicht auch nicht. Gibt's jedenfalls auch noch. Also, ähm, ja, vielleicht hat jemand irgendwie was Cooles mal damit gebastelt schon. Im Safari geht's ja schon als einzigen Browser.
Aber tatsächlich aktuell. Ähm, wenn da jemand was Cooles, äh, zu zeigen hat, dann, her damit.
Jo, dann kommen wir zu CSS-Nesting.
Ähm, und das ist, wenn ihr schon mal Präprozessoren, CSS-Präprozessoren verwendet habt, so wie LES oder SAS, ich weiß gar nicht, gibt's noch was anderes, was man, was man momentan nutzt?
Äh, Stylos, kann das auch?
Stylos, ja. Ähm, aber ob, ach, Stylos hab ich nie benutzt, weiß ich nur, dass es das...
Ich glaube, aber SAS hat sich ziemlich durchgesetzt. Ähm, ja, also SAS und LES sind so die großen Dinger. Also, ich bin irgendwie bei LES hängen geblieben, aber, ja.
Ähm, genau. Und, äh, Nesting, also, dass man zum Beispiel, dass man, dass man geschweifte Klammern um Dinge drumherum machen kann und muss sie dann nicht erneut schreiben und das gilt dann für alles, was außen steht, auch für innen.
Ähm, dazu, äh, dazu, äh, empfehle ich euch auch meinen Tweet, den ich dazu geschrieben hab. Oder vielleicht auch, äh, haben wir da sonst noch ein Beispiel? Ich glaub, da packen wir den Tweet einfach mal rein, weil ich glaub, der, der zeigt das schon ganz gut.
Ähm, ähm, ist jetzt schwer, schwer visuell zu erklären, wenn man nicht weiß, was Nesting ist. Ähm, ist einfach Verschachtelung von CSS und, äh, das, was außen steht, gilt dann auch noch für das Innen.
Und, äh, das soll in Zukunft auch mit CSS funktionieren, nativ, ohne dass ich einen Präprozessor, äh, dafür verwenden muss. Das geht derzeit.
Und ein Vorteil davon ist ja, dass man sich einfach auch getippe spart, ähm, was man, wie gesagt, haben wir vorhin schon gesagt, auch mit Wear, äh, schon so ein Stück weit erreichen kann.
Aber, äh, wird natürlich noch komplexer, wenn ich dann diesen Und-Placeholder, äh, da einsetzen kann, um dann zu sagen, okay, von dem Element, wenn es noch zusätzlich die Klasse so und so hat, dann tu dies und das.
Genau. Ähm, wobei ich sagen muss, ähm, die Gefahr bei Nesting besteht immer, und das habe ich schon öfter gesehen in Projekten, ähm, dass Menschen dann versuchen, so den kompletten HTML-Baum darin abzubilden. Äh, das sollte man nicht tun.
Also, da verspielt man viele Vorteile von CSS.
Also, ich brauche dann nicht bei HTML anfangen und mich dann über Body und so weiter hinarbeiten.
Naja, ich meine, das ist jetzt natürlich das Extrem, aber ich meine, es ist schon, es ist schon, man sollte so wenig schreiben wie möglich, um auch sich Dinge nicht zu verbauen, wenn man die Spezifität,
ja eigentlich gering halten will.
Richtig, weil dann kommt man wieder mit, ich setze jetzt einfach das Class-Attribut in den Selektor, damit das irgendwie spezifischer wird und so Zeug, ne?
Wo man dann wiederum ja aber auch mit dem Layering entgegenwirken könnte.
Genau, Cascade-Layers, damit könnt ihr, naja, wie auch immer. Ich fand das auch eine ganz schöne Sache, dass man ein bisschen diszipliniert sein muss.
Aber man merkt auch wieder, es wird immer, es wird wieder immer komplexer, ne? Also, das, was wir bei JavaScript hatten, dass da irgendwie ganz viel Neues dazukommt, jetzt ist bei CSS, ist schon auch, da passiert echt viel, auch wo ich dann teilweise mich schon wieder ein bisschen abgehängt fühle.
Also, klar, mit so mathematischen Funktionen, weil mir das einfach nicht liegt. Aber auch so generell mit, was man jetzt alles aufbohren kann und tun kann.
Ja, da habe ich vor kurzem einen schönen Tweet zugesehen, wo einer gesagt hat, ja, es gibt jetzt mittlerweile irgendwie über 500 CSS-Properties.
500, ja.
Wahnsinn.
Und da auch ein Link mit einer Liste und das fand ich ganz nett, so nett, dass ich das auch mal bei uns auf der Liste geschrieben habe, dass wir mal so ein bisschen uns das Format von Work and Craft ein bisschen vielleicht klauen können.
Und die spielen manchmal Glücksrad über die, ja, über eine Spec und sprechen dann über das, was rauskommt. Und ich glaube, wir könnten das ein bisschen low-fi, ich glaube, die haben sogar ein Tool dafür, dass dann automatisch, natürlich, was macht die Entwickler?
Sofort erstmal ein Tool für irgendwas bauen. Aber ich glaube, wir könnten das ein bisschen low-fi-mäßiger machen. Aber das wäre was Schönes für unseren langen Stream, wo wir einfach mal sagen, da picken wir uns irgendwas raus und mal gucken, ob wir was darüber sagen können, ob wir das kennen oder wir lernen dann halt einfach was drüber.
Weil 500, über 500, das ist schon ein Wort. Und diese Liste habe ich auch da schon in die Notizen gepackt. Ich glaube, das könnte interessant sein. Weil ja, ich gebe dir recht, CSS ist unfassbar gewachsen. Ich meine, wenn du dir überlegst, es gibt etwas über 100 HTML-Elemente aktuell im Standard, aber 500 CSS-Eigenschaften.
Das ist schon krass, ja. Die HTML-Elemente haben wir im Stream auch mal, sind wir mal durchgegangen.
Und da sind, glaube ich, die, ich habe mir die Liste jetzt nicht von oben bis unten komplett durchgelesen, aber ich glaube, da sind die Selektoren noch nicht dabei. Das sind nur die Properties, ja.
Selektoren gibt es ja auch nochmal.
Einige. Also das ist auch nicht zu unterschätzen.
Okay.
Machen wir weiter.
Gut.
Vorletzter Punkt, Mensch.
Ja.
Wir fallen hier heute durch, ey.
Druckbetankung.
Image-Set ist das nächste. Also auch wieder eine CSS-Funktion, Image-Set, Klammer auf, Klammer zu.
Und vielleicht kennt der die ein oder andere, die Möglichkeit, jetzt weiß ich selber nicht mehr, wie das Objekt heißt, ist Source-Set, S-A-C-Set.
Also, ich habe einen Image-Tag außenrum und dann mit S-A-C-Set, beziehungsweise es gibt das Source-Set-Attribut und es gibt aber auch, warte mal, da gibt es doch zwei Möglichkeiten, oder?
Es gibt das Source-Element, glaube ich.
Ist ja nicht so, dass ich das nicht selber schon mal eingesetzt hätte, aber ich weiß schon nicht mehr, wie es, äh, wie genau.
Es gibt das Source-Element auf jeden Fall für Videos.
Ich weiß nicht, ob man das bei Bildern auch...
Ja, ja, ich kann es dir gleich genau sagen. Ich muss nur in den Quellcode von meiner eigenen Firmenseite gucken.
So, Picture-Element. Und da drin kann ich dann verschiedene Source-Elemente anlegen und die wiederum haben ein Source-Attribut, also ein Source-Set, S-A-C-Set-Attribut, in dem ich dann verschiedene Größen definieren kann.
Also das eine, die Source-Geschichten, da kann ich mit Media, mit dem Media-Attribut, einen Breakpoint festlegen und mit dem Source-Set kann ich dann eben nochmal verschiedene Auflösungen, je nachdem, wie die Pixeldichte vom Monitor ist.
Und, ähm, dieses Image-Set, äh, die CSS-Funktion, die ermöglicht das Ganze eben jetzt dann im CSS, also dass ich da sagen kann, äh, gib mir für verschiedene Pixeldichten, ähm, ein Set an Bildern, die der Browser entsprechend verwenden kann.
Also zum Beispiel Background-Image, ähm, Property mit, also ist noch geprefixed teilweise, minus Webkit, minus Image, minus Set und dann kann ich darin wieder verschiedene, also diese, also mit URL zum Beispiel ein Bild einbinden, ähm, und hintendran dann, also URL, Klammer auf, Klammer, äh, da drin dann der Pfad zum Bild, Klammer zu, Leerzeichen und dann 1x oder 2x und so weiter, was eben dann für die, für die Pixeldichte steht.
Ja, dann kommen wir schon zum letzten, ähm, zum letzten Punkt, ähm, das ist die Image-Funktion, äh, und auch mit der kann man croppen, zum Beispiel, aber auf eine ganz andere.
Genau, das war das, was ich vorhin angesprochen hab, äh, auf eine interessante und ganz.
Was aber natürlich, ich hab da, glaub ich, Quatsch erzählt, es ist beides natürlich CSS, das andere war ja auch schon ein CSS, ja.
Genau, äh, was, was daran interessant ist, das ist was, was ich vorher so in der Form, äh, glaub ich, noch nie gesehen hab, ähm, da gibt es nämlich, äh, ein sogenanntes Image-Set,
Image-Fragment, also wie, äh, Color-Function, äh, Image-Function, äh, Image-Klammer auf, Klammer zu quasi, ja, also Function, ähm, darin kann ich dann, also zum Beispiel, äh, in Background-Image kann ich das zum Beispiel reinschreiben.
Ähm, ähm, und, äh, da schreibe ich dann halt zum Beispiel zuerst meinen Pfad rein, aber dann Raute, oder Hashtag, wie manche sagen, ähm, und dann kann ich bestimmte Parameter angeben, ähm, die aber interessanterweise direkt nacheinander stehen und dann ist gleich, wo dann die Werte nacheinander stehen.
Also das Beispiel hier zum Beispiel, äh, äh, ist zum Beispiel, äh, myimage.webp-Route x, y, w, h, also x, y, width, height und dann Werte für die jeweiligen, äh, für die jeweiligen, äh, Einheiten vorne, also da steht jetzt immer schon 0,20, 40, 60, äh,
und in dem Fall sind das dann, glaub ich, die, die, die Abmessungen, die x- und y-Abmessungen und, ähm, die Höhe und die Breite, also es wird gecroppt bei 20 dann.
Genau, also das, da sollte man sich die Syntax mal anschauen, dass man's vor Augen hat, das ist, glaub ich, im Podcast eher, äh, schwierig zu erklären.
Ähm, es ist aber tatsächlich was Ungewöhnliches, sowas hab ich in der Form noch nie gesehen, nur das Ding heißt Imagefragment.
Was an was es mich erinnert hat, ist, ähm, bei SVG-Fonts, wenn man die eingebunden hat, dann musste man, äh, per Hash noch die ID übergeben von dem, von dem Element, in dem die Font dann in der SVG-Datei tatsächlich liegt.
Genau, und SVG-Fonts hat man für alte iOS-Geräte gebraucht, glaub ich, gell? Das war, das war irgendwie so ein Ding.
Ähm, was es auch gibt, ist, dass man, und das ist, glaub ich, was tatsächlich interessant ist, äh, ich weiß gar nicht, ob man das anders mit CSS, kann man anders mit CSS auch schon machen, aber man kann auch für das Bild ein Color-Fallback noch,
äh, hinterlegen wohl. Ähm, aber auch dazu lege ich euch den MDN-Artikel dazu ans Herz, äh, und ich glaube, das ist auch so ein sehr experimental Ding, das sehe ich jetzt hier noch, äh, in keinem Browser verfügbar, da ist auch nicht sicher, bei den, bei den ganzen Sachen, die da, ähm, die da, äh, bei, bei, äh, bei der Umfrage kommen, oder die, die so ganz, ganz neu sind, da ist auch nicht so 100% gesagt, dass die jemals im Standard landen.
Das ist teilweise so, so fresh und hot. Also, wie gesagt, dieses, die Image-Function, ähm, wenn ich das richtig sehe, äh, die ist nirgends unterstützt, nicht mal mit einem, hinter einem Flag.
Aber es ist eine interessante, interessante Idee, finde ich, mit diesem, mit diesem, ähm, Fragment, da Parameter dran zu hängen, interessante Geschichte. Also, hab ich so in der Form noch nicht gesehen, kann man jetzt natürlich drüber streiten, ist es zu unfamiliar, sollte man es irgendwie mit was gewohnterem machen, aber ja, vielleicht kommt's, vielleicht kommt's nicht.
Da würde ich jetzt keine Wette drauf abschließen, dass das irgendwann im Standard landet.
Das ist auch interessant, da ist in dem MDN-Artikel, der letzte Satz von dem Abschnitt da vor der Syntax ist auch,
the spatial dimension definition in the media specification indicates that percentages will be supported as well.
Also, indicates, ja, also, sieht so aus, als ob, also, da ist noch viel, viel unklar.
Ja, genau.
Ja, es, äh, ja, steht doch, steht gar nicht, dass Experimental ist, oder? Doch, should not be confused. Okay.
Nee. Ja, genau, das war die letzte, das war der letzte Teil von ...
Wow. Gut.
Ja.
Haben wir aber gut über anderthalb Stunden drauf gehabt.
Was labern wir denn jetzt noch?
Na, jetzt haben wir noch einen Geil-Teil.
Ach so, wir haben noch einen Geil-Teil.
Ja, das wäre noch nicht ganz am Ende.
Vielleicht, vielleicht, sollen wir, sollen wir, sollen wir live, äh, schnell noch den Werbeblog einspielen?
Ja, mach mal.
Werbung.
Ich weiß gar nicht, ich weiß gar nicht, muss, muss ich mal, muss mal gucken, ob wir es dann gleich rausschneiden.
Wo wir sind, ich vorne, wird, geht gerne Spende von euch jetzt da, das wäre ja irgendwie ganz nett. Was meinst du?
Ey, du musst jetzt was sagen.
Ach, Kerl, ach, das ist, also, ich dachte ...
Weißt du, Kerl, ich hab jetzt, ich hab jetzt schnell einen Dialog draus gemacht.
Ach so, nee, das musst du mir ja sagen vorher.
Ach, ich spende, was soll es denn kosten?
Ach, ein Euro pro Folge, das wäre doch nicht.
Ein Euro pro Folge, das ist ja verschnickt, das ist ja geschenkt.
Ach, das mach ich.
Super, jetzt probierst du es halt.
Das tut auch dir gut.
Ding, ding, Werbung Ende.
Okay.
Lass mal drin.
Das probieren wir nächstes Mal.
Lass mal drin.
Ich glaube auch, lass mal drin.
Okay, dann kommen wir jetzt noch.
Das Geiltein.
Geiltein.
Präsentieren von deutscher Grammatik.
Dann kommen wir jetzt noch das Geiltein, ja.
Super.
Das Geiltein, der ist mal wieder was komplett untechnisches, mal was ganz anderes wieder.
Und zwar eine Serienempfehlung, die aber leider nicht so ganz einfach in Deutschland zu bekommen ist.
Das ist eine britische Serie, die ich auch nur, wo ich nur drauf gestoßen bin, weil ich einen Trailer gesehen habe für die neue Staffel davon, weil ich britisches Fernsehen schaue.
Weil hier in Deutschland, ich verlinke auch auf Werstreamed ist, da gibt es die nur bei Prime Video, die ersten beiden Staffeln, aber immerhin.
Und bei Apple TV gibt es drei Staffeln.
Gibt es auch nur auf Englisch, ist nicht synchronisiert.
Und die Serie heißt Ghosts.
Und natürlich kann man sie auch schauen auf dem BBC iPlayer, das ist eine BBC-Serie, der halt natürlich nur in Großbritannien verfügbar ist.
Aber ich habe ja gehört, dass manche findigen Menschen es trotzdem irgendwie schaffen, das anzuschauen.
Ah, da müssen wir gleich im Anschluss nochmal drüber reden.
Okay.
Ich hätte da jemanden, der da vielleicht auch dran interessiert wäre.
Okay.
Hast du gehört, dass manche Menschen sich für sowas interessieren?
Ich habe gehört, es gibt Menschen, die interessieren sich dafür, wie man den BBC iPlayer bei uns in Deutschland verwenden kann.
Vielleicht reden wir da im Anschluss nochmal drüber.
Okay, ja.
Oder vielleicht jetzt.
Piep, piep, piep.
Fertig.
Danke Konstantin.
Ich reiß mal ganz kurz an, um was es geht.
Also ein Paar erbt so ein Menschen, so ein großes Anwesen.
Und dann stellt sich raus, dass dieses Anwesen aber von Geistern befallen, besetzt ist.
Also da leben halt einfach noch einige Personen, die halt nicht mehr leben, macht das Sinn.
Und zwar also wirklich vom Urzeitmenschen zu Menschen, die halt früher da im Stall gearbeitet haben oder als Küchenmädchen und so.
Und da stirbt dann halt auch die alte Hausbewohnerin, deswegen wird das dann eben vererbt.
Und dann will dieses Paar, will das umbauen und renovieren und modernisieren und ein Hotel reinmachen.
Und das finden die natürlich gar nicht cool.
Und jetzt will ich nicht so viel spoilern, aber es ergibt sich dann, dass eben die Frau von diesem Paar die Geister plötzlich sehen und hören kann.
Und die laufen ihr halt dann den ganzen Tag da hinterher und reden mit ihr und am Anfang versucht sie das zu ignorieren.
Aber es ist sehr lustig, also es ist sehr britischer Humor.
Man darf es nicht verwechseln mit dem, es gibt eine US-Adaption davon inzwischen, die seit letztem Jahr glaube ich.
Da weiß ich nicht, wie die ist, aber ich habe die Erfahrung gemacht, dass solche Adaptionen, egal ob jetzt US-Adaptionen oder für den deutschen Markt neu nachgedreht, dass die meistens nicht so gut sind wie das Original.
Eben aus dem Grund heraus, dass man das oft aufgrund des Humors und so nicht so gut synchronisieren kann oder nicht so übertragen kann in eine andere Kultur.
Und dann macht es aber irgendwie auch keinen Unterschied, ob ich das jetzt krampfhaft versuche, indem ich das Skript leicht anpasse oder ob ich es einfach schlecht synchronisiere.
Also, ja, schaut die britische Originalserie und ich bin jetzt noch nicht so weit, vielleicht entwickelt sich das total blöd, aber die ersten, man kann es ja bei, wie gesagt, bei Prime Video zwei Staffeln und bei Apple TV kann man es ja schauen.
Also, das ist ja auch machbar.
Dann ist man halt nicht hier so wie wir, hier so State of the Art, Bleeding Edge, ganz vorne mit dabei, aber die ersten zwei Staffeln ist ja auch was. Ist ja nicht nix.
Ja, das klingt doch gut.
Da schaue ich doch mal rein.
Ja, ich habe natürlich bei Ghosts, gerade weil ich es vor kurzem noch mal gesehen habe oder es war YouTube an mir vorbei geflattert ist, musste ich an Michael Jackson denken. Kennst du das?
Ein Lied namens Ghosts oder?
Es gibt ein, nein, das ist ein Video namens Ghosts.
Und zwar, warte mal, das können wir vielleicht auch noch, das finde ich tatsächlich geil.
Das reiche ich jetzt noch schnell als geil-Teil nach.
Ähm, ich glaube, das Video an sich heißt Ghosts und das ist so in der Ära nach, äh, warte mal, mal gucken, wie lang das ist.
In der Ära nach History, also nach seinem letzten recht großen, erfolgreichen Album ist, das finde ich es gerade gar nicht mehr bei YouTube, vielleicht haben sie es runtergenommen.
Ähm, es ist quasi wie so eine kleine Geschichte, aber die mehrere Songs enthält halt so mit Tanz und so.
Also der, ich kann mal so kurz den Plot erzählen, ähm, irgendwie, es ist so, so ein klassisches Disney-Ding, würde ich sagen.
Da kommt halt irgendwie der, der Bürgermeister oder Ortsvorsteher von der Stadt mit, mit, mit, mit dem halben Ort hinten dran, irgendwie Kinder, Erwachsene, ähm, und kommt halt zu dem verlassenen, nee, vermeintlich verlassenen Schloss.
Nee, wir wissen halt, da wohnt einer und die sagen, hey, du bist ein Freak, wir wollen dich hier nicht mehr haben, hau ab.
Das ist natürlich Michael Jackson.
Und dann geht's halt darum, äh, wer denn wen jetzt erschrecken kann und, äh, das ist halt natürlich, ist es sehr, ist sehr Disney-haft und sehr unterhaltsam, finde ich.
Ich glaube, vielleicht, vielleicht muss man Michael Jackson dafür mögen, keine Ahnung, die Musik.
Ich mag ihn total, also, um abseits der Kontroversen, aber, ähm, Musik total, wenn du es mal wieder findest, schick es mir gerne mal, es würde mich interessieren.
Ähm, das, das lohnt sich auf jeden Fall, ähm, ich, äh, nee, ich hab gerade überlegt, ob ich, nee, ich darf das nicht spoilern, es gibt nämlich eine Sache, unbedingt den Abspann gucken.
Okay.
Unbedingt den Abspann gucken, weil, äh, da wird was, ähm, da wird was gezeigt, womit man nicht rechnet, sag ich mal so.
Okay.
Ah, warte mal, es gibt sogar 40 Minuten, ich hab's, glaub ich, gefunden, warte mal kurz.
Dann hauen wir das auch noch in die Show Notes rein und, äh.
Ah ja, genau.
Äh, ich hab's gefunden, genau.
Ja, also, ähm, Michael Jackson spielt halt diesen, diesen merkwürdigen Typen da in, äh, in dieser, in dieser Schauervilla und da tauchen dann natürlich auch Geister auf und da gibt's dann halt Performance mit den Geistern und so, das ist quasi wie Thriller, Thriller on Steroids, würde ich sagen, weil das Thriller-Video war ja schon eher ein langes Musikvideo und das Ding, da kommen mehrere Songs drin vor,
und viel Dialog, das geht halt 40 Minuten, inklusive Abspann, also, warte mal, das packe ich hier.
Ja, pack's gleich mal rein.
Pack ich mal grad noch mit rein, äh, kann ich empfehlen, das ist unterhaltsam, könnt ihr auch mit euren Kindern schauen, glaub ich.
Ich bin quasi.
Ein bisschen gruselig, so für Halloween, es passt sehr gut zu Halloween jetzt.
Ich bin quasi begeistert.
Oh ja, I'm ghosted.
Okay.
Dann kommt jetzt schon.
Das Ende.
Jetzt hab ich mir aber Mühe gegeben, dass das, dass das, äh, hier wieder passt.
Das Ende.
Ja, Werbung haben wir heute schon gemacht, jetzt sogar, ne?
Ja gut, es war, es war ziemlich, es war ziemlich erbärmlich.
Aber ihr könnt uns trotzdem, äh, wenn euch die Podcast-Folge gefallen hat oder es gefällt, was, äh, was wir hier machen, könnt ihr uns natürlich trotzdem.
Wir würden uns sehr freuen, irgendwie eine kleine Spende, äh, geben.
Ähm, unter, äh, wo wir sind, ist vorne.shows slash unterstützen, ähm, findet ihr auch ganz viele Möglichkeiten, wie ihr uns unterstützen könnt.
Ihr könnt, äh, T-Shirts von uns kaufen, ihr könnt uns einfach nur, ähm, bei YouTube folgen oder bei Twitter, das hilft uns auch schon, oder uns, äh, Podcast-Bewertungen geben.
Gerne auch bei Spotify, da fehlen uns noch ein paar, dass, äh, eine Bewertung angezeigt wird, glaube ich, immer noch.
Ähm, aber auch gerne bei, bei allen anderen Podcast-Portalen.
Wenn ihr das macht, ähm, dann sagt uns auch gerne mal Bescheid, äh, dann gucken wir mal rein, weil wir nicht alle Portale immer im Blick haben.
Würden uns auf jeden Fall sehr freuen, äh, wenn ihr da, äh, uns helfen, uns weiterhelfen würdet, weil das muss nicht unbedingt Geld kosten, äh, über, über kleine Spenden freuen wir uns natürlich trotzdem, weil wir haben natürlich auch Domain-Kosten.
Unsere Domain ist viel zu teuer, äh, sag ich mir.
Apropos Domain, weil du gerade die lange Domain, äh, diktierst. Ich weiß nicht, ob wir das jemals angesprochen haben.
Wir haben jetzt auch eine Short-URL seit, ähm, seit, ähm, seit, ja, jetzt haben wir auch schon ein paar Monaten.
Und zwar könnt ihr ja statt auf, wo wir sind, ist vorne.show slash unterstützen, auch auf www.evsiv.de slash unterstützen gehen, dann kommt ihr da auch hin.
Genau, dann tippt sich schneller.
Jetzt haben wir noch mehr Domain-Kosten, deswegen müsst ihr noch mehr spenden.
Aber, äh, äh, ein Link, äh, zu der jeweiligen Folge, also ihr kommt auch direkt, äh, zur jeweiligen Folge, wenn ihr einen Kommentar schreiben wollt, ist in der Podcast-Beschreibung ganz oben.
Und da ist auch schon, glaube ich, auch ein Spenden-Link direkt mit drin. Das heißt, äh, ihr könnt einfach direkt in die Folgen-Beschreibung gehen und da, da habt ihr alles, äh, was ihr braucht, schon direkt, äh, ganz oben.
Ganz easy, ganz einfach. Einfach machen. Vielen Dankeschön.
Vielen Dankeschön.
Ja.
Vielen, vielen Dankeschön.
Das ist, äh, jetzt reicht's.
Jetzt reicht's.
Okay.
Es ist durch.
Genug Bier, genug, äh, genug spät.
Oh, weiß ich, ich kann eins, ich kann eins trinken.
Weil ich muss ja jetzt wieder eine Woche warten, bis ich das nächste trinken darf.
Ach so.
Dann müssen wir öfter aufnehmen, damit du mir öfter trinken darfst.
Ja, dann müssen wir wieder öfter aufnehmen.
Ja.
Das wär nicht schlecht.
Ja.
Okay.
Gut.
Ja, dann hoffen wir, dass, äh, für euch das eine oder andere dabei war.
Äh, ihr ein bisschen schlauer geworden seid, wie wir auch in der Vorbereitung.
Und, äh, dann freuen wir uns aufs nächste Mal.
Bis dann.
Bis bald.
Ciao.