Wo wir sind, ist vorne, Folge 10. Heute geht's um sechs CSS-Träume, die bislang unerfüllt geblieben sind.
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 Gießmann und JavaScript-Jongleur Konstantin Groß.
Was ist das denn?
Ich dachte, da wir mal diese zehn Folgen voll machen, können wir mal am Anfang ein bisschen Applaus gleich mal machen, oder?
Damit habe ich nicht gerecht.
Liebe CSS-Coderinnen.
Und wir hatten direkt gleich mal einen Aussetzer, irgendwie wieder von zwei Sekunden.
Naja, da machen wir jetzt einfach trotzdem weiter, oder?
Natürlich.
Hallo, liebe ... oder nicht?
Ja doch, doch.
Oder wer?
Okay, gut.
Sprich, sprich.
Ja, ich wollte heute einsteigen mit einem merkwürdigen Witz, der mir mal erzählt wurde, für den ich lang gebraucht habe, um ihn zu verstehen, weil es ja heute um CSS geht.
CSS, ich weiß nicht, ob ich den hoffen will, hatten wir den schon mal? Wir werden es gleich rausfinden.
CSS ist kein Kannibalismus.
Also, wie gesagt, CSS ist kein Kannibalismus. Wer weiß, was es damit auf sich haben könnte, schreibt es in die Kommentare, nachdem ihr auf die Glocke gedrückt habt.
Ach nee, es gibt ja gar keine Glocke.
Fall auf die Glocke.
Aber wir haben jetzt erklärt bekommen, wofür die Glocke ist bei YouTube.
Fangen wir mal an mit dem Bier, oder?
Ja.
Das Bier heute ist gesponsert, wollte ich erst mal sagen, also mein Bier zumindest ist heute gesponsert von den WWS-IV-Fanboys, von denen ich bis heute Morgen auch nicht wusste, dass es sie gibt.
Ich frage mich, gibt es vielleicht dann irgendwann auch nochmal die Konkurrenzgruppe WWS-IV-Ultras? Das gibt es bei manchen anderen Podcasts von Tim Pridloff.
Also, ich bin gespannt, aber Fanboys nehme ich auch. Ich würde aber auch Fangirls nehmen oder Fan-Divers und Fan-Fan, was es alles so gibt.
Deswegen trinke ich heute gesponsert von den WWS-IV-Fanboys ein Braustübelpilsner Feinhopfick aus Darmstadt.
An der Stelle vielen Dank, Stefan, den Spender. Das ist, glaube ich, momentan das einzige Mitglied der WWS-IV-Fanboys.
Aber vielleicht sind es auch noch mehr, das weiß ich nicht.
Hat noch Potenzial, auf jeden Fall.
Habe ich nicht nachgefragt.
Okay, aber dann würde ich sagen, ich habe hier so eine Plop-Flasche.
Eine Bügelflasche. Oh, schick, schick.
Genau.
Bei mir gibt es einen Estrella-Damm aus Barcelona.
Und dann würde ich sagen ...
Ich mache mal ... Moment.
Oh, das klang gut.
Zum Wohl.
Dann zum Wohl.
Jetzt haben wir gar nicht den Leuten Zeit gelassen, irgendwie ...
Selber eins aufzumachen, na ja, gut, wir reden ja jetzt schon irgendwie wieder drei Minuten.
Aber ihr dürft selbstverständlich zwischendurch Pause drücken und dann euer eigenes Bier aufmachen.
Oder ein Saft.
So, okay.
Oder ein Wasser.
Alles klar.
Ja, genau.
So.
Und dann würden wir jetzt ja vielleicht schon zur ersten Rubrik kommen, nämlich ...
BWS-IV präsentiert die Retrospektive.
Ja, was ist passiert?
Mein Windows hat mit irgendeinem Update vor einer Woche oder so den alten Edge durch Edge-Chromium ersetzt.
Endlich.
Und wenn ich dann nicht der Einzige bin, bei dem das passiert ist, und ich glaube, das läuft jetzt schon sogar seit irgendwie April oder Mai eigentlich, der Rollout,
dann haben wir jetzt inzwischen noch mehr Rechner, die standardmäßig einen Evergreen-Browser.
auf dem System installiert haben.
Ich glaube, das ist auch kurz ein Applaus wert.
Nee, also das macht mich echt glücklich, dass wir langsam jetzt eigentlich nur noch Evergreen-Browser haben, außer vielleicht im Firmenumfeld, wo noch irgendwelche IEs rumgeistern.
Aber damit kann man doch recht ganz gut arbeiten inzwischen.
Dann habe ich noch ein ... oder wolltest du dazu noch was sagen?
Du hast so zustimmend genickt, der Moritz.
Ich stimme auf jeden Fall zu.
Ein Follow-up zur letzten Folge, wo ich so ein bisschen großkotzig meinte, sag nicht Jay Query.
Zwei Tage später oder sowas habe ich ein YouTube-Video von der Muttersprachnamen gehört, der Australier war.
Und natürlich Jay Query sagte, und teilweise auch im US-Amerikanischen Englisch sagt man auch Query.
Da wollte ich einfach nochmal von meiner Großspurigkeit zurückrudern und sagen, ja, sagt's, wie ihr wollt.
Sag, was ihr wollt.
Sag einfach immer, was ihr wollt.
Genau.
Und dann habe ich zu guter Letzt noch ein Follow-up, nämlich tatsächlich mal eine Retro, was ich denn so gemacht habe.
Ich bin gerade dabei, ein Kundenprojekt mit ganz viel Legacy-Code zu überarbeiten und das alles mal ein bisschen sicherer zu machen.
Hauptsächlich MySQL-E umzuschreiben auf PDO.
Weil gut, mit MySQL-E könnte man zwar auch Prepared-Statements machen, aber die sind aus Gründen, die sich der Moritz vielleicht denken kann, damals nicht so umgesetzt worden.
Und, ja, wenn ich schon dabei bin, es umzuschreiben, schreibe ich es gleich auf PDO um.
Ist jetzt eher Backend, aber …
Ich weiß nicht mal, wovon du sprichst.
Nein, ich, können wir im Nachgeplänkel noch drüber reden.
Es gibt da auch zwei Klassen, die zur PDF-Generierung benutzt werden, TC-PDF und FPDI.
Und die habe ich dann auch gleich aktualisiert, noch ein bisschen was anpassen müssen, dass die laufen in der neuen Version.
Und dann habe ich zum Testen einfach mal ein paar Smileys eingegeben und das bringt uns dann wieder zurück, den Bogen zu Folge 7.
Ich bin so oldschools, ich sage noch Smileys.
Ich nutze ja auch noch hier Doppelpunkt, Minus, Klammer zu und so als Smiley.
Emoji ist natürlich der Bogen zu unserer Folge Nummer 7, wer die noch nicht gehört hat.
Und ich wollte da eigentlich nur mal gucken, so und habe festgestellt, in den PDFs funktionieren die natürlich nicht, weil da ja die Fonts entsprechend anders zusammengebaut werden und so.
Habe gedacht, ja, muss doch möglich sein, die durch Grafiken zu ersetzen.
Und dachte, ich mache das nur mal eben kurz, weil es ist ja eigentlich gar nicht beauftragt.
Das hat mich nur interessiert, wie das technisch möglich ist.
Und schwuppdiwupp sitze ich da seit zwei Tagen und bastle mein erstes Composer-Package,
um eine Library zu haben, mit der man Emojis in Grafiken übersetzen kann, in PHP.
Gibt es demnächst wahrscheinlich auf Packagist, wie das Ding heißt, über Composer.
Ist aber noch nicht fertig geworden, deswegen sage ich jetzt auch nicht, wie es heißt, weil sonst schnappt mir vielleicht noch jemand den Namen weg.
Aber kannst du mir sagen, warum möchtest du Emojis in Grafiken?
Für die PDF-Generierung.
Ach so.
Also die werden aus HTML zusammengebaut und in den PDFs, da sind ja keine TTF-Fonds,
sondern die sind dann umgewandelt in solche, in irgendwelche Binärdaten, keine Ahnung.
Und da sind halt alles mit Emojis, das funktioniert nicht.
Also bis vor ein paar Versionen von der Library ging, glaube ich, auch UTF-8 noch nicht richtig.
Da hatte ich mal Probleme mit chinesischen Schriftzeichen bei der Rechnungsgenerierung.
Also ist nicht ganz so einfach, deswegen als Grafiken ist man da auf der sicheren Seite.
Ach so, okay, ja, im PDF kann ich gut nachvollziehen.
Und in dem Zuge habe ich dann entdeckt, dass man in Gmail-Adressen inzwischen Emojis benutzen kann.
In den Adressen selbst?
Also wenn du jetzt zum Beispiel example.gmail.com als Adresse hast, dann kannst du ja bei Gmail,
kannst du ja ein Pluszeichen nach deiner eigentlichen Adresse eingeben und dann irgendwie für irgendwelche Spam-Registrierungen oder so,
dass du nachvollziehen kannst, wer deine Adresse weitergegeben hat.
Kannst du ja example-plus-fuba-at-gmail.com auch machen.
Und zumindest da habe ich getestet mit meiner Adresse.
Also du kannst wirklich example-plus-zungensmiley-at-gmail.com eine E-Mail hinschicken und die kommt auch tatsächlich an.
Also dann die Aubergine für deinen Pornhub-Account zum Beispiel.
Genau, genau das. Weiß ich nicht, warum man das unbedingt machen sollte, aber man kann es tun.
Es gibt ja auch Emoji-Domains inzwischen. Also du kannst dann irgendwie aubergine-at-smiley.com oder was weiß ich.
Ja, fand ich interessant.
Ja, cool.
Und das war es eigentlich auch von mir.
Ja, meine Retro.
Ich habe ein paar nachtragende, nee, nachtragende Elemente, wollte ich gerade sagen.
Ein paar Nachträge, Nachträge, Nachtrag, was ist denn der Plural von Nachtrag?
Nachtrage, Nachträge?
Nachträge.
Ich habe ein paar Nachträge für, auch zu vorherigen Folgen. Und zum Beispiel, das erste ist die römischen Zahlen bei Listen. Da hat ein Kollege sich nochmal bei mir gemeldet und hat mir, naja, hat versucht mir zu erklären, warum das denn bei 3999 aufhört, beziehungsweise wir haben dann auch gemeinsam versucht, eine Erklärung zu finden.
Interessanterweise ist genau das im Standard spezifiziert. Also in dem Fall beziehe ich mich auf, wir werden es in den Shownotes haben, den WG-Standard. Also ich weiß nicht genau, ob das im W3C-Standard, doch, ich glaube im W3C-Standard habe ich es auch gesehen und da war das auch so.
Und zwar, interessanterweise sind da diese römischen Ziffern spezifiziert und zwar als Beispiele 1, 2, 3 und dann geht es interessanterweise weiter, dann kommt Punkt, Punkt, Punkt in dieser Tabelle und dann kommen 3999 und 4000 und 4001 als Beispiele.
Und die Schreibweise, die da gewählt wurde, oder ich habe mich jetzt nicht in der Tiefe mit der Theorie da auseinandergesetzt, ist, dass da dann so ein Strich über den Symbolen ist.
Also die Schreibweise für 4000 wäre dann beispielsweise mit über Strichen i und v.
Ich nehme mal an, also bei mir im Browser sieht es auch, die Striche sind nicht über den Zeichen und ich nehme mal an, dass es diese Schreibweise vielleicht gar nicht gibt oder vielleicht nur in manchen Schriftarten und es deswegen vielleicht nie implementiert wurde.
Also im Standard ist das drin, es ist explizit spezifiziert, wie Zahlen über, also ab 4000 aussehen sollen, aber irgendwie hat es keinen Browser implementiert.
Was mir jetzt gerade auch noch aufgefallen ist, interessanterweise, dass diese Speck, in der ich mich da befinde, das ist eine Seite mit der kompletten Speck, die ist so groß, dass mein Browser gerade Probleme hat, das Ding zu rendern.
Ich kann nicht mal Text markieren in Echtzeit, sondern muss dann immer ein paar Sekunden warten, bis das erscheint, so groß ist die Seite.
Gut, ich habe auch ein altes Laptop, das gerade auseinanderfällt.
Ja, also das noch als Nachtrag, es ist richtig spezifiziert, wir haben auch noch einen Link dazu, aber offenbar haben es die Browserhersteller nicht eingebaut.
Aber interessant, dass sich da dann mal alle Browserhersteller einig waren, das nicht umzusetzen.
Ja, wir haben auch gemutmaßt, dass das wahrscheinlich, dass das vielleicht ein Update ist von der Speck, die es früher gab und einfach es nie jemand angepasst hat, weil, naja, das hat halt für früher immer, ich weiß auch nicht, ob es schon jemals einen Fall gegeben hat, wo jemand an diese Grenze gestoßen ist, aber ich finde, es ist eine interessante.
Also das ist der erste Nachtrag.
Also wir hatten da gerade schon wieder einen Aussetzer drin, vorhin auch schon mal vielleicht noch dazu sagen, wir haben heute ein bisschen technische Probleme, wenn da irgendwie zwischendrin mal eine Sekunde Moritz fehlt, dann liegt das nicht an euren Kopfhörern.
Nein, das liegt dann an mir, weil ich einfach dann nichts gesagt habe.
Zwischendrin Sekundenschlaf.
Ja, damit ist es nicht zu spaßen, Narkolepsie gibt es ja, also Leute, naja, müssen wir nicht weiter darauf eingehen.
Der zweite Nachtrag ist, auch ein anderer Kollege hat mich darauf hingewiesen, ich hatte es, ich weiß gar nicht, war das die letzte oder die vorletzte Folge, wo ich dieses One Line of Code vorgestellt habe und auch gesagt habe, es gab mal dieses 140 Bytes Projekt, aber ich finde da die Beispiele nicht mehr, habe ich gesagt.
Ich wurde darauf hingewiesen, dass man die bei GitHub noch finden kann, bei den Gists und habe da auch noch einen Link dazu, der noch in die Shownotes kommt.
Also da gibt es noch einige von den damaligen 140 Bytes Beispielen, wo innerhalb von, mit 140 Bytes halt wirklich crazy JavaScript Stuff gemacht wird, dann am Ende nicht mehr lesbar, aber krasse Sachen, die in den Tweet passen.
Also der Link sei dann an der Stelle noch nachgereicht, da kann man da nochmal reingucken.
Ich habe jetzt nicht genau geguckt, was da für Beispiele sind, aber es sind sehr, sehr, sehr viele.
Also es ist eine lange Liste bei GitHub, die man da runter scrollen kann mit den ganzen Forks.
Und das, ah, und dann genau, jetzt sind wir mit dem Nachtragen, mit dem Nachtragen sind wir jetzt fertig.
Ich habe aber noch einen Retro-Punkt, nämlich, weil es auch mich persönlich betrifft, die Bootstrap 5 ist raus, die erste Alpha-Version.
Und ich glaube, die größte Änderung daran ist, dass sie nicht mehr auf jQuery setzen beim JavaScript, sondern komplett alles, wenn wir leist.
Das überrascht mich jedes Mal, wenn es einfach so kommt.
Ja, weil, also das ist tatsächlich auch ein Applaus wert.
Also heutzutage jQuery, ja, sehr gute Entscheidung.
Ja, finde ich auch.
Und was ich auch sonst noch so in der Ankündigung gelesen habe, war, dass sie zum Beispiel das Grid-System jetzt aber nicht komplett umwerfen wollen.
Da wollen sie erst mal, das soll erst mal so bleiben.
Und ich glaube, auch auf Flexbox basiert, finde ich auch okay bei so einem Framework, dass man sagt, wir werfen jetzt nicht alle.
Aber ich glaube, das mit dem jQuery rauswerfen ist schon ein Schritt, der ist groß genug, dass es auch eine neue Major-Version rechtfertigt, sage ich mal.
Ich finde, das ist eine gute Sache.
Wir bleiben da dran, gucken mal, wann das dann wirklich auch final rauskommt.
Ich finde es aber cool.
Und da das auch bei mir im Einsatz ist, bin ich mal gespannt, wann wir dann da drauf irgendwie auch umziehen können.
Jo, damit ist meine Retro am Ende.
Mensch, wir sind ja richtig schnell heute.
Wahnsinn.
Dann kommt die ...
Die Property der Woche.
Ja, und die ist heute ein kleines Firefox 78 Special.
Firefox 78 Release Date ist am, ist am oder war am, je nachdem, wann man die Folge hört, 30.06.
Ich bräuchte so einen Sound zu.
Das haben wir schon mehrfach, ich glaube, es ist schon dreimal jetzt die Situation, wo wir ein Oh oder so gebraucht hätten.
Wir müssen die Library noch ein bisschen erweitern.
Genau, das ist von Aufnahmedatum abgesehen der nächste Dienstag, das heißt in vier Tagen.
Und da gibt es einige Neuerungen und ich habe jetzt mal was rausgepickt, einmal zum CSS und einmal zum JavaScript.
Und beim CSS sind das die Pseudoklassen Is und Where.
Hast du dich damit schon mal auseinandergesetzt?
Nee, tatsächlich gar nicht.
Dann kannst du auch noch was lernen.
Ich lerne von mir ständig.
Und genau, also Is und Where, verlinke ich auch einen Artikel dazu, von dem ich auch die Information bezogen habe zum Teil.
Kommt jetzt wie gesagt in Firefox 78, ist aber auch schon im Safari Tag Preview 106 von Mitte Mai schon drin.
Und bei Chrome ist zumindest Is, soweit ich weiß, hinter einem Flag versteckt.
Da kann man ein bisschen nachhelfen, das zu beschleunigen, indem man die Bug-Tickets mit einem Sternchen versieht.
Da werde ich die Links auch in die Shownotes posten.
Ich lese die jetzt nicht vor.
Aber man kann tatsächlich so ein bisschen, je mehr Leute da auf Sternchen klicken, umso eher sehen die Chromium-Entwickler, aha, das ist ein viel gewünschtes Feature.
Ja, wie dem auch sei, ist, war vorher schon als Minus-Mod-Minus-Any verfügbar, als Pseudo-Element, äh Pseudo-Klasse, Entschuldigung.
Und ist jetzt eben als Is verfügbar.
Und was macht das Ganze?
Man kann damit viel kompakter komplexe Selektoren schreiben.
Also wenn ich jetzt zum Beispiel alle Paragraphs in Header, Main und Footer jeweils irgendwie stylen will, oder vielleicht sogar noch mit dem Hover,
Dann hätte ich jetzt also Header, P-Hover, Main, P-Hover und Footer, P-Hover, ähm, das ist natürlich relativ lang.
Klassischerweise, wenn man jetzt den Pre-Prozessor nutzt, LESS oder SAS, ähm, kann man die Verschachtelung nutzen.
Und, äh, das ist, erlaubt mir das so ein bisschen ohne Verschachtelung zwar, ähm, in normalem CSS zu nutzen.
Das heißt, ich kann sagen, Doppelpunkt ist, Klammer auf, dann schreibe ich einen Selektor, zum Beispiel Header, Komma, Main, Komma, Footer, Klammer zu und dann P-Hover.
Und dann wird das, ja, dieses Query ausgeführt und steht dann quasi für ein Element und das nachfolgende Query wird, äh, das Selektor wird ganz normal ausgeführt.
Und, ähm, genau, das ist einfach eine einfache Schreibweise, dass man sich Tipperei spart und das Ganze auch ein bisschen übersichtlicher ist.
Ähm, die Spezifizität ist ein wichtiger Punkt. Ich hab, ich hab schon wieder Spezifizität gesagt, oder?
Ja.
Flashback, äh, zu unserer Folge Nummer 8, wer die noch nicht gehört hat. Wir spannen heute viele Bogen. Äh, die Spezifität, ich glaub, ich krieg das auch nicht raus, also für mich wird das immer die Spezifizität bleiben. Ähm, die richtet sich nach dem
Danke, danke, danke, danke, danke, danke, danke, danke, danke.
Wie die sich, äh, wie die sich, äh, wie die sich, äh, verändert, äh, je nachdem, was ich da reinschreibe, äh, das ist ganz nett, das mal zu sehen.
Und dann gibt's, äh, und dann gibt's noch, äh, das macht, äh, das macht im Endeffekt genau das Gleiche. Also, die Syntax ist genau die Gleiche und die Funktionalität ist genau die Gleiche, aber, weder die Pseudoklasse selbst noch die Argumente, die ich ihr übergebe, haben eine Auswirkung auf die Spezifität.
Ja, sehr gut.
Das heißt, ähm, das ist gedacht für, für Regeln, die einfach überschreibbar sein sollen, ja. Also, wenn ich irgendwelche Standardwerte übergebe, zum Beispiel in, in Style Sheets für Normalisierung, es gibt diese Normalized CSS und, äh, ja, diverse, oder, oder ich schreib selber ein Base CSS, äh, das ich dann für meinen Dienst irgendwie überschreiben will.
Und dann hab ich ja das Problem, wenn ich das dann, äh, festgelegt habe, dann muss ich das mindestens mit der gleichen Spezifität überschreiben oder ich muss Important nutzen, was ich ja möglichst vermeiden will, äh, zum Beispiel für SVG-Farben hab ich irgendwo als Beispiel gesehen, ja, dass man bei, bei SVGs, die, die man Inline einbaut und die man irgendwie färben will, dass man da die Stroke-Farbe, die Standardfarbe irgendwie festlegt und dann muss ich das natürlich immer mit der entsprechenden Spezifizität, ah, jetzt ist das wieder daneben gegangen, Spezifität, ähm, überschreiben, das kann ich mir daneben sparen.
Genau, das soweit zum CSS, gibt natürlich noch einige andere Änderungen, äh, die ich mir jetzt aber ersparen will und euch, und, äh, es hat sich aber auch in der JavaScript-Engine was getan, äh, Firefox JavaScript-Engine heißt ja Spider-Monkey und die erhält mit dem nächsten Release eine komplett neue RegEx-Engine.
äh, komplett neu ist eigentlich nicht ganz richtig, äh, das war vorher ein Fork von, von der, äh, ERAG-Exp-Library, die in, in V8 benutzt wird, V8 ist ja die, die, äh, JS-Engine von Chromium, das heißt, die haben das einfach geforkt und haben das für ihre Bedürfnisse angepasst, um das in, in Spider-Monkey zu integrieren,
aber es wurde immer schwerer, neue Features, äh, da reinzubringen und zu updaten, weil natürlich die, die Stände der Repositories immer weiter auseinander gelaufen sind und die Anpassungen, die da für die Firefox-Engine gebraucht wurden,
immer, immer mehr wurden und dann hat man einen neuen Ansatz gewählt und zwar einen sogenannten Shim-Layer erstellt zwischen Spider-Monkey und ERAG-Exp, das heißt, man kann einfach ERAG-Apps, wer hat sich denn diesen Namen ausgedacht, ERAG-Exp, ähm, benutzen, ohne das anzupassen
und das greift dann über so einen Zwischenlayer auf die, auf die, auf die APIs aus dem, aus der anderen JS-Engine, äh, zu und, äh, das Schöne ist, dass, äh, das Mozilla-Team auch, äh, den Upstream, also das eigentliche Repository von ERAG-Exp, äh, mit Patches, äh, versorgt und ich finde, das ist ein tolles Beispiel, ähm, ja, für die Zusammenarbeit, ähm, ja, trotz, trotz, trotz Konkurrenz, sowohl es eigentlich zwei unterschiedliche konkurrierende Browser-Hersteller sind, aber am Ende profitieren alle davon, also Open-Source lohnt sich.
Und ganz kurz noch, was das für neue Features sind, also das sind alle Features, die mit ECMAScript 2018, äh, vorgestellt wurden, das heißt, Look-Behind, ähm, das heißt, das, das, was nur gematcht wird, wenn, wenn, wenn was anderes vorausgeht, ähm, ähm, Dot-All-Flags, das ist dieser S-Modifier, den ich hinten bei REG-Ex, äh, anstellen kann, äh, das heißt, der entscheidet, dass, äh, das Punktzeichen, äh, auch Zeilenumbrüche mitmatcht, was normalerweise nicht der Fall ist, äh, dann Unicode-Property-Escapes,
Das sind benammte Unicode-Zeichengruppen, ähm, wo man zum Beispiel bestimmte Sprachen rausfiltern kann, also ich möchte alle, äh, alle Zeichen folgen, die, äh, die der chinesischen Sprache entsprechen, oder der japanischen, oder koreanischen, oder hindu, oder was weiß ich,
Oder eben zum Beispiel auch Emojis, weil wir es vorhin von Emojis hatten, also es gibt da auch, äh, Match-Gruppen im, äh, Unicode-Bereich, mit denen ich rausfiltern kann, äh, ja, das ist ein Emoji.
Geht übrigens bei PHP nicht so schön, wie das jetzt bei, äh, JavaScript der Fall ist, weil das diese Match-Gruppen nur sehr eingeschränkt unterstützt.
Aber das nur am Rande. Äh, und zu guter Letzt, named Capture Groups, das heißt, ich kann, ähm, eine Gruppe, mit runden Klammern mache ich die ja auf, äh, ganz normal aufmachen,
Und ganz vorne schreibe ich Fragezeichen, dann wie ein HTML-Tag, Spitze, Klammer auf, Spitze, Klammer zu, und dazwischen dann irgendeinen, äh, Namen, den ich mir aussuche, ja, also Name, sag ich jetzt mal,
Und kann dann die Gruppen benamen, und dann später, wenn ich die mit, äh, mit exec ausführe, die RegEx, äh, über Matches, Punkt, Groups, Punkt, und dann den Namen der Gruppe drauf zugreifen.
Und das finde ich eine ziemliche Erleichterung, weil man bei sehr komplexen RegEx-Ausdrücken schon das Problem hat, dass man irgendwann nicht mehr durchblickt, welche Klammer ist denn jetzt,
Welche Gruppe, und dann habe ich vielleicht noch Non-Matching-Groups drin, äh, die dann am Schluss nicht mehr drin sind, also, da kommt man schon mal gerne durcheinander, und mit dem Naming kann man sich da sicherlich einiges an Zeit und Nerven sparen.
Auf die Gefahr, dass ich mich wiederhole, äh, ein, ich glaube, ich habe das schon mal erzählt, aber ein ehemaliger Kollege von uns hat immer gesagt, ähm, wenn du ein Problem hast, und dann RegEx, also, das versuchst du mit RegEx zu lösen, hast du zwei Probleme.
Ich kenne das als, äh, ich, I had 99 Problems, and then I used RegEx, and I had 100 Problems, ja, ähm, ja, aber es ist, ist natürlich auch ein mächtiges Werkzeug, und wenn man sich da ein bisschen die Arbeit erleichtern kann, umso besser.
Absolut, also, ganz kurz noch, äh, CSS is und where, ich habe mir das jetzt kurz parallel mal angeschaut, echt coole Geschichte, gefällt mir, gefällt mir wirklich gut, möchte ich gerne jetzt einsetzen, sofort, weil, ich glaube, da kannst du, da kannst du echt eine Menge Zeilen CSS sparen, äh, also, das.
Also, nachher gleich, gleich direkt mal die Bug-Tickets, äh, mit Sternchen versehen, damit das in Chrome auch ganz schnell kommt.
Genau, sofort, ihr macht das jetzt auch, zu Hause an den Empfangsgeräten, sofort, äh, sofort hier Sternchen für unsere Tickets, die wir gerne machen.
Man kann ja, der Spam-Spot ist heute recht lang, das heißt, man kann das ja während des Spam-Spots machen, den kann man ja nebenher hören.
Ah, wegen dem Spam-Spot, ähm, hätte ich auch eine Alternative gehabt, aber dann machen wir die nächstes Mal.
Nee, du kannst auch.
Kein Problem.
Ja?
Kein Problem, nee, lass uns, wir nehmen mal den Spam-Spot heute noch.
Gut, okay, dann lasse ich ihn laufen.
Warte mal, stopp, stopp, stopp, wir müssen vielleicht kurz nochmal erklären für die Hörer, die das heute zum ersten Mal hören, oder die uns vielleicht heute zum ersten Mal hören, was denn der Spam-Spot eigentlich ist.
Das hätte ich hinterher gemacht, aber erzähl, dann darfst du mal erklären, ich habe ihn mal die letzte Mal erklärt.
Ich, ich, ich, ich, ich, ich erkläre mal.
Der Spam-Spot ist, äh, in, in sehr gut vertont, weil der Konstantin, ähm, eigentlich gerne mal Synchronsprecher oder Radiomoderator geworden wäre.
Nein, also das unterstelle ich ihm nicht einfach mal.
Er wäre auf jeden Fall ein guter geworden, ein, ein, äh, vor allem ein guter Spot-Moderator.
Ähm, der Spam-Spot ist eine echte Spam-Mail, die wir bekommen haben, beziehungsweise, ich weiß nicht, ob es in dem Fall wirklich eine ist, die wir bekommen haben oder zugesendet bekommen haben.
Ähm, das, es kommt auch vor, dass wir sowas zugesendet bekommen, wenn ihr eine geile Spam-Mail habt, schickt sie uns.
Und, äh, er vertont das dann, also es ist, äh, selbst, selbst vertonte Spam-Mails auf die ganz eigene Art und Weise und sehr unterhaltsam, kann ich auf jeden Fall nur sagen.
Und heute etwas länger, aber nicht weniger unterhaltsam.
Spam-Spot ab.
Sensor-Dienste.
Mehr als das haben wir vollständige Speicherauszüge von diesen Daten.
Wir sind uns ihrer kleinen und großen Geheimnisse bewusst.
Oh ja, sie haben das ganze heimliche Leben.
Wir haben geguckt und aufgezeichnet, wie sie Spaß auf Webseiten für Erwachsene hatten.
Herrgott, was für Geschmack und Leidenschaften haben sie.
Aber die interessanteste Sache ist, dass wir sie zeitweise auf der Webkamera ihres Geräts aufgenommen haben.
Die Webcam wurde mit dem synchronisiert, was sie gerade sich angesehen haben.
Ich bin der Meinung, dass sie nicht wollen, dass ihre Kameraden und Angehörigen alle ihre Geheimnisse sehen und natürlich die Person, die ihnen am nächsten ist.
Ab dem Zeitpunkt, in dem dieser Bericht gelesen ist, funktioniert der Timer.
Sie haben 48 Stunden, um das oben gedachte Geld einzuzahlen.
Sobald dieses Geld auf unserem Konto ist, löschen wir alle kompromittierende Materiale.
Betrüblicherweise, sie müssen über ihre Sicherheit denken.
Wir hoffen, dass sie diese Geschichte lehrt ihnen, ihre Geheimnisse korrekt zu bewahren.
Geben sie Acht auf sich.
Zu Risiken und Nebenwirkungen lesen sie die Dokumentationen oder fragen sie ihren Systemadministrator.
Also der Spam, der wird immer länger und auch technisch immer gewiefter.
Also die erkennen, sobald ich fertig gelesen habe und lassen dann den Timer laufen.
Das ist schon ...
Nein, der Timer funktioniert dann. Das heißt nicht, dass er läuft.
Ach, diese Leidenschaft, Mensch.
Also ich kann jetzt auf jeden Fall nochmal sagen, ich wusste jetzt nicht genau, was kommt.
Das ist eine Spam-Mail, die ich bekommen habe.
Und falls ihr wissen wollt, was ich so auf was für Erwachsenen-Seiten, die ich mich so rumtreibe,
da müsst ihr einfach die Kollegen mal anschreiben.
Die können euch das sagen, für nur 983 Dollar.
Das ist auch so eine komische Summe, oder?
Ja, das ist der Wechselkurs wahrscheinlich.
So spezifisch.
Man müsste jetzt mal gucken, welcher Wechselkurs eine gerade Zahl ergibt,
dann weiß man, aus welchem Land die Erpresser kommen.
Ja, aber meinst du wirklich?
Man kann es natürlich auch lassen.
Ich würde echt, also ich kann es mir nicht so richtig erklären,
wie kommen die auf 983 Dollar?
Also ich habe die, das war ja wirklich ein deutscher Text, ne?
Also erst einmal, die wollen Dollar.
Warum wollen die Dollar und nicht Euro?
Und dann 983?
Na gut, vielleicht sind das irgendwie…
Also ich meine, man hört ja, dass das durch ein Übersetzungsprogramm gejagt wurde.
Vielleicht hat das gleichzeitig auch noch den Wechselkurs umgerechnet.
Man weiß es nicht.
Das neue Feature von Google Translate, jetzt auch mit Wechselkurs.
Aber genug der Mutmaßungen, machen wir weiter.
Hier ist WWS IV mit dem Tagesthema.
Jetzt wird es ernst.
Jetzt kommt der Teil, woraus kommt, dass ich mich wieder nicht richtig vorbereitet habe.
Aber ich denke mir immer, wenn ich euch sage, dass ich mich nicht vorbereitet habe,
dann ist es auch kein Problem.
Finde die Kritik sanfter aus.
Wir haben gar nicht ausgemacht, wer das Thema vorstellt, anspricht.
Weiß nicht, willst du, soll ich?
Da, glaube ich, das erste Thema des Themas von mir ist, fange ich mal damit an.
Also wie schon ganz am Anfang angekündigt, es geht um CSS, das wir gerne hätten und das
noch bislang ein feuchter Traum geblieben ist, ein feuchter WWS IV Traum.
Dann möchte ich, bevor du loslegst, noch ganz kurz was einschieben.
Wir haben ganz vergessen am Anfang…
Wir haben ganz vergessen am Anfang unsere Hörerinnen und Hörer zu loben, weil die Interaktion nämlich
viel, viel besser geworden ist schon.
Also das hat mich richtig gefreut.
Ich habe, wie schon öfter mal in der Vergangenheit, geschrieben so, hey, wir haben das und das
als nächstes Thema, schreib doch mal was und wir reden drüber.
Und es kamen diesmal tatsächlich auch mehrere Antworten zurück auf Twitter und auch die Kommentare
auf dem Blog und so.
Also es wird und das freut uns sehr.
Also es macht natürlich umso mehr Spaß, das Ganze hier zu betreiben, wenn da auch was
zurückkommt und es kam sogar Bier zurück jetzt inzwischen.
Und Kommentare, also immer her damit und super.
Vielleicht liegt es auch am Thema, wer weiß, wer weiß.
Oder vielleicht hast du nur diesmal besser gefragt, was weiß ich, keine Ahnung.
Wir freuen uns auf jeden Fall, dass wir Dinge von euch gehört haben.
Ich kann jetzt schon mal sagen, wir haben insgesamt so viele Themen gesammelt, die wir…
Wir haben jetzt gerade wieder irgendwie drei Sekunden aussetzen, aber ich glaube, man weiß, was du gesagt hast.
Wir haben so viele Themen gesammelt, dass…
Ich weiß, was ich gesagt habe.
Das reicht ja.
Ich kann auch nochmal anfangen.
Wir haben so viele Themen gesammelt, dass wir, dass das zu viel ist für eine Folge.
Das heißt, wir werden ziemlich sicher noch eine Folge machen mit den weiteren Themen.
Also falls ihr jetzt uns ein Thema genannt habt und das jetzt heute nicht drankommt, es kommt noch dran.
Nur nicht jetzt in dieser Folge, sondern dann wahrscheinlich in der nächsten.
Oder wer weiß, vielleicht machen wir sogar noch eine dritte Folge.
Dann aber vielleicht noch mit was anderem dazwischen.
Wer weiß, wir sind damit noch nicht durch nach heute, weil es gibt einfach, haben wir dann gemerkt, sehr, sehr viele Sachen, die wir uns wünschen würden, aber die es in der Form noch nicht gibt oder die noch zu weit weg sind.
Manche von den Sachen, die wir hier haben, sind teilweise schon anspezifiziert, aber halt noch in keinem Browser verfügbar.
Genau.
Und ich fange jetzt einfach mal an.
Und zwar, was viel gewünscht war, wo auch schon viel drüber gesprochen wurde und auch schon, das ist, das Thema ist auch schon lang unterwegs, ist der Parent Selector in CSS.
Also ein Selector, mit dem ich nicht nach innen gehe von meinem HTML-Baum aus, sondern nach außen, mit dem ich auf ein Eltern-Element zugreifen kann und das stylen kann.
Der erste Artikel, den ich da, oder der älteste Artikel, den ich zu dem Thema gefunden habe, ist tatsächlich von 2008.
Der hat eine Syntax vorgeschlagen mit einem Größerzeichen oder sogar mit Ausrufezeichen Größerzeichen, um nicht Parent zu nehmen.
Fand ich auch ganz interessant.
Meinst du das Kleinerzeichen?
Weil Größerzeichen ist ja Direct Child.
Entschuldigung, ja, genau, ich meine das, ja, ich meine das Kleinerzeichen.
Korrekt, falsch gesagt.
Macht ja auch Sinn, also, ne, Direct Child nach rechts zeigen und wenn ich Parent will, eben nach links zeigen.
Jetzt habe ich wieder so einen peinlichen Fehler gemacht, Mensch.
Aber ich bin sofort hier Konstantin to the rescue.
Ist sofort, sofort zur Stelle, Konstantin rettet mich jedes Mal, wenn ich Quatsch rede.
Genau, so, der Artikel, den ich da gefunden habe, ich weiß nicht, vielleicht gab es das auch schon noch früher, aber der älteste, den ich gefunden habe dazu, war, ist von Sean Inman von 2008, der eben da diese Syntax vorgeschlagen hat.
Und dann gab es irgendwie witzigerweise 2010 nochmal so ein Boost, wo zwei bekannte Leute aus der Webszene darüber geblockt haben.
Und zwar Remy Sharp hat damals etwas vorgeschlagen wie so eine Art Pseudoselektor, nämlich Doppelpunkt Parent.
Dann nehme ich mal an, nur auf den direkten Parent zugreifen kann, also nicht irgendeinen, sondern nur den, ja genau, das direkte Eltern-Element, also das nächste Element, eins oben drüber.
Und interessanterweise, das habe ich jetzt vorhin auch erst gelesen, hat Jonathan Snook 2010 auch Has vorgeschlagen.
Und Has, das habe ich dann gesehen, das ist ja schon quasi, das ist schon tatsächlich in Überlegung, das wirklich richtig umzusetzen.
Genau, es gibt eine Seite dafür bei MDN tatsächlich schon mal, also es ist als Experimental Technology gekennzeichnet.
Normalerweise hat aber noch nicht mal Firefox das implementiert, also wenn man sich diese Matrix da anschaut, Browser-Compatibility, da ist alles rot.
Aber es ist wohl schon mal in Überlegung, sonst würde es diese Seite nicht geben.
Ja, es ist auch bei Canary Use schon mit drin und da ist halt auch alles rot.
Ja, also es ist Selector's Level 4 Working Draft aktuell.
Ja, es wird Zeit, dass das kommt.
Ich habe schon öfter gehört, naja, dass es wohl Probleme gibt mit der Performance beim Rendering.
Und dass das der Grund ist, warum das noch nicht umgesetzt ist, weil wohl das Problem ist, dass man, dass jede CSS-Eigenschaft, die den Parent Selector hat, quasi nochmal auf alles Einfluss nehmen kann, was drumherum ist.
Also auf alles bis zum Root-Element.
Und dass das eben Rendering-Performance-Probleme machen würde, wenn man das umsetzt.
Vielleicht ist das der Grund, das ist jetzt nur eine Mutmaßung, weil ich mich mit den Technikalitäten da im Hintergrund nicht auskenne mit dem Rendering, warum man diesen Weg gewählt hat, dass man eben nicht sagt, ich mache den Selector und sage dann und davon möchte ich das Parent Element, sondern dass man mit Has eigentlich den umgekehrten Weg geht.
Das heißt, ich wähle ein Element und ich gucke dann, ob dieses Element irgendwas enthält.
Weiß ich nicht, ob das damit zusammenhängt, weil ich habe mir so überlegt, was fände ich denn eigentlich den geschickteren Weg, weil unter Parent Selector stellt man sich halt eben vor, ich kann explizit das Parent auswählen.
Aber Has ist ja eigentlich so ein bisschen von hinten durch die Brust ins Auge.
Weiß nicht, ob das technische Gründe hat oder ja.
Ach, ist mir am Ende egal.
Im Endeffekt ist es egal, genau.
Ich muss jetzt auch dazu sagen, die Sachen, die wir heute vorschlagen, da ist mir ziemlich egal, wie realistisch das ist oder wie einfach oder schwer das umzusetzen ist.
Ich bin da komplett der CSS-Anwender und sage, ich will es einfach haben, setzt mir das um.
Und naja gut, die Syntax sollte am Ende halbwegs verständlich sein, aber mit Has käme ich jetzt auch klar.
Wobei das Kleinerzeichen ist, finde ich jetzt auch nicht unelegant, finde ich auch relativ selbsterklärend, finde ich, wenn man es im CSS sich anschauen würde.
Aber ja, da gibt es, wie gesagt, es gibt einige Artikel dazu, die sich schon damit beschäftigt haben.
Es gibt auch einen CSS-Tricks-Artikel, der verschiedene Sachen da auflistet, die schon mal vorgeschlagen wurden.
Ich sage einfach nur, haben wollen.
Hast du Beispiele für Anwendungsfälle? Sonst hätte ich jetzt noch zwei oder drei.
Warte, ich muss kurz gucken.
Ich meine, was mir noch einfällt, wo ich das gerne gehabt hätte, wäre, wenn ein Input-Element invalid ist, dass ich dann zum Beispiel das Label dazu stylen kann.
Ja, den Fall hatte ich auch tatsächlich schon.
Der klassische Fall.
Also ich meine, da gibt es ja auch den Pseudo-Selector-Invalid, glaube ich.
Ja, aber da kriege ich dann halt wieder das Parent-Element nicht.
Genau, und da möchte ich dann unter Umständen auch zum Beispiel das komplette Label rot hinterlegen oder so, irgendwie sowas.
Das wäre sehr, sehr praktisch für so einen Fall.
Ja, damit, also ich, wenn du nichts mehr dazu hast.
Ich hätte noch so ein paar Beispiele, also zum Beispiel A-Doppelpunkt-Has, Klammer auf, dann direkter Child-Selector-Image für einen Link, der ein Bild enthält.
Oder H1-Doppelpunkt-Has mit plus P, also alle Überschriften, auf die direkt ein Absatz folgt.
Ja, das sind so Standardfälle.
Oder zum Beispiel, fand ich interessant, Section und dann Not und Has und dann H1, H2, H3, H4, H5, H6.
Das heißt, alle Sections, die keine Überschrift enthalten.
Also wenn ich die Seite schön gegliedert habe in mehrere Sections und aber nur manche davon enthalten tatsächlich eine untersche Überschrift, könnte man das interessant, also bei unserer Seite, zum Beispiel bei 4.8 Design, hätte ich das tatsächlich gebrauchen können, um da bestimmten Einfluss zu nehmen, wie die Sections dann hell oder dunkel hinterlegt sind.
Also es gibt auf jeden Fall genug Anwendungsfälle und deswegen ist der Parent-Selector auch was, was ja tatsächlich bei mir auf der Liste auch ganz oben steht.
Also das war auch, als wir das Thema angegangen sind, so das erste, was mir eingefallen ist, ja, Parent-Selector ist so ein klassisches Ding.
Beziehungsweise nächstes war das zweite, auf das erste, was mir eingefallen ist, kommen wir gleich als nächsten Punkt.
Aber ich wollte noch sagen, der geschätzte Kollege Jan Wiemers hat auf Twitter auch auf den Tweet reagiert und hat gemeint, Parents Until wäre er sofort dabei.
Das klingt für mich so ein bisschen wie jQuery.
JQuery, richtig, genau.
Warte mal, wie hieß das denn?
Das heißt Parents Until.
Also es gibt Closest, aber es gibt auch Parents Until.
Closest fängt beim Node selbst an und geht dann, wenn der nicht matcht, hoch bis zum nächsten, der trifft.
Und Parents Until fängt beim Parent-Node an und geht so weit, bis er auf den Node trifft, aber inkludiert den Node dann nicht, den Parent-Node, den er findet.
Genau, also ich verliege nochmal auf jQuery, auf die entsprechende Dokumentationsseite.
Ja, weiß ich nicht, ob das, hm, ist das sinnvoller als Parent?
Also, ja, ja, keine Ahnung, es ist natürlich schwer zu sagen.
Das nächste Match, um der Element zu treffen, ist natürlich schon nicht.
Also es ist im Endeffekt wie ein Parent Selector, nur dass ich halt zusätzlich noch einen Selector angeben kann, welches Parent ich dann treffen will.
Genau, bei Parents Until, beziehungsweise bei Closest matcht ja am Ende nur eins, ne?
Und bei CSS Parent Selector würden ja alle matchen, oder?
Parents würde alle matchen, aber Parents Until natürlich nur bis dahin, wo er das erste Mal drauf trifft.
Ja, genau, also wir wollen es haben, Browser, Händler, alle Sorten, einfach mal bitte einbauen.
Ganz, ganz einfach ist es bestimmt.
Deswegen ist es auch schon noch nicht da.
Genau.
Ja, nächster Punkt, oder?
Ja, nächster Punkt.
Das wäre Nth Letter, beziehungsweise Nth Word, Nth Line.
Das hätte ich ganz gut gebrauchen können, als ich eine lustige Spielerei gemacht habe auf, wo wir sind, ist vorne.show.
Wenn man da über die Headline fährt, dann bewegen sich da so ein paar Buchstaben.
Und damit die das tun, musste ich dann tatsächlich jeden Buchstaben in ein Span rappen, was nicht sehr elegant ist und halt auch aus Accessibility-Sicht suboptimal, sage ich mal.
Und man fragt sich halt so ein bisschen, also wir haben schon Firstline und wir haben Firstletter als Pseudo-Elementselektoren.
Wir haben außerdem, ja, First Child, Last Child, Nth Child, Nth Last Child sogar, kannte ich zum Beispiel auch noch nicht, dass man da auch von hinten selektieren kann.
First of Type, Nth of Type, dann, was ich auch nicht kannte, Last of Type, Nth Last of Type, Only Child und Only of Type.
Die vier habe ich zum Beispiel auch noch nicht.
Also ich wusste tatsächlich nicht, dass es das gibt und habe da auch gar nicht danach gesucht und hatte aber tatsächlich mal so einen Fall, wo ich das gebraucht hätte.
Und dann habe ich irgendwie, wie habe ich denn das gemacht?
Ich weiß gar nicht mehr, ich glaube, ich habe dann ja, also First Child und Last Child einfach kombiniert.
Hätte ich das mal gewusst, dass es auch Only Child gibt.
Ich möchte ganz, ganz kurz, jetzt muss ich kurz abschweifen.
Nur, falls du mal Firstletter verwenden willst, ich weiß nicht, bei welchen von den anderen, die du erwähnt hast, das auch noch gilt, aber bei Firstletter auf jeden Fall,
darauf kann man nicht alle CSS-Eigenschaften anwenden, leider.
Man kann damit leider nicht alles machen, was man gerne möchte.
Das sei an der Stelle mal kurz angemerkt, weil da bin ich schon mal ziemlich auf die Nase gefallen, weil ich gedacht habe,
hey, ich will hier jetzt, ich weiß gar nicht mehr, was ich machen wollte, Position Absolut oder irgendwie sowas.
Ich wollte den Buchstaben wild durch die Gegend schieben und verrückte Sachen damit machen.
Und das ging dann leider nicht.
Und ich habe mir nicht erklären können, warum nicht.
Nämlich, weil es tatsächlich im Standard steht, dass nur bestimmte Eigenschaften da drauf wirken.
Gut, ist halt auch ein Pseudo-Element, ist halt kein richtiges Element, da greifen halt bestimmte Einschränkungen.
Genau, also es gibt entsprechende analog aufgebaute Selektoren und da ist halt dann schon die Frage,
warum, wenn wir Firstline und Firstletter haben und bei anderen Sachen auch Enth selektieren können,
warum funktioniert das bei Buchstaben nicht oder bei Wörtern oder bei Zeilen?
Also ich finde, das ist auch, das war das Erste, was mir eingefallen ist, eben weil wir diesen konkreten Fall da hatten,
als wir die Webseite gebastelt haben.
Und ja, deswegen steht das bei mir eigentlich auf der Wunschliste auch ganz oben, zusammen mit dem Parent-Selektor.
Kann ja nicht so schwer sein.
Nee, eben. Und es gibt eine JavaScript-Library, Enth-Everything heißt die, und die simuliert das Ganze.
Wenn ich das richtig, ich habe es mir jetzt gar nicht so tief angeschaut,
Wenn ich das richtig sehe, kann man tatsächlich dann die Selektoren in Style-Blocken zumindest verwenden
und dann wird das irgendwie umgebogen mit JavaScript.
Ja, aber da brauchen dann auch Elemente drum, oder?
Ja, ja, klar. Natürlich, das muss dann auch Spans drumherum bauen, um die einzelnen Buchstaben und so.
Also es ist nicht sehr schön.
Und das hat dann vielleicht auch wieder Seiteneffekte, wenn ich dann irgendwie einen Selektor habe,
der dann auf das Span-Auswirkungen hat, was ich vielleicht gar nicht will.
Also, ja, nicht sehr schön solche Workarounds und wäre natürlich toller, wenn wir das mit CSS einfach machen könnten.
Ja, also hier plus eins von mir. Ich weiß aber nicht, ob das schon in irgendeiner Liste steht. Keine Ahnung.
Habe ich tatsächlich in der Vorbereitung jetzt vergessen zu gucken, ob es tatsächlich schon Bug-Reports vielleicht gibt bei den verschiedenen Browser-Herstellern.
Das können wir ja den Lesern einfach, äh, den Lesern sag ich, den Hörern, den Hörerinnen einfach mal auftragen.
Schaut doch mal nach, ob es irgendwo Proposals gibt oder irgendwelche Listen, wo man Sternchen klicken kann für nth Letter, nth Word oder nth Line.
Und dann schreibt uns den Link.
Und schreibt es in die Kommentare.
Schreibt es in die Kommentare.
Ist das jetzt irgendwie schon so ein dummer Running-Gag geworden?
Keine Ahnung.
Ja, vor allem schickt uns den Link, dann können wir da auch irgendwie Sternchen klicken oder Daumen hoch oder Pfeil nach oben oder plus eins oder sowas.
Also, äh, auch da wäre ich, wäre ich sofort dabei, möchte ich gerne haben.
Ähm, ich weiß jetzt nicht, bei nth Letter, ja doch, also immer dann, immer dann, wenn man so ein bisschen crazier rumdesignt und, äh, dann braucht man sowas.
Natürlich, wenn ich jetzt nur irgendwelche statischen, äh, langweiligen Dokumente haben will, also irgendwie API-Dokumentation, dann brauche ich das wahrscheinlich eher nicht.
Ja, vielleicht, vielleicht ist nth Letter gar nicht so das beste Beispiel, weil das natürlich wirklich sehr kleinteilig ist.
Ähm, aber nth Word, wenn man irgendwas highlighten will, ohne dann darum ein Span zu machen und vor allem nth Line, also wenn ich die ersten beiden Zeilen markieren will, zum Beispiel in einem Absatz, dass die irgendwie schöner hervorgehoben sind.
Also, ich finde, auf jeden Fall gibt's genug Use Cases für diese Geschichte.
Ja, dafür nutze ich normalerweise First Child und nutze dann halt den ersten Absatz oder so.
Also, ja, was mit Textumbruch dann halt wieder Probleme macht.
Ja, macht das mit Textumbruch Probleme? Wie meinst du?
Naja, wenn, wenn, je nachdem, wie breit der Text ist und wie der im Browser gerendert wird und der User hat vielleicht eine höhere Schriftgröße eingestellt bei sich im Browser-Style-Sheet oder im User-Style-Sheet, dann liest der Text anders und dann hast du halt nicht die ersten beiden, sondern die ersten drei Zeilen vielleicht anders farbig markiert.
Ach so, nee, ich meinte den ersten Absatz, egal wie viele Zeilen der dann hat.
Ja.
Aber ja, also, ich hab halt gerade so an klassisches Buchdesign gedacht, also so wirklich klassisch im wörtlichen Sinne, also alte Typografie.
Und CSS versucht ja oft genau diese Dinge, die man da, die man da findet, in so klassischer Typografie nachzubilden und genau diese Fälle anzubieten.
Deswegen kommt, glaube ich, auch First Letter, daher kommt auch First Letter, weil es oft in älteren Büchern so war, dass der erste Buchstabe von einem Absatz besonders gestylt ist oder besonders groß nebendran steht oder so.
So ein klassischer Fall. Oder, dass der erste Absatz von einem Kapitel in einer anderen Schriftgröße oder irgendwie fett gedruckt ist, ist auch so ein klassisches Ding.
Auch in Zeitungen, glaube ich, gibt es das teilweise. Also, das sind so Sachen, die aus der klassischen Typografie kommen.
Wobei jetzt End Letter, klar, das konntest du damals auch machen, aber es ist eher ungebräuchlich, dass du nicht den ersten Buchstaben nimmst, sondern den dritten oder den fünften oder den 125.
Das ist dann tatsächlich in unseren modernen Zeiten mit so Spielereien, wie wir sie auf der Seite gemacht haben, eher verwendbar als im Buchdruck, ja, tatsächlich.
Also, es gibt auch, ich werde noch einen CSS-Tricks-Artikel zu dem Thema verlinken und da sieht man auch so ein paar grafische Beispiele, was man damit machen könnte.
Genau.
Okay, sind wir damit durch?
Dann kommen wir doch zum nächsten Punkt.
Kommen wir zum nächsten Punkt.
Ein No-Brainer, da hat wahrscheinlich jeder, stand jeder schon mal davor, der mal Formulare designen musste, beziehungsweise der vielleicht, so in meinem Fall am häufigsten,
ein Grafiker hat eine total tolle Idee, wie ein Formular aussehen soll oder irgendein bestimmtes Formularelement, also ein Select, eine Checkbox, ein Radio-Button
oder noch weitergehend, mittlerweile gibt es ja auch sowas wie Data, Date-Widgets und sowas, ist ja auch überhaupt gar nichts gegen einzuwenden.
Die Grafiker und die UX-Designer, die haben oft ziemlich gute Ideen, aber setzt das dann mal um, ohne es komplett neu zu bauen.
Also ich sage, ich möchte gerne vernünftigen Zugriff beim Stylen von Formularelementen haben und ich glaube, da gibt es mittlerweile, das haben die Browser-Hersteller teilweise auch mittlerweile schon verstanden,
weil ich weiß, dass, mir ist auf einer Konferenz, es war, glaube ich, die JS-Conf in Berlin, ist mir mal Greg Whitworth, glaube ich, das ist für Deutsche, glaube ich, schwer auszusprechen, der Name, über den Weg gelaufen,
der damals, also der hat, wenn ich es richtig weiß, damals für Microsoft an Edge gearbeitet und das war ihm ein Anliegen, dass da ein bisschen Bewegung reinkommt.
Und der hat damals auch irgendwie Umfragen gemacht, was ist denn dein größter Pain-Point bei Formulardesign oder bei Formularen im Allgemeinen.
Ich glaube, mittlerweile ist er nicht mehr bei Microsoft, aber die haben auch mal einen Vortrag, der hat auch mal einen Vortrag gehalten, zusammen mit der Nicole Sullivan,
die vielleicht auch dem einen oder anderen bekannt ist von Object-Oriented CSS, damals noch, und beide arbeiten am Formulardesign oder haben zusammen am Formulardesign gearbeitet,
Nicole Sullivan bei Google für Chrome und Greg Whitworth bei Microsoft für Edge und die wollten das da so ein bisschen vorantreiben.
Und ich sage nur, macht bitte weiter, auch wenn jetzt Greg nicht mehr dabei ist und nicht mehr da mithelfen kann, das ist extrem wichtig.
Ein paar Früchte hat das jetzt schon getragen, leider noch nicht das, was ich mir jetzt wünschen würde.
Ich glaube, das Erste, was jetzt vor kurzem auch mal rauskam, war, dass jetzt Chrome bzw. Chromium-basierte Browser jetzt ein anderes oder ein aufgefrischtes Standard-Styling von Formularelementen bekommen haben.
Das sieht jetzt ein bisschen frischer aus und da waren ja wirklich Sachen dabei, die sind ja unglaublich hässlich gewesen.
Also sowas wie, wie heißt das denn, Progress-Element und sowas, das sind ja Sachen, die man nicht so oft verwendet und ich glaube, unter anderem, weil sie so wahnsinnig hässlich sind.
Was ich mir aber wünsche ist, ich meine, irgendwann hat man ja angefangen mit so Shadow-Dom-Selektoren mal so bestimmte Sachen stylbar zu machen, also zum Beispiel bei einem Select, dass man ...
Ja, ich glaube, Select ist so das klassische Element dafür, was man ganz oft sieht in Formularen, was dann selber nachgebaut wird und da leidet dann halt die Accessibility drunter.
Da hatten wir es ja auch schon in einer anderen Folge davon und das wäre echt wünschenswert, wenn man da Standard-Elemente neu formatieren kann.
Ja, weil man sich dann sowas selber basteln spart und einfach die, so wie die Elemente funktionieren sollen, funktionieren sie dann halt auch, auch mit der Tastatur.
Ich meine, es muss ja gar nicht alles gehen. Also ich verstehe auch, dass sowas einen großen Anspruch hat, auch an Security und so. Also da ist wahrscheinlich, da darf nicht alles erlaubt sein, damit das irgendwie für Browser noch funktioniert.
Also ich kann mir sehr gut vorstellen, dass es da eine Menge Kriterien gibt, die ich jetzt als Anwender, der irgendwo in seinen HTML, Spitze Klammer auf Select, Spitze Klammer zuschreibt, die ich nicht sehe, die wichtig, die trotzdem wichtig sind bei der Umsetzung von sowas.
Trotzdem muss es meiner Meinung nach möglich sein, irgendwie eine Standardschnittstelle zum Stylen davon zu definieren, sodass ich wirklich eine Möglichkeit habe, auf alle oder möglichst alle Elemente zuzugreifen und zu sagen, hey, da würde ich jetzt gerne die Farbe ändern und da hätte ich gerne noch einen Border und da hätte ich gerne einen Verlauf hinten dran.
Und da würde ich gerne die Textgröße ändern und so weiter. Und ja, also ich würde total gerne den Designern das geben, was sie wollen, weil meistens wollen die ja keinen Quatsch. Die wollen ja, dass es am Ende auch noch gut benutzbar ist.
Und Formdesign, also wir haben da auch zu einem Vortrag noch einen YouTube-Link dann in den Shownotes und es gab auch mal einen Artikel von der Filament Group, Styling a Select like it's 2019, also logischerweise von 2019, wo da mal gezeigt wird, was jetzt schon geht.
Und wir sind mittlerweile schon relativ weit gekommen, zumindest was das Select-Feld selbst angeht, also die Box, auf die ich draufklicke, aber sobald sich was öffnet, ist es im Prinzip, da ist es dann vorbei.
Da hast du wieder irgendwie dieses hässliche Blau im Hintergrund, du hast irgendwie keinen so richtigen, ich weiß nicht, ob man Einfluss nehmen kann auf diese Hintergrundfarbe von dem Text.
Es ist, ja, es ist so irgendwie so halb, es ist irgendwie so halb okay. Und dann haben die auch unten noch Screenshots aus allen möglichen Browsern und dann siehst du dann halt wieder, okay, gut, die ganz alten, eh würde ich jetzt auch gar nicht in Anspruch erheben, dass es irgendwie funktioniert, aber ach, es sind so viele kleine Probleme, die man irgendwie damit hat.
Und es ist sehr verführerisch, da selbst was zu bauen, aber ich kann meistens nur davon abraten, du nimmst dir damit meistens Funktionalität weg, beziehungsweise, wir haben da auch schon öfter drüber gesprochen, sowas zu reimplementieren mit allen Interaktionsmöglichkeiten und so weiter, das ist wirklich, wirklich schwer, das macht man nicht mal so eben.
Auch wenn man glaubt, dass man nichts vergessen hat, man hat meistens noch was vergessen. Also eigentlich muss man sich dann hingehen und den Standard reimplementieren und wer macht das schon.
Ja, also ich glaube, vielleicht dabei sei noch gesagt, also sowas wie Checkboxen und Radio Buttons funktioniert eigentlich mittlerweile ganz gut, weil da haben sich viele jetzt drauf geeinigt, dass man eben das Label stylt und nicht die Checkbox oder den Radio Buttons selbst.
Wenn die Checkbox dann einfach versteckt, ja.
Genau, Checkbox und Radio Button werden versteckt, das Label wird gestylt.
Dann halt wieder dran denken, Fokus-Zustand entsprechend umzusetzen, das wird dann auch gerne vergessen, was dann wieder Accessibility mäßig.
Genau, Fokus oder auch in manchen Browsern, auch Hover, es hat auch Hover einen bestimmten Style bei Checkboxen und Radio Buttons.
Ja, also wie gesagt, liebe Browser-Hersteller, jetzt komme ich mal ganz nah zu euch.
Bitte setzt mir das um.
Ich weiß, dass es schwer ist, aber standardisiert das mal.
Hört mal auf mit so einem fancy Shit wie WebAssembly und macht mal so ihr Brot und Futter, bitte.
Meinst du, die Browser-Hersteller hören uns auch zu?
Natürlich hören die uns zu.
Na klar, davon gehe ich aus.
Wir haben ja schon mehr Downloads, als es Menschen auf dem Planeten gibt.
Natürlich hat uns einer zugehört von den Browser-Herstellern.
Jetzt habe ich unsere Statistiken verraten, gell?
Ja, Mist.
Ihr könnt euch jetzt selbst überlegen, ob das realistisch ist oder nicht.
Ich bin gerade am überlegen, ob ich dazu jetzt noch ein Beispiel habe.
Muss man das eigentlich jetzt noch genauer erklären?
Nee, also ich glaube, wir haben jetzt
Anwendungsbeispiele haben wir dafür genannt.
Also Select und Checkbox-Radio-Button sind so die wichtigsten.
Ah ja, vielleicht, ah stimmt, jetzt hat es noch was angetriggert in meinem Hirn.
Ich hatte vor kurzem da ein Positivbeispiel.
Nicht die Stylbarkeit, aber das Styling an sich hat mich überrascht.
Und zwar habe ich tatsächlich ein Input-Type Date vor kurzem gesehen.
Es war in Firefox, muss ich dazu sagen.
Und ich habe nicht gemerkt, dass es das war.
Ich habe gedacht, es ist ein Widget, ein selbstgebautes Kalender-Widget.
Und habe dann irgendwann gedacht, ja, aber wieso ist denn diese eine Farbe,
also diese eine Farbe passt ja jetzt nicht zum Rest.
Aber der Rest sieht super aus, weil es war halt eine Seite, die relativ minimalistisch gestaltet war.
Ziemlich weiß und mit grau und so.
Und das hat erstaunlich gut ausgesehen.
Also im Firefox das Input-Type Date-Widget.
Ich weiß nicht, ob man dafür jetzt noch irgendwie ein Beispiel schreibt.
Das komplette Default-Widget, oder?
Das Default.
Ich glaube, das war gar nicht gestylt in dem Augenblick.
Und das sah zumindest auf dieser einen Seite so aus, als ob es wirklich dazugehört.
Hat mich extrem überrascht, dass das so aussah.
Weil ich erinnere mich noch an, ich weiß nicht, wie aktuell das noch ist,
als ich zum ersten Mal das Date-Widget, Input-Type Date gesehen habe.
Das war, glaube ich, ich weiß nicht, ob das der erste Browser war,
das implementiert hat, Opera.
Und das sah furchtbar aus.
Das war wirklich so, als wärst du noch mal zu Windows, keine Ahnung, 3.11 zurück.
Also so in dem Style war das.
Und dann halt in einem Browser von vor drei, vier Jahren, wo du gedacht hast,
alter Schwede, wie könnt ihr in einem Interface oder in einem Browser,
der so modern ist, so ein altgestyltes Stück Scheiße unterbringen,
ich hoffe, dass jetzt, jetzt kriege ich bestimmt von den Leuten von Opera auf die Nüsse,
aber mittlerweile ist da ja auch, glaube ich, die Chromium Engine dahinter, oder?
Ich meine, ich habe mich mit Opera tatsächlich nicht mehr beschäftigt seit, keine Ahnung, 2000 irgendwas.
Naja, wie auch immer.
Also, Form machen, bitte.
Danke.
Next.
Next, ja genau, wir müssen, wir haben ja keine Zeit.
Ja, das habe ich auch schon als Feedback bekommen, dass ich sehr hinterher wäre, auf die Zeit zu schauen,
dass das schon auffällig wäre.
Ich habe es heute, ich bin heute ganz, ich habe noch gar nichts dazu gesagt,
außer am Anfang, dass wir schon drei Minuten reden, aber ich bin ganz…
Moment, Moment, Moment, jetzt muss ich aber kurz die Wahrheit sagen, liebe Hörerinnen und Hörer.
Der Konstantin hat im Vorfeld, bevor wir angefangen haben aufzunehmen, schon ein paar Mal gesagt,
Mensch, jetzt müssen wir aber, jetzt müssen wir mal anfangen, es ist jetzt schon so spät.
Ja, also wir haben ja schon irgendwie eine Stunde geredet, bevor wir überhaupt auf Aufnahmen geklickt haben
und uns irgendwie drüber unterhalten, wie wir jetzt das Intro, also das noch vor dem Intro, vor der Musik,
was wir denn da sagen.
Ja, das ist eigentlich schon ganz schön peinlich, dass ich zehn Minuten oder eine Viertelstunde gebraucht habe,
um mir dieses, das aus den Fingern zu saugen, was ihr heute davor gehört habt.
Also, dass ich dafür so lange gebraucht habe, dafür ist es gar nicht so gut geworden.
Ja, vor allem, ich merke schon, wir kommen relativ gut durch und es wird, ich sage jetzt mal, unter einer Stunde 30 bleiben.
Und damit sind wir ja tatsächlich schon deutlich kürzer wieder als…
Ich kann noch weit abschweifen.
Schauen wir mal, schauen wir mal.
Da geht noch einiges.
Ich glaube, die letzten beiden Folgen knacken wir nicht.
Gut, nächster Punkt.
Nächster Punkt.
Ja, Animation und Transition zu Height Auto oder eigentlich, ja, nicht nur unbedingt zu Height,
aber Height ist so der klassische Fall, aber generell zu Auto-Werten.
Also, das ist so ein Ding, da bin ich echt schon mehrfach drauf gestoßen.
Also, dass man irgendwie, ja, irgendwas mit Overflow hidden hat und wenn man drüber fährt,
will man irgendwie den kompletten Text anzeigen lassen oder so.
Und dann willst du eigentlich von, sagen wir mal, irgendwie auf ein EM hast du die Höhe begrenzt
und dann willst du zu dem Height Auto zurück und das geht halt so nicht.
Also, da muss man sich dann wieder mit JavaScript behelfen, wo man dann den Endzustand quasi
kurz herstellt, sodass es gar nicht gerendert wird oder zumindest nicht sichtbar für den
User, um dann die Höhe zu ermitteln und dann wieder auf den Ursprungswert zurück und
dann kann man die Animation starten.
Aber das ist ja Quatsch, das so zu machen.
Oder es gibt auch ein Hack, in Anführungsstrichen, ich nehme einfach einen besonders großen Wert,
also ich setze dann irgendwie die Höhe auf 9999 Pixel.
Aber dann habe ich natürlich das Problem, dass das wiederum die Dauer des eigentlichen sichtbaren
Animations- oder Transition-Effektes beeinflusst.
Weil, wenn ich einen Riesenwert habe und ich sage, die soll die Animation so eine Sekunde dauern,
dann ist, also das macht man dann mit Height und mit Max-Height natürlich, weil man will
ja nicht über die eigentliche Höhe drüber schießen.
Das beeinflusst, wie gesagt, die Dauer, weil ich dann so einen Riesenwert habe und dann ist
die, dauert die Animation nicht nur eine Sekunde, sondern vielleicht nur 300 Millisekunden.
Also es ist nicht schön und es ist so ein Ding, wo man sich echt denkt, warum funktioniert das noch nicht.
Er hat aber wahrscheinlich den Grund, dass man eben, also dass der Browser, um zu ermitteln,
was wäre denn, wo will ich denn hin, natürlich kurzzeitig auch den Zustand herstellen muss,
so wie man das mit JavaScript macht, um das eben zu ermitteln und dann zu diesem Wert hin
die Animation oder Transition laufen zu lassen.
Der Browser müsste doch eigentlich diese Maximal-Ausdehnung kennen.
Naja, wenn ich jetzt aber beim Seitenladen schon vom Style her das beschnitten habe,
auf 1-EM-Höhe oder 10-Pixel-Höhe oder was auch immer, woher soll der Browser dann wissen,
wie der Text läuft, wenn das Ding ausgefahren ist?
Liebe Browser-Hersteller, ihr hört uns ja zu, ich gehe mal ganz nah zu euch.
Sagt uns mal, wie das ist.
Ich weiß es tatsächlich nicht, aber auch gerne jeder andere, der das weiß.
Also ich war immer der Meinung, dass der Browser eigentlich beim Rendern das schon weiß.
Natürlich nicht, während er gerade das CSS irgendwie sich anguckt, aber danach müsste der doch eigentlich ...
Naja, aber du kannst das ja theoretisch ändern.
Also du machst im eingeklappten Zustand, setzt du plötzlich die Font-Wate auf 700
und dadurch floated der Text an das um.
Da muss aber der Browser nichts neu rendern, weil der Text ist ja abgeschnitten und gar nicht sichtbar.
Aber das muss ja berücksichtigt werden, wenn ich das Ding dann ausklappe und sichtbar machen will.
Ich hatte witzigerweise genau heute den Fall, dass ich das gerne gemacht hätte.
Was war dein konkretes Beispiel?
Mein konkretes Beispiel ist, was ich immer wieder versuche, in Projekten einzusetzen und dann an der Realität scheitere,
an der Browser-Unterstützungsrealität.
Und ich habe das jetzt, glaube ich, schon drei-, viermal versucht und am Ende sind wir wieder davon abgekommen, es zu benutzen,
nämlich Details und Summary.
Und Details und Summary zu animieren, das wäre nämlich, das wäre super, also für die, die nicht wissen, was Details und Summary ist,
das ist im Prinzip so ein Aufklapp-Dings, aber ich weiß gar nicht, wie nennt man das, was ist denn das richtige Wort dafür?
Also versteckter Content aufklappen und zuklappen?
Ja, aber ein Akkordeon klappt ja normalerweise alle anderen zu, wenn ich eins aufklappe.
Ja, gibt's so oder so, aber ja.
Also ähnlich kann man sich das vorstellen, man hat irgendwie eine FAQ zum Beispiel, ist so ein Anwendungsfall.
Ich habe eine FAQ, genau, das ist das gut, ich habe eine FAQ und ich habe eine Überschrift und ich habe den Inhalt dazu
und ich kann das aufklappen und zuklappen.
Ich sehe einmal die Erklärung zu der Überschrift und einmal nicht.
Und das ist eben, das ist eben nativ mit HTML, mit Details und Summary kann man das umsetzen,
beziehungsweise ich brauche dafür dann kein JavaScript mehr, um auf und zu zu klappen,
sondern genau, Details und Summary sorgt dafür, dass diese Funktionalität im Browser standardmäßig schon mit eingebaut ist.
Und ich glaube, verwendet wird das zum Beispiel bei GitHub in den Readme-Dateien, glaube ich, kann man das auch einbauen, da gibt's das auch.
Das ist das Einzige, was mir jetzt gerade bekannt ist, wo das wirklich sichtbar eingesetzt wird.
Und du hast dann so einen kleinen Pfeil nebendran, wie sowas halt aussieht.
Und da wäre es halt total schön, wenn man in beide Richtungen animieren könnte.
Man kann, warte mal, ach nee, ich glaube, genau Heid ist da das Problem,
weil er würde ich nämlich gerne, dass das schön auffährt, hätte ich gerne.
Und ich glaube, zum Auffahren geht es, da habe ich Beispiele heute gesehen bei CodePen,
aber beim Zuklappen auf jeden Fall geht es nicht, da ist es sofort zu.
Ja, also das war mein Beispiel heute, wo ich das gerne gehabt hätte.
Ich weiß nicht, ob es da irgendwie noch irgendeinen Hack gibt, wie man das irgendwie machen kann.
Es gibt ja Leute, die machen die verrücktesten Sachen in CSS,
aber da ist mir jetzt nichts bekannt, wie man das machen kann.
Ich habe an einer Stelle, wo ich das mal eingebaut habe, so eine Art Fake-Animation,
dass es halt im Prinzip in der Höhe direkt aufklappt, aber der Inhalt dann so ein bisschen animiert reinfährt.
Das geht natürlich dann auch nur beim Aufklappen, weil beim Zuklappen ist es sofort komplett zu.
Da gibt es dann, ja, da hat das Ding keine Gnade.
Das kann nicht warten, sondern es ist dann einfach, ich klicke und sofort ist alles weg.
Ja, also das ist mein Beispiel dazu.
Ihr könnt ja eure Beispiele mal in die Kommentare schreiben.
Ja, gerne, also für die nächsten Folgen, da wir das ja wie gesagt noch fortsetzen werden, diese Serie.
Auf jeden Fall gerne her mit weiteren Anregungen.
Aber wir haben noch zwei Punkte in dieser Folge, nämlich Shape Inside.
Es gibt eine Spezifikation, CSS Shapes Spezifikation, die habe ich mir auch so im Detail noch gar nicht angeschaut gehabt bisher.
Bin aber schon vor einer Weile mal auf dieses Shape Inside gestoßen, auf einen Artikel von einer Entwicklerkollegin und den habe ich leider nicht mehr gefunden.
Ich habe nochmal geguckt für die Sendung heute, ob ich den Artikel nochmal finde, habe ihn aber leider nicht mehr entdeckt.
Und da ging es darum, dass das ursprünglich mal vorgesehen war in der Spezifikation und dann aber auf Level 2 verschoben wurde.
Und da fragt man sich, warum ist das passiert?
Weil es gibt das Property Shape Outside, mit dem ich festlegen kann, wie der Textfluss um ein Element herum aussehen soll.
Also ich kann da wirklich Shapes definieren, eine Ellipse außenrum oder was weiß ich, oder ich kann sogar Grafiken angeben, bei denen dann der Alpha-Kanal berücksichtigt wird.
Oder sogar SVG-Formen kann ich als Grafik angeben.
Und da kann ich dann, also auch wieder klassisch eigentlich aus dem Print irgendwie sagen, dass ich da irgendwie so ein paar Zacken rausstehen habe aus dem Bild, dass da links floated und der Text soll sich da eben dieser Form anpassen.
Und wie gesagt, mit Shape Outside funktioniert das auch um ein Element herum, aber auf der anderen Seite, innen drin, da funktioniert das nicht.
Und gerade jetzt mit Border Radius kann ich ja problemlos kreisförmige Container darstellen.
Wenn ich da aber Text reinschreibe, dann fließt der aber halt aus dem Kreis raus.
Und schön wäre es natürlich, wenn der Text sich in dem Kreis anordnen würde und an den Rändern auch tatsächlich stehen bleiben würde.
Und das funktioniert nicht ohne dieses Property.
Und wann das kommt, ja, keine Ahnung, wie weit da dieser Standard aktuell fortgeschritten ist.
Und man findet dann da auch Beispiele, also die Frage kommt recht oft, taucht die auf?
Und ich glaube, das liegt noch daran, weil ursprünglich, weil das eben in Level 1 schon vorgesehen war, gibt es auch tatsächlich noch Tutorials da im großen, weiten Web, wo Shape Inside noch beschrieben wird.
Und da gibt es dann auch Stack Overflow Posts, wo jemand schreibt, hm, ich habe Shape Inside genauso angewendet, wie man soll und es funktioniert nicht.
Und die Antworten sind halt, ja, es ist halt auch noch nicht umgesetzt.
Und da findet man dann irgendwelche, ja, wiederum irgendwelche Hacks, ich verlinke da auch mal ein JS-Fiddle, wo dann wirklich mit so einer Diff-Suppe, mit verschiedenen breiten Diffs, das gefakt wird, die dann links und rechts von dem Text floaten und dann so angeordnet sind, dass da quasi wieder ein Kreis entsteht, nur damit dieser Text da drin richtig angeordnet ist.
Ich habe auch noch ein etwas eleganteres Beispiel gefunden, das ist auch ein Code Pen, das ich verlinken werde, wo das immerhin mit Shape Outside gelöst ist, mit dem SVG.
Das heißt, ich habe dann nur zwei Zusatzelemente, die ich eigentlich semantisch nicht bräuchte und die haben zwei Halbkreise, einen nach rechts geöffnet, einen nach links geöffnet und dementsprechend fließt dann der Text da in Kreisform.
Ja, warum das nicht umgesetzt ist, liebe Browser-Hersteller, ich spreche auch ganz nah als Mikrofon, ich verstehe es nicht, ja, hat bestimmt auch wieder Gründe, die sich einfach uns nicht erschließen, aber, ja, verstehen kann ich es nicht so ganz.
Ich glaube, ich habe eine Idee, du kennst ja die Arbeit bei mir in der Firma, Konstantin, du weißt ja, dass es da auch ganz, ganz, ganz viele Ideen gibt und man hat nicht für alles Zeit.
Ich glaube, es ist auch einfach Fokus, Scope, kann ich, also es gibt so viele Sachen, die total geil werden, die man mal könnte, also ich habe das auch in meiner Arbeitswelt immer, wir hatten es ja auch in der letzten Folge so ein bisschen über die Arbeitsrealitäten von uns.
Extrem oft ist man an dem Punkt, dass man sagt, so, wir haben jetzt eine Million Ideen und welche fünf davon können wir jetzt umsetzen oder welche fünf davon setzen wir jetzt um?
Ich komme auch nochmal nahe, ich will es trotzdem haben, aber, ja, letzten Endes sind die auch nur begrenzt in ihren Ressourcen und können leider nicht alles machen.
Verstehe ich, verstehe ich absolut die Argumentation, aber das ist so ein bisschen wie was wir oben hatten mit dem First Line und First Letter, das ist ja, also es gibt ja schon die Möglichkeit, den ersten Buchstaben zu selektieren in dem Fall.
Warum kann man nicht den Endenbuchstaben selektieren, ja? Und in dem Fall ist es halt auch, es gibt Shape Outside, das funktioniert schon, das heißt, da ist schon was implementiert, dass tatsächlich Formen definiert werden in CSS und der Textfluss sich darin gehend anpasst, aber halt eben nur außerhalb von einem Element und warum nicht innerhalb?
Also ich stelle mir, also, dass man jetzt irgendwie sagt, okay, diese ganze Shape-Geschichte ist irgendwie, die schaffen wir nicht für den nächsten Draft, okay, dann lassen wir das ganz weg von mir aus.
Aber wenn man doch schon eigentlich die 90 Prozent hat, warum macht man die 100 Prozent nicht noch fertig?
Aber Konstantin, wäre das nicht was für Houdini?
Ja, ich habe tatsächlich auch spontan an Houdini gedacht. Houdini, Folge Nummer 6, auch hier wieder den Bogen spannen.
Dass du immer weißt, in welcher Folge wir was besprochen haben, ich habe keine Ahnung.
Ja, das steht teilweise in meinen Shownotes und ich habe auch die Seite neben mir offen.
Aber, ja, also, auch mal ein kleiner Einschub, so Meter, man sieht in den Statistiken ganz schön, dass die Leute tatsächlich jetzt die Folgen auch nachhören.
Also jetzt, aber gerade so vergangene Woche war das ganz extrem, dass wirklich so in chronologischer Reihenfolge plötzlich alte Folgen als dicke, farbige Balken aufgeteilt, äh, getaucht sind.
Also ist schön, ihr hört unsere alten Folgen tatsächlich, äh, nach. Finde ich sehr gut.
Einschubende.
Ja, auch wenn da viel Quatsch vorkommt.
Äh, ja, also, ähm, mir fällt noch ein, als das mir zum ersten Mal begegnet ist, dass jemand sagt, ich möchte, ich möchte Schrift so fließen,
lassen, dass ich da ein Objekt nebendran packen kann, das irgendeine Form hat.
Das, das, ich weiß nicht, wie lange das her ist, aber ich meine, dass dieses erste Proposal tatsächlich von Adobe damals kam,
die gesagt haben, wir wollen hier, äh, unsere, äh, InDesign-Funktionalität mal in den Browser übertragen oder irgendwie so.
Ich glaube, das kam tatsächlich mal von Adobe, zumindest ist das ganz, ganz, ganz dunkel noch in meinem, in meinem Kopf.
Also vielleicht haben die den Standard damals mitgeschrieben.
Nicht, dass das jetzt irgendwas zur Sache tut, aber es bin ja einfach ein.
Darf man ja auch mal fallen lassen, solche.
Man darf, man darf auch mal einfach sagen, Unwahrheiten, die man.
Du willst doch, du willst doch nur die Zeit aufblähen.
Ja, richtig.
Richtig, ich wollte natürlich jetzt, also wir haben jetzt, äh, wir nehmen jetzt etwas über eine Stunde auf.
Nein, nein, nein, nein, nächster, nächster Punkt, nächster Punkt.
Äh, der nächste ist ja schon der letzte.
Ja.
Punkt sechs.
Kommt jetzt.
Ähm, und bevor wir jetzt total Banane werden, dadurch, dass wir Bier getrunken haben,
meins ist jetzt übrigens auch schon leer, aber ich hebe mir das Nächste, was auch, ähm, äh, dann aus Darmstadt wahrscheinlich kommt,
hebe ich mir für die nächste Folge auf.
Also hallo, lieber Stefan, äh, falls du uns wieder beim Joggen hörst, äh, nochmal vielen Dank.
Und falls du uns nicht beim Joggen hörst, kannst du ja jetzt auch nebenher Bier trinken, das ist auch gut.
So, äh, siehst du, ich bin, ich bin ganz gut da drin.
Ja, ich, ich merke schon.
So, irgendwie Kram zwischen reinzulabern.
Der nächste und damit letzte Punkt des Themas für heute sind, ähm, stylbare Scrollbars.
Ähm, der IÖ, ganz, äh, so ein bisschen in der Mottenkiste gewühlt, der IE konnte das mal.
Der IE hatte mal tatsächlich einen CSS-Weg, wie man die Scrollbars stylen konnte.
Ich erinnere mich da auch noch, also ich hab das auch selber damals dann angewendet, so für meine ersten Web-Experimente.
Ich hab das auch gemacht und das, und das, ich fand das echt cool, man konnte natürlich damit auch, äh, Schindluder treiben, wie das bei vielen solchen Sachen ist, wenn man, äh, wenn man so, so Standard, ähm, Systemelemente anfasst.
Und ich glaube, das ist auch der Grund, warum, äh, die Browser-Hersteller oft einem gar nicht so richtig Zugriff drauf geben wollen, weil halt Mist damit gemacht wird.
Ähm, trotzdem hätte ich das gerne, weil, äh, so, ich würde, ich hätte manchmal gerne so, ähm, ähm, sagen wir mal, unaufdringliche Scrollbalken zum Beispiel.
Unaufdringlicher, ähm, ähm, als das im Firefox beispielsweise standardmäßig der Fall ist, weil das sind riesig fette Dinger.
Wobei jetzt, das ist jetzt interessant gerade, ich sehe jetzt gerade in meinem Trello, dass der Scrollbalken offenbar irgendwie gestylt ist.
Das ist interessant, der ist nämlich halb durchsichtig in Firefox.
Seht ihr das mal aufgefahren?
Ja, der, der, der passt sich schon so ein bisschen der Farbe an durch, durch Transparenz.
Das ist interessant, das wusste ich gar nicht, dass das mittlerweile geht. Äh, seht ihr, hört ihr gerade live, äh, dass das Thema sich gerade in Luft auflöst, was ich gerade sagen wollte.
Ähm, ähm, ich möchte Zugriff auf das Styling des Scrollbalkens haben und zwar auch, ich möchte ihn auch vielleicht unter, unter bestimmten Umständen ausblenden können, so wie das Mobile-Browser teilweise machen.
Genau, das war jetzt auch das Erste, was mir jetzt so eingefallen ist, ja, dieses Verhalten im Mobile-Browser nachzuahmen.
Also auch allein schon, dass der, dass die Scrollbar quasi drüber liegt und, äh, und vielleicht auch nur erscheint, wenn ich dann hover oder wenn ich scrolle oder so und eben nicht den Platz fix da rechts einnimmt, was ja auch immer wieder das Problem ist, ich kriege die Scrollbar-Breite ja nicht raus.
Da geht's dann mit, mit Calc und mit 100 VW minus 100 Prozent und so, da gibt's dann schon so Möglichkeiten, das funktioniert aber auch nicht so wirklich und immer zuverlässig.
Also das ist so ein Problem, auch bei dem Redesign von unserer Firmenseite hatte ich das, ähm, wieder, dass dann irgendwie das Raster nicht gestimmt hat, dass ich halt auch VW aufgebaut hab, weil dann eben die Scrollbar wieder irgendwie im Weg war.
Ja, vor allem, gerade in Firefox finde ich's immer noch besonders nervig, dass die ganze Seite springt, sobald der Scrollbalken erscheint.
Also das kann ja durchaus mal sein, dass man ein Element aufklappt und dann die Seite plötzlich diesen, diesen, äh, plötzlichen Scrollbalken kriegt und der dann plötzlich alles zur Seite schiebt und das ist unfassbar hässlich.
Äh, das, das Problem ist mir bekannt, seit ich, äh, für Geld Webseiten baue und damals war der Trick, dass man, äh, die, äh, die Height vom Body oder vom HTML-Element, ich bin mir jetzt grad nicht mehr sicher, immer auf 100 Prozent gesetzt hat, sodass der Scrollbalken einfach immer da war.
Zumindest dieser Sprung.
Ja, oder halt Scroll auf Auto setzen, ja. Also Scroll Y.
Genau.
Äh, nee, nicht Auto, nee, auf Scroll setzen.
Äh, auf Scroll, ja, genau, aber damals, damals gab's, glaub ich, noch nicht X und Y, da bin ich mir, das ist schon eine Weile her, da gab's, glaub ich, da konnt ich das, glaub ich, noch nicht, äh, unabhängig voneinander.
Also das war damals so der Trick, dass man die Höhe immer auf, oder die Minheit, oder, äh, ja, Minheit muss es gewesen sein, auf 100 Prozent gesetzt hat, sodass der immer erschienen ist.
Ja, aber, äh, warum, was soll das?
Also das mit den Scrollbalken, das ist wirklich genauso wie mit den Formularelementen, also lass uns das bitte vernünftig machen.
Aber da ist schon was am Horizont, immerhin, das hab ich jetzt heute im Vorfeld noch kurz rausgefunden.
Ähm, ähm, was die Scrollbalken angeht, da gibt es zumindest schon, äh, was, äh, ein, ein, ein Standard, Standardisierungsversuch, nenn ich das jetzt mal.
Ähm, jetzt muss ich das grad noch mal, äh, kurz raussuchen.
Ich hatte den Link gerade schon, äh, offen und jetzt find ich ihn nicht mehr, weil ich so viele Tabs offen hab.
Ähm, da ist er.
Bist du auch so ein Tab-Messi.
Ich bin, ich bin ein totaler Tab-Messi, absolut.
Ähm, genau.
Also, bei, bei Can I Use findet man das auf jeden Fall schon.
Und das ist nicht komplett rot, das ist schon mal ein ganz gutes Zeichen.
Ähm, und dann gibt es, äh, bei drafts.cssworkinggroup.org gibt es das CSS Scrollbars Module Level 1.
Ähm, Ähm, Editor's Draft 24 der Februar 2020.
Also, das ist, ähm, also von dem Stand, ich weiß nicht genau, wann die angefangen haben, ich weiß auch nicht genau, wann die denken, fertig zu sein.
Auf jeden Fall, ähm, da gibt es schon was.
Ich will es halt natürlich jetzt haben.
Ähm, und vor allem, also so von wegen aufdringlich, es gibt, es gibt zumindest in Firefox, ähm, eine Möglichkeit, den Scrollbalken schmaler zu machen.
Wobei ich jetzt nicht mehr genau sofort auswendig weiß, ähm, die genaue Eigenschaft in CSS.
Aber wenn ihr danach googelt, findet ihr das auf jeden Fall, da bin ich mal wieder schlecht vorbereitet.
Das habe ich auf jeden Fall an, an der einen oder anderen Stelle, wo ich weiß, dass ein Scroll, eine Scrollbar mitten, mitten in der Seite auftritt.
Also vielleicht so ein horizontaler Scrollbalken, ähm, weil da Elemente nebeneinander sind, die eben breiter sein müssen.
Und man will das nicht so extrem aufdringlich haben.
Es gibt eine Möglichkeit, das schmaler zu machen.
Immerhin, aber das funktioniert nur in Firefox.
Das wäre nämlich auch noch, ähm, also ich verstehe das Argument zu sagen, okay, wir wollen den User nicht alles treiben lassen.
Und dann irgendwie knallrote Scrollbars und sowas oder, äh, ja, oder irgendwie, vielleicht kann man das auch ausnutzen, um irgendwie Schindluder zu treiben und den User in die Irre zu führen, dass er irgendwo draufklickt, wo er eigentlich nicht will oder was weiß ich.
Verstehe ich als Argument, aber da könnte man ja auch sagen, okay, wir lassen jetzt nicht alles zu.
Also man kann dem nicht irgendwie einen Border geben und irgendwie die Breite auf, auf tausend Pixel setzen oder was weiß ich.
Ähm, aber dass man irgendwie sagt, keine Ahnung, Scrollbar-Style unobtrusive, ja, und dann ist der, dann hat man das Mobile-Verhalten nachgebildet, ja.
Irgendwie sowas oder dass man halt Rundungen oder keine Ahnung, also man kann ja, man kann das ja einschränken, was man alles damit machen kann und das fände ich einfach, dass man so ein bisschen die Handhabe hat, wie der sich verhält.
Weil es gibt ja sehr schöne Beispiele, es gibt ja JavaScript-Klassen, die das nachbauen und da gibt's wirklich sehr schöne, die einfach elegant aussehen, ohne dass sie jetzt irgendwie auffällig wären, also da gibt's schon die Möglichkeit.
Und da sind wir auch wieder bei Usability und Accessibility, weil die halt eben meistens dann nicht in allen weiteren Fällen wieder funktionieren und das ist total blöd.
Und das wäre doch dann, das wäre auch wieder ein Argument, dann mach ich's doch lieber mit Standard-Bordmitteln, statt dass der User wieder irgendwas Custom einsetzen muss, was dann wieder die Accessibility kaputt macht, ja.
Also dann doch lieber Mittel an die Hand geben und sagen, okay, wir beschränken sie aber so, dass man dann nicht irgendwie Schindluder mit treiben kann.
Es gibt da schon Möglichkeiten in Chrome- beziehungsweise Chromium-basierten Browsern, ich hab jetzt grad mal aus Spaß CSS-Tricks aufgemacht, in Edge, also alle, die Chromium-basierten Browser haben und auch mal auf CSS-Tricks waren, was ihr bestimmt alle schon wart, liebe Hörerinnen.
Das ist, machst du das auch gerade?
Weil da wurde das, das ist to the max.
Ach ja, ja.
Das ist schon ein bisschen extrem.
Als ich diesen Regenbogen-Link-Effekt angeschaut hab, ist mir das aufgefallen, dass die ja auch ihre Scrollborder vergewaltigt haben.
Dieser Scrollbalken, wenn er klein ist, kann man ihn ertragen.
Wenn er groß ist, zum Beispiel auf der Newsletter-Seite, die nicht so hoch ist, dann kann man sich's kaum anschauen.
Also dass die Browser-Hersteller sowas vermeiden wollen, sorry Chris, das kann ich gut nachvollziehen.
Ja, absolut.
Das find ich auch schon fast ein bisschen zu extrem, aber ja.
Aber ich find die Idee eigentlich ganz gut, die du grad gesagt hast, so von wegen unobtrusive, dass man im Prinzip dieses unsichtbare Mobile-Behaviour da emuliert,
einfach mit einem kleinen Wert, sodass ich gar nicht mich um die Farben oder sowas kümmern muss, dass das irgendwie trotzdem Systemfarben oder sowas bleiben,
aber dass das Ding eben schmal wird und vielleicht verschwindet, wenn's grad nicht gebraucht wird.
Finde ich echt ne gute Idee.
Also auch bitte das umsetzen, mal abgesehen von den Styling-Möglichkeiten, die ich gerne hätte.
Also was mir da am wichtigsten wäre, also ja ich mein, wahrscheinlich sind das die Standardsachen,
aber was mir wichtig wäre, wäre, dass ich die Größe anpassen kann, also die Breite davon und die Farbe.
Die Farbe, aber wobei die Breite und Größe mir wichtiger wäre als die Farbe.
Und für mich vor allem, dass der Scrollbalken eben über der Seite liegt und nicht den Platz rechts wegnimmt.
Ja, auch das.
Dass ich da einfach mit kalkulieren kann, meine Seite ist die komplette Breite und die ist 100 VW und da wird nichts dran gerüttelt.
Also wenn ich zum Beispiel hier, ist auch interessant, auf der Standard-Startseite von Edge, wenn man die noch nicht geändert hat,
da ist rechts eigentlich ein ganz schöner Scrollbalken und der ist aber auch nicht nativ, wenn ich das richtig sehe.
Also das ist auch wieder irgend so ein, wahrscheinlich wird JavaScript gemacht.
Weil ich dachte zuerst so, ach cool, hat Edge einen anderen Scrollbalken als Chromium,
aber wenn ich jetzt auf unsere Seite gehe, dann sehe ich den ganz normalen Windows-Standard-Scrollbalken.
Und der ist eigentlich so, wie ich mir das vorstelle, da ist so ein kleiner abgerundeter Schieber eben drin,
nur hätte ich vielleicht die Leiste eben gerne noch weg.
Ach nein, das ist ja verrückt. Ich habe das gerade auch mal gemacht.
Das ist einfach die Startseite von, ja.
Ja, ich bin bestürzt. Das muss doch, nein, das kann nicht irgendein JavaScript-Ding sein, auf der Edge-Startseite doch nicht.
Das kann doch nicht sein.
Also du kannst auf den Scrollbalken Rechtsklick machen und Inspect klicken. Es wird nur irgendwie was anderes ausgewählt.
Ja, genau, das habe ich gerade auch gesehen.
Das ist interessant, das muss ich mir mal genauer anschauen und dann nächstes Mal vielleicht noch aufgreifen.
Das kann ich mir kaum, ach natürlich. Weißt du, was die verwenden?
Die verwenden das Webkit-Scrollbar.
Das ist natürlich, der neue Edge ist ja Webkit.
Die benutzen genau das, was wir gerade angesprochen haben, was eben in Webkit-basierten Browsern geht,
beziehungsweise in, ich weiß nicht, ob es auch in Safari geht, aber auf jeden Fall in Chrome.
Ja, das ist genau das hier.
Webkit, also Doppelpunkt, Doppelpunkt, Minus-Webkit-Scrollbar.
Ach genau, und dann Background-Color und sogar Border-Radius direkt.
Ah ja, okay, interessant.
Genau, das benutzen die da tatsächlich. Also das kannst du auf deiner Seite auch benutzen.
Ach, dann machen wir das doch, dann wird es demnächst eine schöne Scrollbar.
Sehr gut.
Ja, aber wie gesagt, wenn die dir zu breit ist, dafür gibt es in Firefox was.
Wo ich jetzt gerade nicht mehr ...
Das ist quasi eure Hausaufgabe, liebe Hörer und Hörerinnen.
Schaut mal nach, wie man in Firefox die Scrollbar schon mal kriegt, aber das geht auf jeden Fall.
Ist bei mir tatsächlich interessant, weil ich ja mit Firmeninternen Anwendungen einen relativ klaren Browser-Fokus habe.
Und da Firefox schon eine wichtige Rolle spielt und da ist das dann auch interessant.
Also da ist das dann auch, das bringt auf jeden Fall was, wenn man dann nur für einen Firefox was macht.
Okay, gut. Aber das ist interessant, ja.
Die nutzen das. Setzt das doch auch mal ein bei euch.
Ja, das machen wir demnächst bei uns auch.
Das machen wir.
In diesem Kino.
Gut.
Dann, ja, würde ich sagen, Thema abgeschlossen.
Thema abgeschlossen.
Und ja, mal gucken. Vielleicht machen wir nächste Folge schon Teil zwei.
Vielleicht fällt uns aber auch noch irgendwie was noch Tolleres ein und wir schieben noch was dazwischen.
Mal gucken.
Vielleicht habt ihr ja auch eine total geile Idee, was wir noch anderes machen können.
Oder ihr sagt, oh Gott, bitte nicht.
Es war so langweilig.
Bitte nicht nochmal.
Nein, nein, aber ...
Wir schicken euch auch Bier.
Ach so, stimmt, genau.
Mensch, das wollten wir noch ansprechen.
Die haben ja jetzt, also ich sag mal so, ich hab jetzt Bier geleckt.
Es ist jetzt so, mein lieber Kollege Stefan hat uns Bier gesponsert, weil er meinte, wir sollen mal Bier aus seiner Heimat aus Darmstadt trinken.
Beziehungsweise jetzt momentan, weil der Konstantin und ich jetzt uns nicht gegenüber sitzen, sondern das immer noch remote machen, ist das Bier jetzt erstmal nur bei mir, was auch sehr schade ist.
Aber das ist jetzt keine Aufforderung an dich, Stefan.
Dem Konstantin jetzt extra noch Bier.
Obwohl, doch, es ist ein Aufforderung.
Wir bringen dem Konstantin, wir brauchen einfach auch noch drei Flaschen Bier.
Muss ich die dann abholen bei euch.
Aber jetzt haben wir, wir haben jetzt Bier geleckt sozusagen und haben uns gedacht, naja, vielleicht will ja noch jemand anderes uns auch Bier aus seiner Heimat mal zeigen, dass wir das mal trinken.
Wir werden das dann auch erwähnen.
Vielleicht hört ihr auch ein Brauerei-Besitzer zu, der sagt, hey, da wollte ich schon immer mal mein Bier platzieren.
Ein Bier-Sponsoring würde ich vielleicht sogar auch annehmen.
Weiß ich nicht genau.
Wir finden ja Werbung doof, aber so ein Bier-Sponsoring.
Also wir werden, bis die Folge online ist, haben wir eine Postadresse oder eine Paketadresse auf unserer Homepage, die wir dann wahrscheinlich im Impressum stehen haben, nehme ich mal an, wo ihr uns dann Pakete schicken könnt.
Und dann darf da auch Bier dabei sein, gerne, natürlich.
Wir freuen uns natürlich auch über andere Sachen, also irgendwelche Knabbereien, Goldbarren.
Ja, Moment, wir müssen aber genau spezifizieren, was andere Sachen ist, dass ich jetzt die Leute hier in den Müll schicke.
Gehst zur Packstation, zu dem größten Fach und ist einfach so ein Müllsack drin.
Ja, schon brauchbare Dinge.
Und dann eine Flasche Bier irgendwo versteckt.
Nein, das natürlich nicht.
Falls es ein Bier gibt aus eurer Heimat, wo ihr sagt, hey, das muss mal gefeatured werden bei uns, das müsst ihr unbedingt mal probieren.
Übrigens, ich muss gerade noch kurz noch mal sagen, was ich heute noch mal gesagt habe, das Braustübel Darmstädter Pilsener Feinhopfig.
Ich fand, es war ein gutes Bier, hat mir gut geschmeckt.
Es ist hinten mal wieder, nee, das darf ich glaube ich nicht sagen, nee, das sage ich lieber nicht.
Doch, ich sage es.
Dicke Frauen dürfen es nicht trinken, steht drauf.
Oh Gott, was habe ich jetzt wieder gesagt?
Es tut mir leid, das ist oft meine Interpretation von diesem Piktogramm, was auf den Bierflaschen drauf ist, das natürlich sich mit Schwangeren beschäftigt und hat nichts mit dem Umfang von Menschen zu tun.
Sondern, ja, egal.
Jetzt, genau, wir sind wieder an den Punkt angelangt, wo es vielleicht einfach zu viel wird.
Wo wir doch einfach jetzt weitermachen.
Mit?
Schickt uns, oh.
Muss ich still sein.
Einfach wieder abgewürgt.
Ja, es ist okay.
Bin ich mir mittlerweile gewöhnt.
Ich weiß jetzt mittlerweile, wenn das Geilteil kommt, da muss ich kurz still sein.
Aber das Geilteil kommt heute auch von mir.
Und ich habe heute zwei Geilteile.
Mein erstes Geilteil ist Klettbandkabelbinder.
Mal was total physisches in unserer elektronischen, abstrakten Welt.
Und zwar habe ich ein bisschen Kabelorganisation gemacht bei mir.
Und ich kenne Klettbandkabelbinder schon eine Weile.
Aber ich habe jetzt nochmal bestellt, weil es gibt wirklich nichts Geileres.
Wenn man Kabel organisieren will und irgendwie zusammen machen will zu einem Strang oder so.
Klettbandkabelbinder ist einfach das, was ihr haben wollt.
Falls ihr uns finanziell unterstützen wollt, wir werden auch einen Amazon Affiliate Link in die Show-Notes packen.
Aber das ist tatsächlich nicht der Grund.
Ich habe mir echt 15 Meter davon bestellt.
Weil ich da auch sehr kleinlich bin bei der Kabelorganisation.
Ich habe bei meinem Fernseher und Anlage und Router steht da auch noch dabei, habe ich bestimmt 4, 5 Meter davon verbraucht.
Weil ich einfach, ja, ich wollte die Kabel verdammt nochmal organisiert haben.
Und das kommt dann auf so einer großen Rolle.
Und dann kann man sich so ein Stück abschneiden, so groß wie man braucht.
Man kann es wiederverwenden.
Es ist einfach geiles Zeug.
So, das zum Geilteil Nummer 1.
Geilteil Nummer 2 ist mir heute tatsächlich über den Weg gelaufen, weil ich es gebraucht habe.
Ist eine Webseite.
Da sind wir ganz wieder weg aus der physischen Welt.
Ist auch gar nicht so neu.
Ich kenne das schon eine Weile, aber ich bin heute nochmal darüber gestolpert und dachte so,
Das ist auf jeden Fall erwähnenswert, wenn man das mal braucht.
Und zwar BrowserDefaultStyles.com
Was die Seite macht, ist genau das, was sie sagt.
Nämlich, ich kann auf BrowserDefaultStyles.com ein HTML-Element eintippen.
Ich habe jetzt zum Beispiel mal Ordered List eingetippt.
Und dann kriege ich eine Liste, welcher Browser was für CSS-Standardstyles darauf anwendet.
Das kann durchaus interessant sein, wenn man bestimmte Sachen überschreiben will oder so denkt,
naja, ich will jetzt bei der Liste beispielsweise, will ich jetzt irgendwie nicht, dass die nach links irgendwie einen Margin noch hat oder so
oder irgendwie einen allgemeinen Abstand.
Was ist denn da?
Was muss ich mich denn da überhaupt kümmern?
Was kann denn potenziell irgendwie an Standardstyles gesetzt sein in allen Browsern, ohne dass ich alle durchtesten muss und das sehen muss?
Finde ich extrem praktisch, wenn man sowas irgendwie, so Standard-Elemente überschreiben will, dass man auf jeden Fall auch keine Eigenschaft vergisst.
Und dabei bin ich dann auch nochmal drauf gestoßen, dass viele Browser mittlerweile, das könnten wir vielleicht auch mal irgendwann,
vielleicht wird das nochmal Property der Woche, aber jetzt mal ganz kurz angeschnitten,
CSS-Logical-Properties verwenden.
Zum Beispiel Margin-Inline-Start statt Margin-Left beispielsweise.
Witzig, das habe ich nämlich gerade, habe mir rauskopiert, da bin ich nämlich auch oft durch die Seite drauf gestoßen
und habe es bei uns im Trello gespeichert unter der Themen-Idee Properties, die keiner nutzt.
Was? Nein, nein, nein, nein, nein, das ist die Zukunft, mein Freund, das ist die Zukunft.
Ja, da können wir in einer eigenen Sendung dann darüber sprechen.
Genau, also CSS-Logical-Properties, ich weiß nicht genau, das habe ich auf jeden Fall auf einer Konferenz vor mindestens einem Jahr oder noch länger mal gehört.
Und das ist, glaube ich, ich finde, es ist die, die eigentlich die, ja gut, es heißt auch schon Logic-Properties,
aber das ist die logische Fortsetzung von Left und Right, gerade wenn man es mit Multilanguage-Seiten zu tun hat,
wo auch der Text mal von rechts nach links läuft oder so, da ist genau das das, was man haben will.
Und deswegen benutzen die Browser das oftmals auch schon als Standardwert da,
der natürlich dann von Margin-Left beispielsweise überschrieben wird bei Margin-Inline-Start oder so.
Ja, genau, ich glaube auch mit Flexbox und Grid, da gibt es das auch schon oder da ist das teilweise schon so umgesetzt,
dass es da gar nicht mehr gibt Left und Right, sondern Start und End.
Finde ich eigentlich, wenn man genau darüber nachdenkt, auch die logischere Sache.
Aber wie gesagt, da können wir mal ein bisschen genauer drüber sprechen, aber nicht heute.
Nur ist mir das jetzt gerade über den Weg gelaufen.
Damit sind meine Geilteile fertig und ich habe gesehen, wir haben jetzt auch einen Geilteil-End-Dschingel.
Haben wir den eigentlich letztes Mal schon verwendet?
Achso, den haben wir letztes Mal abgespielt. Das war mehr so als Gag, aber wirklich, ich kann ihn auch nochmal.
Ja, ich fände das irgendwie gut, den nochmal abzuspielen, weil das Geilteil ist jetzt vorbei und dann kommt Folgendes.
Ihr habt es alle verstanden, das ist das Geilteil rückwärts.
Ich weiß nicht, ob das wirklich ...
Ob sich das so durchsetzen wird.
Ob sich das etabliert, das ist jetzt fürs Mal lustig, aber bei jedem Mal wird es wahrscheinlich unlustiger, nehme ich mal an.
Vermutlich.
Gut.
Bleibt noch.
Wir sind unter anderthalb Stunden. Wenn wir es jetzt nicht noch verkacken.
Also ich bin jetzt gerade bei 1,29,57.
Ich bin bei 1,29 bin ich jetzt. Ich habe nämlich die Aufnahme dann später erst begonnen als du.
Ja, aber dann reden wir doch jetzt nicht lange drumherum.
Es war wie gesagt eine Freude, dass so viel Feedback gekommen ist auch.
Ja, es macht immer mehr Spaß. Und dann würde ich sagen, macht weiter so, gebt uns Feedback, schreibt Kommentare, schreibt uns auf Twitter, antwortet mal auf die Tweets, die wir da so in den Raum stellen.
Es sind ja nicht so viele.
Nee, so viele ist es ja gar nicht. Da kann man ja schon ab und zu mal ...
Drei Tweets kann man auch mal antworten.
Genau.
Und genau, schickt uns Bier, wollte ich noch sagen.
Ja, schickt uns Bier, schickt uns Chips, schickt uns Pizza per DHL.
Also wir nehmen meistens, ihr könnt uns auch einfach so mal Pizza bestellen, solange wir sie dann nicht bezahlen müssen.
Aber ihr habt die Adresse nicht von uns, deswegen ...
Nee, das wird schwierig an die Parkstation.
Naja, ich weiß nicht. Also wenn man da jetzt findig wäre, könnte man, also wir nehmen normalerweise Donnerstagabend oder Freitagabend auf.
Vielleicht, also ein findiger Ingenieur schafft es vielleicht, eine Pizza so in die Parkstation einzuliefern, dass sie dann Donnerstagabend oder Freitagabend fertig ist.
Sagen wir mal Freitagabend.
Guck, bei den Temperaturen kannst du die vielleicht sogar roh schicken und die ist dann durch, bis wir sie verzehren.
Ja, also in Karlsruhe ist es gerade wirklich krass. Ich weiß nicht, wie es bei euch jetzt gerade ist.
Also man hört vielleicht auch den Ventilator surren im Hintergrund.
Ja, bei mir ist das mein Laptoplüfter. Den hört ihr die ganze Zeit schon.
Aber da das Ding jetzt wirklich auseinanderfällt, wird es jetzt tatsächlich Zeit. Vielleicht habe ich dann demnächst was Leiseres.
Gut, dann eine Sache noch zum Abschied.
Vergesst nicht die Mehrwertsteueranpassung.
Da hatten wir es schon mal letzte Folge drüber.
Jetzt demnächst ist der 1. Juli oder vielleicht ist er schon da, bis ihr es hört.
Und nicht vergessen in diversen Shop-Systemen oder als selbstständige Mehrwertsteuersenkung zum 1. Juli.
Ich habe schon die erste Mail bekommen von einer Firma, die sagt, dass sie es nicht weitergeben.
Ach, das schreiben die auch noch extra.
Ja, die haben das erklärt. Ich kann ja kurz sagen, ich weiß nicht, mache ich da jetzt Werbung für die? Egal.
Das war Stadtmobil in meinem Fall, also so ein Carsharing-Anbieter.
Und die haben gesagt, wir haben jetzt durch Corona-Krise so gelitten, das war so schlecht für unser Geschäft,
dass wir jetzt diese Mehrwertsteuersenkung nicht weitergeben, sondern gucken, dass wir irgendwie wieder auf die Reihe kommen.
Gehen wir davon aus, dass das stimmt, finde ich das eine sehr gute und transparente Art, damit umzugehen.
Gehen wir davon aus, dass es nicht stimmt, schämt euch.
Ich weiß es nicht. Also ich will niemandem was unterstellen.
Ich finde es aber auf jeden Fall immer besser, wenn transparent mit sowas umgegangen wird.
Ha, und ich habe es doch geschafft, nochmal abzuschweifen.
So, dann jetzt. Auf Wiedersehen.
Auf Wiedersehen.
Bis zum nächsten Mal.