
Working Draft· Folge 736
Revision 736: Glücksrad mit widerrufbaren Proxys, Feature-Detection-Versagen, HDR und mit Stefan Judis
Dienstag, 3. November 2026 · 1 h 21
Kapitelklicken springt direkt hin
Shownotes
Für diese Ausgabe unseres Glücksrads (workingdraft.de/gluecksrad) haben wir uns Stefan Judis (stefanjudis.com) eingeladen. Stefan war schon einige Male zu Gast, zuletzt in Revision 542 (workingdraft.de/542), ist Frontend-Entwickler, DevRel bei Checkly (checklyhq.com), schreibt den wöchentlichen Newsletter Web Weekly (webweekly.email) und teilt regelmäßig spannende Entdeckungen aus der Welt der Webentwicklung. Ihr findet ihn außerdem auf LinkedIn (linkedin.com/in/stefan-judis), Bluesky (bsky.app/profile/stefanjudis.com) und Mastodon (front-end.social/@stefan).
Gemeinsam drehen wir am Glücksrad und sprechen über eine bunte Mischung aus HTML, CSS, JavaScript und Accessibility. Dabei geht es unter anderem um Fortschrittsanzeigen, SVG-Styling, logische CSS-Eigenschaften, widerrufbare JavaScript-Proxys und die Grenzen der CSS-Feature-Erkennung.
Shownotes
[] aria-multiline und editierbare Inhalte (developer.mozilla.org/en-US/docs/Web/Accessibi…)
Wir starten mit dem ARIA-Attribut aria-multiline und diskutieren, wie mehrzeilige Texteingaben für assistive Technologien ausgezeichnet werden. Dabei sprechen wir auch über die HTML-Eigenschaft developer.mozilla.org/en-US/docs/Web/API/HTMLE… und darüber, wie sich mit developer.mozilla.org/en-US/docs/Web/API/HTMLE… feststellen lässt, ob ein Element bearbeitbar ist.
[] Widerrufbare JavaScript-Proxys (developer.mozilla.org/en-US/docs/Web/JavaScrip…)
Was passiert, wenn ein Proxy widerrufen wird und anschließend trotzdem noch jemand darauf zugreift? Wir beschäftigen uns mit Proxy.revocable(), den daraus entstehenden JavaScript-Fehlern und möglichen Einsatzgebieten bei der Verwaltung von Ressourcen und Objektlebenszyklen. Dazu passt das Paket npmjs.com/package/@sirpepe/no-use-after-free.
[] Das HTML-Element ol (developer.mozilla.org/en-US/docs/Web/HTML/Refe…)
Wir untersuchen die Attribute nummerierter HTML-Listen, darunter start, reversed und type. Dabei stoßen wir auch auf historische Attribute wie compact und sprechen über ihre Bedeutung und Browserunterstützung.
[] Logische CSS-Eigenschaften (developer.mozilla.org/en-US/docs/Web/CSS/Refer…)
Mit padding-block-end und verwandten Eigenschaften beschäftigen wir uns mit dem Unterschied zwischen physischen und logischen Richtungsangaben in CSS. Wir diskutieren die Vorteile für unterschiedliche Schreibrichtungen und kommen dabei auch auf die Pseudoklasse :dir() (developer.mozilla.org/en-US/docs/Web/CSS/Refer…) zu sprechen.
[] developer.mozilla.org/en-US/docs/Web/CSS/Refer…
Auch abgerundete Ecken haben logische CSS-Eigenschaften. Wir schauen uns an, wie border-start-start-radius von Schreibrichtung und Writing Mode abhängt, und diskutieren die Lesbarkeit solcher Eigenschaftsnamen. Dabei erinnern wir uns an Keith Cirkels Quiz CSS or BS? (keithcirkel.co.uk/css-or-bs), bei dem man echte CSS-Features von erfundenen unterscheiden muss.
[] CSS stroke und paint-order (developer.mozilla.org/en-US/docs/Web/CSS/Refer…)
Wir sprechen darüber, wie sich mit stroke und developer.mozilla.org/en-US/docs/Web/CSS/Refer… die Darstellung von Text und SVG-Inhalten beeinflussen lässt. Ein besonderes Problem ergibt sich bei der Feature Detection: Ältere Chrome-Versionen erkennen bestimmte Werte in @supports als gültig, obwohl sie die gewünschte Darstellung außerhalb von SVG noch nicht unterstützen.
[] CSS-Feature-Erkennung mit supports named-feature (bram.us/2026/08/27/feature-detecting-undetecta…)
Ausgehend von den Schwierigkeiten mit paint-order diskutieren wir die Grenzen klassischer developer.mozilla.org/en-US/docs/Web/CSS/Refer…. Wir schauen uns den Vorschlag supports named-feature an, mit dem sich künftig auch CSS-Funktionen erkennen lassen sollen, die nicht zuverlässig über eine Property-Value-Kombination getestet werden können.
[] Wide Gamut und HDR
Wir kommen auf die neue CSS Color HDR Spec (w3.org/TR/css-color-hdr-1) zu sprechen und beschäftigen uns mit Bildern, die einen größeren Farbraum oder einen erweiterten Helligkeitsumfang nutzen. Dabei unterscheiden wir Wide Gamut von HDR und diskutieren, wie Browser und Displays solche Inhalte darstellen. Zu sehen auf dieser Testseite (wide-gamut.com/test/image-hdr).
[] ARIA meter, HTML meter und progress (developer.mozilla.org/en-US/docs/Web/Accessibi…)
Zum Abschluss geht es um die ARIA-Rolle meter und das selten verwendete HTML-Element css-tricks.com/html5-meter-element. Wir klären den Unterschied zu developer.mozilla.org/en-US/docs/Web/HTML/Refe…: Während meter einen Messwert innerhalb eines bekannten Bereichs darstellt, beschreibt progress den Fortschritt eines Vorgangs. Außerdem diskutieren wir die Vorteile nativer HTML-Elemente gegenüber selbstgebauten Lösungen.
Diskutiert die Folge mit uns in unserem Community-Slack: draft.community
Transkriptvom Podcast bereitgestellt · Zeitmarken springen hin
Okay, Hot Take meinerseits. Ich glaube, das kann man sich sparen. Ich glaube, Mieter und Progress in HTML als Elemente nativ einzubauen, hat sich, glaube ich, erwiesen als Fehler. Also alles, was das Mieter-Element halt wirklich bringt, ist ein hässliches Diff, das im Firefox anders aussieht als in Chrome. Den Hot Take unterschreibe ich so.
Genau. Das ist nicht bescheuert. Das ist prima. Wie kann man sowas machen? Ich verstehe das gar nicht. Wie kommt jemand auf die Idee? Naja, weil das andere halt noch falscher aussieht. Das andere sieht noch falscher aus, okay. Revision 736. Wir sind heute zu dritt. Da hätten wir aus dem Team den Peter.
Hallo Peter. Moin, moin. Ich bin der Schepp und wir haben einen Gast und zwar den Stefan Judis. Hallo Stefan. Hallo, ich freue mich wieder da zu sein. Wie geht's euch? Ja, gut. Vor allem noch besser, weil du dabei bist. Achso gut. Ja, ist ein Malchen her. Ist ein Malchen her, aber du warst ja jetzt schon.
Weiß ich nicht, schon ein paar Mal zu Gast. Dreimal, dreimal, glaube ich. Ja, genau. Und wir haben irgendwann vor einer Zeit mal irgendwie gesagt, Glücksrad, jetzt haben wir Bock drauf, hat man damals dann nämlich auch gemacht. Und auch das ist jetzt leider lange schon wieder her. Und da haben wir gesagt, das geht nicht. Da müssen wir mal wieder ein Glücksrad machen und dich dazu einladen.
Ich freue mich. Lass mal schnattern über Web-Technology. Machen wir. Genau. Wie das geht, wissen wahrscheinlich alle unter workinggraph.de slash Glücksrad, haben wir so ein Ding, das wirft aus MDN zufällig irgendwelche Sachen raus. Inspiriert übrigens durch dich. Du hast ja diesen random MDN Bot mal gebaut.
Oh shit, ist der Stefan kurz weg gewesen? Nein, er ist wieder da. Was ich jedenfalls sagen wollte, ist, dass du, Stefan, irgendwann diesen random MDN Bot gebaut hattest, wo du auch irgendwie einfach zufällig aus den ganzen MDN Dokumentationen dir was rausfischst und das postest. Damals auf Twitter. Ich weiß nicht, ob das auch... Mastodon, glaube ich, auch, oder? Mastodon hat irgendwer geforkt.
Ich habe es mit Twitter sterben lassen, als die API gekillt wurde, aber es lebt noch auf Mastodon. Es gibt, glaube ich, auch einen, der nur HTML macht. Ja, wenn man random Sachen lesen will, gute Sache. Genau, der HTML, das ist hier... Moritz. Ist es Moritz? Ich glaube. Genau. Und das haben wir hier in Form dieses Glücksrad eben dann auch gebaut.
Und wir können hier aussuchen, welche quasi Untergruppen wir rausfischen wollen. Aber wir lassen jetzt alle an. Das ist Accessibility, das ist APIs, das ist CSS, HTML, JavaScript, Language Features und SVG. Aber meine Herren, jetzt muss man mal kurz sagen, welche von diesen Kategorien ist unsere jeweilige Horror-Kategorie?
Von was haben wir am wenigsten Ahnung? SVG. Ja, ich glaube SVG wäre... Da gibt es so viel Kram drin. Ich glaube, ich habe von SVG mehr Ahnung als Accessibility. Also beides auf so extremer Kreisklasse. Aber ich weiß, wie er aus der Kreisklasse absteigt. Und das ist nicht SVG. Genau, eigentlich müsste ich ja noch Martha Mell da mit reinhängen.
Dann, das wäre richtig übel. Aber genau, ich wollte ja eh eine Folge zu Martha Mell machen. Aber derjenige, den ich kenne, der Peter Krautsberger, der tief in Martha Mell drinsteckt, der findet Martha Mell total scheiße. Das sagst du, als wäre das ein Problem, als würde das einer Folge entgegenstehen.
Ich finde, das klingt eher... Wir können doch nicht immer nur positive Nachrichten verteilen. Da muss auch mal ein ordentlicher Rant zwischen. Ja, hatte ich auch gesagt. Immer mal wieder bei Gelegenheiten sage ich so, ja, hier übrigens MassML, das könnten wir ja nochmal machen. Genau, das klappt auch irgendwann.
Genau. Und ja, ich würde sagen, wir ziehen jetzt mal das erste Ding. Und Stefan, du bist unser Gast. Du legst mal los. Ich drücke mal den Knopf. Auf geht's. Na ja, klar. Direkt Accessibility. Es geht los mit Accessibility. Area, Multiline, Attribute. Ich weiß, was ein Attribut ist. Ich weiß, was Area ist. Und Accessibility kenne ich auch. Multiline.
Wollen wir kurz drüber nachdenken? Vielleicht irgendwas, wenn man eine Text-Area nachbauen möchte vielleicht? Ja, ich habe es davon noch nicht gehört und habe jetzt mal die Erklärung geöffnet. Und in der Tat ist es so, wenn man eine Textbox baut und die soll aber eben nicht wie ein Input sein, sondern wie eine Text-Area, also eine Roll-Textbox, dann würde man Multiline auf True setzen und, das wäre dann semantisch würde es das gleiche kommunizieren an die assistive Technologie wie eben eine Textarea das tut.
Ja, stellt sich halt die Frage, wann man das machen wollen würde. Na, NBN dokumentiert halt das in dem Fall, dass man halt gucken muss, wie sich Enter verhält. Ob jetzt das vielleicht ein Submit auslösen könnte oder nicht. Wann würde ich eine Text-Area nachbauen? Du würdest vielleicht keine Text-Area nachbauen, aber Text-Area-ähnliche Konstruktionen, die so viele Spezialfeatures haben, dass du dir nicht an eine Text-Area dran dängeln kannst. Also mein Gedanke wäre sowas wie Code Editor mit irgendwie maximal vielen Features da drin.
Vielleicht das? Ich meine, so Kram wie Codemirror wäre ja tatsächlich großteils from scratch rekonstruiert, allein schon um irgendwie so zwischen verschiedenen, Betriebssystemen und Browsern irgendwie einheitliches Verhalten herzustellen. Ja, ich stimme mir komplett zu, aber ich denke, sonst wird das eigentlich so gemacht, dass die Text-Area halt unten drunter liegt mit Transparent-Kram und dann wird halt irgendein Renderer oder irgendein, weiß ich nicht, Diff oder sowas.
Geht das nicht aus? Ich habe zufälligerweise auf CodeMovie tatsächlich CodeMirror am Laufen. Und da gucke ich jetzt mal wirklich nach, wie die gebaut sind. Und da habe ich ja tatsächlich praktischerweise beides am Start. Also da habe ich CodeMirror und darüber mein eigenes Highlighting gebaut, weil das nicht dem entspricht, was die machen.
Also wenn das der Hack ist, dann habe ich diesen Hack mit der unsichtbaren Textarea quasi zweimal gestapelt. Es ist alles extrem barbarisch. Naja, nee, das ist ja so. CodeMirror hat eingebaute Syntax-Highlighting, aber das ist halt nicht das, was ich haben will. Also ich will aber diese Editor-Features haben, wie irgendwie Tab-Einrückung und sowas alles und die will die nicht selber bauen, also nehme ich halt einen Code-Mirror, mache den unsichtbar und lege da mein eigenes Rendering halt hinter, so, aber wie funktioniert denn das jetzt tatsächlich, Announced, Dispellcheck CM-Line, ne das ist tatsächlich, da ist keine Text-Area drin, das ist Content-Addable-True dann irgendwie gesetzt, muss ja eigentlich,
Ich stochere jetzt hier im Markup rum, das ist natürlich auch so mittel-effektiv. Content-Editable, true, natürlich. Ja, genau, da ist es. Ich habe es halt nur nicht gesehen, weil da halt auch so Spellcheck und Translate und alles so auch gesetzt werden muss. Halt auf No und Off und was nicht alles. Aber nee, das ist, glaube ich, genau so ein Beispiel dafür, wenn man das bräuchte.
Ja, macht Sinn. Haben wir sonst noch Use Cases? Nee, ne? Oder? Unterschiedliche Interfaces, die nicht Text Areas benutzen können? Ja, weiß nicht. Wenn du, weiß nicht, ob man sowas haben würde, dass man irgendwas in der Canvas editiert oder so und die dann entsprechend oder da dann Dinge auszeichnet, vielleicht.
Ja, aber das könntest du, also wenn es nicht gerade auch diesen Code Editor Use Case hat, könntest du da ja tatsächlich wirklich eine Text Area drüber rendern, weil du hast dann ja absolute Koordinaten, weißt ja, dass die gleichen Fonts am Start sind und das kannst du, glaube ich, wirklich halbwegs überzeugend machen.
Ich glaube, das Ding ist halt wirklich, wenn du wirklich was hast, was inhärent Texteingabe ist, aber diese Texteingabe wirklich mehr sein muss als schreib eine E-Mail. Weil das halt wirklich mega interaktiv ist. Ich könnte mir auch sowas vorstellen wie irgendwie so das UI von sowas wie Notion vielleicht, wo ja auch, okay, du editierst Text, aber eigentlich sind es ja so Widgets, die du schreibst, mehr oder minder.
Ja, und früher konnte man vielleicht so eine Auto-Growing-Text-Area, wenn man die haben wollte, dann hätte man vielleicht irgendwie ein Diff mit Content-Editable haben können und aber dann wahrscheinlich fängt man sich dafür andere Probleme wieder ein, wie eben mit Enter und so weiter, dass man die ganzen, Key-Sachen abfangen muss, weiß ich nicht.
Aber das geht halt mit dem Diff natürlich leichter, dass es einfach Auto-Growing ist im Gegensatz zu bisher, also mittlerweile geht das ja mit Field-Sizing. Aber früher ging das ja eben nicht dass die Text-Area automatisch wuchs mit, Wieso war das beim Diff einfacher? Naja, ein Diff, das ist ja einfach so hoch wie der Inhalt darin.
Achso, Auto-Growing im Sinne von automatisch durch den Browser hergestellt per Layout-Mechanismus und du hackst das nicht per JavaScript dran, okay. Ja, genau. Und in dem Bereich wäre es noch spannend. Wir hatten ja vor, wann kam, ich habe gerade mal geschaut, vor ungefähr, weiß ich nicht, sechs Monaten, kam ja auch Chrome daher mit HTML in Canvas.
Da stellt sich halt die Frage, ob das, wie das barrierefreiheitstechnisch, ob das dann alles so hinhaut. Aber theoretisch konntest du ja schon Formelemente, barrierefrei im Canvas irgendwie zusammendudeln. Ich habe das nicht ausprobiert persönlich, aber da waren fancy Demos auf jeden Fall unterwegs. Ich glaube, dass einfach, dass das normales DOM dann ist, was einfach in der Canvas drin ist, also durch die Canvas gerendert oder modifiziert wird.
Ja, das stimmt. Ich habe gerade vor mir ist halt Canvas und da ist ein Div drin. Theoretisch müsste das ja dann noch Focus und Keyword Events und sowas müsste dann ja theoretisch funktionieren. Okay, meine Herren, einmal kurz bitte die Augen abwenden von der MDN-Page und mir folgende Frage beantworten.
Das Attribut heißt ja area-multiline in einem Wort. Jetzt kann ich ja so den Bindestrich-Character nicht einsetzen in meiner JavaScript-Programmierung und entsprechend auch nicht im DOM-Interface. Ratet doch mal, wie das im DOM-Interface reproduziert ist. Wie heißt diese Property in JavaScript? Mit dem Casing. Also wenn du so fragst.
Ja, also Stefan, normalerweise würde sowas mit so Camel Case gemacht. Okay, jetzt gibt es aber vom Kamel mehrere Arten. Da gibt es ja das mit einem Höcker und das mit zwei Höckern. Wie viele Höcker haben wir jetzt hier? Ich habe jetzt schon hingeguckt. Also eigentlich müsste es ein Höcker sein, aber Aber deswegen sage ich ja, wenn du schon so fragst, dann ist es wahrscheinlich nicht so. Und Line ist vielleicht auch nochmal groß geschrieben. So sieht es mal aus.
So sieht es mal aus. Es ist halt wirklich Area und dann Multi mit großem M und Line mit nochmal großem L. Das ist nicht bescheuert. Ja. Das ist prima. Da müssen wir was machen. Ich verstehe das gar nicht. Naja, weil das andere halt noch falscher aussieht. Das andere sieht noch falscher aus. Weil dann hast du ja Multiline, was du jetzt, wenn du jetzt, ignoriere mal das ARIA-Präfix.
Wenn du jetzt einfach nur eine Variable oder eine Klasse oder sowas in deinem JavaScript, das die Multiline heißt und du würdest CamelCase verwenden, dann würdest du das so schreiben. Nur du hast halt eben beide Probleme. Du hast einerseits das nicht-case-sensitive HTML-Attribut, wo eh alles egal ist, und ein Bindestrich da drin und das sind zwei Probleme, die du reparieren musst.
Und du hast halt nur ein Werkzeug dafür und das ist super. Das ist einfach maximales Chaos. Gibt's denn so reguläre, also HTML-Attribute haben nie einen Bindestrich, ne? Was mit Data-Attributen? Was mit ARIA-Attributen? Genau, aber das ist ja dann so eine Art Prefix, aber dann, also quasi das Attribut an sich, also der Hauptteil hat nie einen Bindestrich, glaube ich.
Was heißt denn haben? Was heißt denn Attribut? Also ich meine, jetzt musst du mir natürlich sagen, wo ist so deine Grenze? Data ist ja jetzt quasi, da ist ja nichts definiert. Also das kannst du ja frei, da kannst du ja frei tun und lassen, was du willst, nach data-bindestrich. Aber gilt das nicht für alle Attribute? Wenn ich mir ein Attribut der dash-shap ausdenke, dann funktioniert das ja auch im Sinne von, kann ich eine Seite bauen, kann ich einen CSS-Selektor für schreiben, stürzt nicht ab, alles wunderbar.
Ich frage mich halt, ob vom W3C spezifiziert Attribute existieren, die einen Bindestrich haben. Alle ARIA-Attribute. Genau, aber das ist ja, also wenn du den Prefix weglässt, also der Teil, der quasi, wo es um das eigentliche Attribut geht, dieses ARIA-Bindestrich ist ja im Grunde nur so ein Prefix, weil es eben aus der ARIA-Spec kommt. Content-Editable.
Ist Content auch ein Prefiz? Nee, das ist auch ohne. Das ist ein Wort, das ist ja genauso wie mit Shadow Root Mode und ähnlichen Dinge. Dann wäre nämlich die Frage zum Beispiel über Content Editable, wie ist denn das, also haben die das Problem da auch und haben die das auch so gelöst, in Anführungszeichen gelöst?
Content. Editable. Wo steht das denn hier nicht drin? Ah doch, haben sie auch so gelöst. Genau, ja. Ja, und Shadow Root Mode und ähnlicher Kram genauso. Muss ja. Ja, okay. Ah, guck mal, es gibt HTML Element Content Editable. Das ist das eine. Und es gibt HTML Element ist Content Editable. Und das ist was anderes. Mhm.
Ja. Warum will man das noch haben? Content Editable ist kein Boolean-Attribut. Also du kannst ja den kannst du ja Werte geben, das ist ja nicht so ein Boolean-Attribut wie disabled, wo es entweder disabled ist oder nicht, aber Content-Editable kann ja true sein, kann false sein und kann Plain-Text-Only sein, aber weil Plain-Text-Only ja bloß ein Sonderfall von true ist, kocht dir, ist Content-Editable dieses Triplett noch runter auf ein Boolean, wo du halt sagen kannst, ich will nur wissen, ob Content-Editable und ich akzeptiere Plain-Text-Only als eine Variante von true. Ja, okay.
Na gut. Plain-Text-Only. Today you learned. Nicht schlecht. Ja, ich glaube, das gibt es noch nicht so lange und war wirklich mal überfällig, dass das gibt. Ja, ich sehe, Firefox kam 2025 dazu. Ja, stimmt. Krass spät. Wow. Tja, genau. Aber jetzt haben wir es. Schöne Detour. Das ist ja auch das Gute. Das ist ja kein Detour, das ist ja wie eine Kreuzfahrt.
Nee, nicht eine Kreuzfahrt. Genau, eigentlich ist das eine Safari und wir wollten nur den Elefanten sehen, aber haben noch das Schachelschwein dabei gesehen. Und wir schießen nichts ab, bitteschön. Sonst steigen wir hier in die Versen. Wir lassen jetzt wieder laufen. Tierchen aufs Dach, genau. Die rennen jetzt schon weg in die Savanne.
Genau. Scherben wir. So. Scherben, möchtest du die Glücksfee spielen? Ich drücke. JavaScript Error Reference. Interessant. Aka die ECMAScript-Spezifikation. Ja, genau. Also ich habe noch nichts angeklickt und kann nur jetzt schon mal sagen, ohne anklicken habe ich keinen Plan. Naja, ich meine, Error Reference ist halt eine Reference von angeblich ja, nee, also Sache steht hier, List of Errors thrown by JavaScript. Okay.
Und das ist wirklich alles aufgelistet, was man an Fehlermeldungen in seiner Konsole haben kann. Nein. Nein. Nein, weil das sind ja nur die JavaScript-Fehler. Du kannst ja auch noch die davon für normale Menschen nicht unterscheidbaren DOM-Fehler haben. Ja, okay. Und wenn die dann auch spezifiziert, hier diese Fehler in der Spec?
Die welchen? Also, dass die geworfen werden müssen in diesem Wortlaut? Wortlaut weiß ich nicht erstmal kurz nach meinem Pad-Peef gucken, mein Pad-Peef ist hier gar nicht erwähnt das heißt die Liste ist schon mal unvollständig, also nein ist es nicht aber es sind wahrscheinlich die üblichen, nach denen die Leute halt eben suchen und wo sie in früheren Zeiten mal zu sowas wie MDN gegangen wären um zu gucken, was ist es denn.
Und ist ja auch ganz gut. Ich meine, X is not a function ist ja jetzt nicht irgendwie selbsterklärend. Nö. Und dann kann man hier nachgucken, was, okay, ja, stimmt. X is not a non-null object. Ist auch wirklich so, wow, das ist so eine Abfolge von Worten, die hätten sich unsere KI-Bros nicht besser zusammen prompten können.
Das versteht auch kein normaler Mensch, wenn man anfängt, drüber nachzudenken. Aber ja, mein Lieblingsfehler ist da nicht drin. Das ist sehr erschreckend. Welcher ist das denn? Das ist, wenn man ein Revocable Proxy revoket und versucht, irgendeine API auf dem Ding zu benutzen. Passiert mir ständig. Ja. Revocable Proxy.
Ey, ey, ich hab einen Use Case dafür, okay? Also Ruhe auf den billigen Plätzen. Aber es ist halt echt lässig, weil das Problem ist halt wirklich, dann kommt halt eben so eine kryptische Nachricht raus, von wegen du hast halt irgendwie versucht, du hast eine Trap ausgelöst auf einem revoketen Proxy und irgendwie so, was? Das verstehen ja schon irgendwie so Hardcore-Nerds nicht.
Und wenn du halt irgendwelchen Normies eine Library gibst, die das halt eben als Feature nutzt und die sehen diese Fehlermeldung, dann glauben die doch auch, ihnen schmilzt gleich der Browser weg und irgendwie, die wurden gehackt oder was, weil das halt keine alte Sau versteht und diese Fehlermeldung ist halt nicht customizable.
Sollte ich jemals irgendwie mal versuchen, so auch was irgendwie, also einfach nur so, um mein Profil zu schärfen, will ich mal irgendwie eine Contribution in ECMAScript stehen haben, dass ich irgendwie sagen kann, so an dem Ding habe ich mitgearbeitet, Dann würde ich, glaube ich, versuchen, dafür mal zu lobbyieren.
Was ist denn dein Use Case für den Revolte Proxy? Mein Use Case für den Revolte Proxy ist folgender. Wenn du Explicit Resource Management hast. Explicit Resource Management. Kennst du, Stefan? Ja. Okay, dann erzähl doch mal kurz, weil das kennen bestimmt nicht alle. Okay, warte, da habe ich jetzt geflogert. Explicit Resource Management.
Wenn du nicht Lettlich Kunst nicht wahr, sondern Using verwendest, mit der Idee, dass du irgendwie ein Objekt in die Welt setzt, das Objekt hat eine irgendwie mit sich assoziierte Clean-Up-Logik, du machst nicht LettX, gleich New Objekt mit assoziierter Clean-Up-Logik, sondern machst du UsingX mit der Clean-Up-Logik, dann ist das so, dass wenn dieses Objekt, out of scope geht, Sprich, wenn der Block oder die Funktion, wo das drin mit Using deklariert wurde, zu Ende gelaufen ist, dann wird automatisch diese Cleanup-Logik aufgerufen und man kann zum Beispiel so Sachen wie, ich habe vergessen, die temporären Datei zu löschen, nicht mehr machen. Das kann also nicht passieren.
So, das ist so die Idee dahinter ein Problem, das mir dabei aufgefallen ist das sorgt halt wirklich nur dafür, dass diese Cleanup-Logik aufgerufen wird, das bedeutet aber nicht automatisch, dass das Objekt danach unbenutzbar ist, weil was du ja machen kannst ist, machst du eine Deklaration mit Using, machst ein Alias, der Block läuft zu Ende und dann machst du einfach am Ende der Funktion Return Alias, dann hast du also ein Objekt in der Hand, eine Referenz auf das Ding, das Out of Scope gegangen ist das als Out of Scope intendiert ist dessen Cleanup-Logik gelaufen ist und das also in einem nicht benutzbaren Zustand ist oder zumindest sein sollte, aber nichts hält dich inhärent davon ab, mit diesem Alias weiter zu reden.
Alles, was halt Using garantiert, ist, dass eine bestimmte Funktion aufgerufen wird, wenn es den Autoscope geht. Und da dachte ich mir, ist doch wunderbar, da machst du einfach ein Revocable Proxy über diese Dinger drüber. Das machst du ganz einfach, indem du eine Rapper-Funktion nimmst und da diese Objekte reinschiebst oder du machst einen Decorator auf eine Klasse, die das implementiert.
Dann hängt da drauf ein Revocable Proxy. Der hängt im Prinzip sich auf den Dispose-Logik drauf und sagt halt eben, wenn dieses Objekt Disposed wird, also out of scope gegangen ist, dann invalidiere ich mich selbst. Revocable Proxy ist ja einer, der irgendwann sagen kann, die Verbindung zwischen Proxy und Target-Objekt wird getrennt.
Und dann schmeißt es halt eben lustige Errors, sobald du versuchst, darauf irgendwelche Methoden aufzurufen, auf Properties zuzugreifen und so weiter. Das heißt, wenn es dann auf der Scope geht, ist nicht nur Glieder passiert, sondern es ist auch in 98 Prozent der Fälle dann auch nicht mehr benutzbar, weil es dann deaktiviert ist.
Und Problem ist halt eben, an der Stelle kommt halt dann irgendwie so eine Fehlermeldung. Ja, du hast jetzt irgendwie die GetTrap auf dem Revocable Proxy aufgerufen und was ich gerne hätte, wäre, dass ich customisen kann für meinen Use Case. Du versuchst hier ein Objekt zu benutzen, dessen Dispose-Logik schon gelaufen ist, aber das geht nicht.
Und deswegen würde ich dafür lobbyieren, dass, wenn ich den Revocable Proxy Constructor aufrufe, ich nicht nur reinstecke Target, Handler und das was, sondern ich hätte gerne Target-Händler und optionale Fehlermeldung, die geworfen werden soll, wenn das Ding dann am Ende tot ist. Und das fände ich gut. Ja, und warum bringst du dich da nicht ein bei der TC-Cert hinein und schlägst das vor? Bezeugt mich keiner für, ich habe endlich viel Zeit.
Ach, dafür bist du dann in der Spec verewigt. Ja, ja, wie gesagt, irgendwann mache ich das vielleicht mal. Weil das garantiert irgendwas ist, für das sich keine alte Sau interessiert. Also da muss ich nicht irgendwie FOMO haben, das kann mir auch Claude nicht wegnehmen. Also das wäre so meine Idee dafür. Aber das einzige Problem mit meiner tollen Idee für diesen Rapper ist, dass das mit privaten Feldern nicht funktioniert.
Weil private Felder auf Klassen ja tatsächlich nicht private Felder, also im Sinne von Properties sind, sondern die funktionieren ja mehr so wie eine weak map. Die Daten, die privaten Daten assoziiert mit Instanzen. Und deswegen löst ein Zugriff auf ein privates Feld nicht automatisch eine der Proxy-Traps aus.
Das heißt, unter extrem bestimmten Randaspekten kann man mit sehr viel Gewalt eine Klasse konstruieren, die man dann in diesen Revocable Proxy wrapped und wo dann auch tatsächlich der Proxy beim Out-of-Scope-Gen ordnungsgemäß die Dispose-Logik triggert und alle Traps deaktiviert. Aber es ist halt nicht so, dass Traps notwendigerweise ausreichend sind, um tatsächlich alle Operationen mit dem Objekt unmöglich zu mappen.
Weil JavaScript halt eben nicht wasserdicht ist. Da haben wir den Salat. Ich denke, da hilft nur eins, ganz schnell klicken und zur nächsten Property retten. Ja, aber ich meine nur, ich habe sehr lange gebraucht, um irgendwie diese 100-Zeilen-JavaScript-Library zu bauen. Also sehr, sehr lange. Welche Library ist das? Extrem unproduktiv.
Bitte was? Welche Library ist das? Die heißt No Use After Free. NPM, Etzer, Paper, No Use After Free. Also ich will nur sagen, ich habe halt sehr viel Zeit damit verschwendet, das manuell zu schreiben. Aber was ich da alles gelernt habe, Gott bewahre. Wäre wirklich schlimm, wenn man das händisch gemacht hätte, statt sich das irgendwie einfach vom Automaten ausspucken zu lassen. Du kommst ja nie auf einen grünen Zweig.
Diese Revision von Working Draft wird euch präsentiert von CodeTalks. Dass ich ein Developer-Konferenz-Feinschmecker bin, überrascht wahrscheinlich niemanden, der diesen Podcast abonniert hat. Aber es muss dann auch passen. Eine Mikrokonferenz, die sich anfühlt wie ein Firmenseminar, kann mir genauso gestohlen bleiben wie die XXLM-S mit Zehntausenden, wo dann die Hälfte der Talks eh nur Werbung ist.
Wie wäre es stattdessen mit einer inhaltlich wertvollen Konferenz im größtentechnischen Sweetspot? Ich würde euch hierfür gerne die CodeTalks in Hamburg ans Herz legen. 4. und 5. November. 3.500 echte Entwicklerinnen und Entwickler. Über 100 Talks auf 14 Tracks, aber auf der Bühne Inhalte statt Produktpitches.
Ihr pflanzt euch in Kinosessel, Popcorn Flatrate inklusive, zieht euch das Neueste von AI über Security bis Frontend rein und macht am Abend Party auf der Reparbahn. All das ist in eurem Konferenz-Ticket enthalten und an diesem Ticket könnt ihr jetzt sogar sparen, denn mit dem Code WORKINGDRAFT15 gibt es 15% Rabatt auf euer Ticket.
Dieses Ticket, die Agenda und alle übrigen Infos findet ihr auf Codetalks.com. Das war nochmal Codetalks.com und der Code WORKINGDRAFT15 für 15% auf euren Ticketpreis. All diese Infos findet ihr natürlich auch nochmal verlinkt in den Shownotes zu dieser Revision. Wir wünschen euch viel Spaß in Hamburg.
Willst du klicken, Peter? Eigentlich nicht. Ich könnte noch ewig weiterreden, aber ich glaube, wir lassen mich hier nicht. Also mache ich jetzt mal. Wer verlegt deine Library hier? No use after free. Ja, genau. Dann hast du die ganzen Support-Requests dann. Ja, ja. Kommt nicht bei Google raus, ne? Weil das so wahrscheinlich so special interest ist, dass selbst Google das einfach irgendwie schon aus seinem Index geworfen hat.
Warte mal, ich muss das einfach direkt bei NPM eingeben und weil ich ja hier in Chrome unterwegs bin, den ich ja sonst nie nutze. Also GitHub Sir Pepe, no use after free, nix. NPM? NPM? Ach, aber bei GitHub ist es doch auch wahrscheinlich, oder? Wahrscheinlich, aber ich weiß nicht, wie es da heißt. NPM, 1.1 hast du, ja. Genau, da ist das Ding.
Okay. Ich habe es bisher immer noch nicht gefunden bei Google. Ich habe es in den Chat geschmissen, damit wir das verlinken können, auch wenn man das echt nicht will. Das Haupt-Takeaway ist die Readme, wo drinsteht, warum unter bestimmten Umständen das nicht funktioniert. Das Learning ist das Wichtige, weil private Felder halt echt ein brillanter Hack sind, den man da in JavaScript eingebaut ist, aber es hätte halt keinen Mensch, der bei Verstand ist, so designt.
Holy moly. So, ich drücke mal auf den Zufallszahlen-Generator. Nicht Zahlen, sondern Zufalls-Spec-Generator. 3, 2, 1. Ich habe aktiviert. Das OL-Element... Ja. Das OL-Element. Ist das Startattribut eigentlich Standard oder nicht? Klar. Was ist denn das Startattribut? Fangen wir mal an. OL, Ordered List. Für Nummerierung und mit Start kann man angeben, wo man anfangen möchte, bei 0, bei 7, was auch immer.
Genau. Das hat auch noch ein paar mehr Attribute. Ich glaube, manche sind auch deprecated, weil durch CSS irgendwie ersetzt. Aber welche waren das nochmal? Ich gucke rein. Ich gehe rein. Also wir sehen die Klassiker Reverse Start Type. Stimmt, reversed. Und es gibt noch Kompakt. Das ist ja crazy. Was ist denn Kompakt?
Ist allerdings deprecated. Können wir wegkurieren. Genau, aber wahrscheinlich wird es ja von den Browsern immer noch implementiert. Ich wollte es gerade sagen. Äh... Ich wollte es gerade sagen, nur weil was deprecated ist. Ich meine, also ich weiß ja nicht, wie das euch geht, aber ich, war nicht besonders jung, als ich gelernt habe, dass nicht nur Marquis-Elemente funktionieren, Punkt 1, sondern dass die tatsächlich auch einen Hoch-Hunter-Modus haben, Punkt 2, und dass man sich verschachteln kann für halt so einen Boink-Boink-Boink-Modus über den Bildschirm.
Nur weil es uncool ist, heißt es nicht, dass es nicht funktioniert und dass man damit nicht Dinge anstellen kann. Was ist, kann man, beim Marquis kann man auch sagen, ob das von rechts nach links oder links nach rechts geht, oder? Ich meine. Was kann man so zwei ineinander verschachtelt, die so gegenläufig sind? Was passiert dann?
Bleiben die dann einfach stehen? Das ist wie wenn du das Butterbrot auf den Rücken einer Katze drauf schnallst. Dann hast du Antigravitation. Okay. Ich muss hier im CodePen testen, was mein Browser hier zu Compact sagt. Und ich gucke hier gerade in den Spezifikationen und ich finde von Compact hier nichts.
Also bisher hat er irgendwie nichts gemacht. Vielleicht war das wirklich nicht mehr implementiert. Also has obsolete members steht in der Interface-Deklaration. Da klicken wir doch direkt mal drauf. Wo ist denn das? OL. Ja, stimmt. Compact-Attribut. Ein Boolean-Attribut, das implementiert werden soll. Tja.
Aber dann ist das wahrscheinlich einfach nie von dem Browser implementiert worden. Ich gucke mal, bei Browser-Compatibility ... Es muss es ja drin sein. Es wird auch implementiert von allen Browsern. Aber optisch macht es irgendwie nichts. Ich versuche gerade... Ist nichts mehr in den User-Agent-Style-Shift?
Ich finde es da nicht drin. Es wird überall nur erwähnt, dass es existieren muss, aber ich sehe keinen Effekt, den es haben soll. Also hier steht drin, dass Compact, use CSS instead to give it a similar effect as a compact attribute. The CSS property line height can be used with a value of 80%. Okay. Und laut Spezifikation muss es nicht in irgendwelchen User-Agent-Style-Sheets sich widerspiegeln. Das gibt es auf OL, auf UL, auf DL und auf Menu-Elementen.
Okay. Also gibt's im Sinne von obsolet nicht benutzen, Black Keks hat keinen Effekt. Ja. Aber existiert und es wird halt zumindest dann ja mal da sein müssen und das kannst du ja mal in deinem CodePen ausprobieren, Shep, dass wenn du das in JavaScript hast und du machst halt irgendwie das Element .compact, müsste da tatsächlich ein Boolean rauskommen, weil es dann ja als DOM-Attribut implementiert ist.
Äh, jup. Äh. $1.compact oder? Nee, Null. Ich mache das einfach hier. Und dann Konsole. Hallo, Konsole Draw, wo bist du? Da. Und dann, $.compact Ja, kommt auch drauf aus. Also funktioniert es. Es macht halt optisch nichts, aber es ist definitiv da. Ja. Meine Herrschaften, Meinungen zum CodePen 2.0? Habe ich mir nicht angeguckt. Habe ich nur gehört von. Und nicht ausprobiert.
Muss man es nicht auch aktivieren? Also für mich sieht es immer noch wie das alte aus bei mir. Ich glaube, man muss es aktivieren, aber ich habe es wahrscheinlich aktiviert, indem ich irgendwann gesagt habe, was willst du mit deinen Pop-Ups? Ich muss was ausprobieren. Geh weg, geh weg. Und habe es dabei wahrscheinlich angemacht.
Okay, und deine Meinung ist wie? Das Ding ist, es ist immer noch, glaube ich, die einfachste Code-Sendbox, die man haben kann. Es ist eine, die eine Code-Sendbox ist und nicht irgendwie ein Prompt-Interface, was ich ganz gut finde. Die Out-of-the-Box-Konfiguration, wenn man da einfach drauf geht und sagt, New Pen ist ein bisschen viel mit einem Style-Sheet, mit einem Script, das ist da alles so fest eingebaut.
Aber es ist mit so wenig Aufwand wieder auf, ich brauche wirklich die Basics aller Runtime runter zu kochen, dass ich es ehrlich gesagt nicht hasse. Ich glaube, ich habe nur mitbekommen, dass die da ewig dann rumgewerkelt haben, weil der Chris Coyer in der Shop-Talkshow immer mal wieder davon erzählt hat und das schon seit Jahren.
Nö, aber es ist echt nicht verkehrt und ich meine CodePan vorher war ja schon auch ein bisschen, also versprühte schon etwas sehr viel Web 2.0 Energie, fand ich. Ja, Web 2.0 nicht, aber der Zahn der Zeit hat ein wenig dann genagt schon. Darum schließe ich mein CodePen jetzt auch. Nächste Runde? Ja, drücken.
Ich meine, haben wir abgegrast? Es gibt ja also noch das Type-Attribut mit A, I, Zahlen, falls man Sachen oder die Zähler halt beeinflussen möchte, aber da ist halt auch eher so eine CSS-Aufgabe. Aber Start kann man, glaube ich, nicht mit CSS setzen, oder? Das kommt drauf an, wie viel CSS du schreiben willst. Ich bin sicher, mit ausreichend Gewalt geht das.
Ja, du kannst wahrscheinlich mit Counter, den wir in so einen Counter direkt starten lassen. Genau, das geht wohl. Ach so. Aber dann würdest du, müsstest du, glaube ich, ein eigenes Pseudo-Element machen und hättest dann nicht die Listenmarker selbst mit der Nummer wahrscheinlich. Das merken wir nie.
Ich meine, wenn ich eh Pseudolemente verwende und keine Diffs, bin ich eh schon drei Levels über dem, was hier normal ist. Also, das geht schon klar. Ja. Also, eigentlich... Okay. Ja, leg los. Ja, go ahead. Wir haben Padding, Block, End in CSS. Yes. So, also für die Leute, die noch früher gemacht haben, wir haben ja Layouting mit Top, Left, Bottom, Write gemacht.
Das wurde ja irgendwann mit Inline und Blockachsen ersetzt. Nichts ist mehr wie früher. Es gibt nicht mehr links und rechts. Es gibt nicht mehr links und rechts. Diese Properties sollten sich auch verhalten, je nach Writing-Mode und Direction. Das ist ja so der Styling-Faktor, falls man mal in einer Sprache arbeiten muss, die rechts nach links oder oben unten läuft.
Und dementsprechend ist Padding, Blockend das alte Bottom, oder? Und das ist es, glaube ich, auch schon. Es ist halt tatsächlich Padding Bottom für alle, die ein bisschen cool sein wollen. Aber ist das nicht der Standard inzwischen? Also wenn ich dann die ganzen Blogposts immer lese, sind alle auf Inline und Blog die ganze Zeit. Ich persönlich finde es ja ein bisschen viel getippere.
Schauen wir mal. Und gibt es dann inzwischen eine Lösung, Padding selbst funktioniert, Also wenn man ja Shorthand benutzt, ist ja immer noch Top, Right, Bottom, Left. Gibt es da eine Möglichkeit, das auch auf Achsen zu haben in der Shorthand? Geht nicht. Gibt es keinen Padding Block, der es genauso funktioniert?
Von Padding Inline? Doch, aber da brauche ich ja trotzdem zwei. Dann brauche ich trotzdem Padding Inline und Padding Block. Da muss man halt immer zwei Zahlen schreiben. Ja. Ach so. Die Shorthand geht halt nicht mit Riding Mode. Ach so, jetzt verstehe ich. Ja, logisch, natürlich. Nicht die gleiche Art Shorthand. Klar, logisch, kann ja nicht, weil du ja Properties für die jeweiligen Achsen hast.
Man hätte ja vielleicht einen Buchstaben, weiß ich nicht, wie es parsertechnisch funktioniert, aber man hätte ja einen Buchstaben einführen können oder so. Keine Ahnung, aber geht so weit, ich weiß nicht. Oh ja, irgendwie so eine kryptische Syntax wie irgendwie so hier Span und Crumbs and Grid, das wäre es noch.
Zum Beispiel. Gibt's allerdings nicht. Nee. Und ja, ich glaube, es gibt ja auch ein paar Properties, die sind immer noch nicht auf Logical umgestellt. Und dann gibt's da welche, die sollen auch nicht auf Logical umgestellt werden. Ich wollte gerade sagen, das ist was mit Border und ähnlichem Kram. Also soll Border jetzt ausgenommen werden von der Aufhebung des Konzeptes, der oben und links rechts... Border ist auch...
Borderblatt gibt's ja mal. Aber es ist eher sowas wie, glaube ich, Overflow X und Overflow Y, weil dein Monitor ja immer noch der ist, der er ist. Und darum, also es gibt halt bestimmte Dinge, da macht es Sinn, bei X und Y zu bleiben, egal wie da rumgeritten wird, in welche Richtung. Naja, ich meine, am Ende ist ja, ja.
Ja, ist das so? Wenn du jetzt wirklich komplett achsenagnostischen Code hast, würdest du ja vielleicht mit dem Wechsel der irgendwie Blockachse eventuell ja auch einhergehend haben wollen, dass das Overflow-Verhalten ist, weil ja nicht nur die Schriftrichtung sich vielleicht ändert, sondern dein ganzes Layout darauf aufgebaut ist.
Jetzt frage mich nicht, damit ein Beispiel um die Ecke zu kommen. Ja, aber dann, sagen wir mal, du hättest so einen komischen Writing-Mode, wo du nicht vertikal scrollst beim Seite-Lesen, sondern horizontal. Das wäre dann die Konsequenz. Exakt. Das ganze Bedienkonzept von deinem Browser kann das ja gar nicht.
Oder du kannst es schon, aber du musst dann quasi eine Modifikator-Taste drücken, während du das Mausrad drehst, um dann quasi horizontal dich dadurch zu bewegen. Und der ganze Rest deines Computers ... Das ist im Moment sicherlich so. Aber wenn man jetzt mit einem entsprechenden Device um die Ecke kommt, dass so ein revolutionäres Bedienkonzept tatsächlich einführt, dann würde man das da wahrscheinlich irgendwie mit einpreisen, dass man nicht halt irgendwelche Tasten grob drücken muss.
Ich meine, irgendwann kam der heilige Steve mit seinem iPhone um die Ecke und plötzlich war irgendwie alles Touchscreen, das vorher auch nicht da war. Und entsprechend waren dann die Bedienkonzepte plötzlich ganz neu. Ja, aber ich würde halt auch auf so Apps wie Word schauen. Also wie arbeiten die denn auch in solchen Sprachen?
Also fangen die auf einmal an, horizontal zu scrollen? Ich glaube, ich kann mir vorstellen, dass sie das eben weiterhin nicht tun. Und darum, also Monitor sind halt, wie sie sind, Mäuse sind, wie sie sind. Betriebssysteme können auch nicht sich komplett auf den Kopf stellen. Also darum, glaube ich, bleibt man eben bei solchen Dingen dann bei X und Y.
Ja, ich gehe ja auch nicht davon aus, dass das ein ernsthaftes Problem ist, weil ich meine, wenn man das wirklich brauchen würde, dieses bizarre Konzept, was ich jetzt gerade zusammenfantasiert habe, dann schreibt man halt irgendwie zwei Zeilen Code statt einer, wow, dann geht das und gut ist. Ich weiß. Aber benutzt ihr blau und innen lang? Nee.
Also ich benutze es eigentlich nicht in den Projekten, wo ich drin bin, weil da eh klar ist, das wird nie ausgeliefert an Märkte oder an Lokalisierung, wo das nötig ist. Aktuell bin ich wirklich an so einem Designsystem rum, das später mal quasi, Open Source sein soll und da machen wir das natürlich dann schon. Genau.
Ja, aber gerade für halt vertikales Padding oder so, da nutze ich halt schon manchmal Block, weil es halt einfach eine schöne Shorthand, aber sonst bin ich halt auch meistens noch auf Top, Left, Bottom, Right. Ja, genau. Manchmal ist es wirklich echt eine gute Shorthand. Ja, stimmt. Da hast du recht. Kann man denn irgendwie, also ich meine, man kann ja mit irgendwie dir, der Pseudo-Klasse, glaube ich, in CSS rausfinden, ob Left-to-Right oder Right-to-Left, meine ich, ne?
Oder gibt's es nicht? Also so wie es Slang gibt, gibt's doch auch die Dear Pseudoklasse in CSS. Ja. Aber man kann nicht... Genau, man kann nicht Top to Bottom, Bottom to Top, solche Sachen gehen da ja glaube ich dann wiederum nicht, ne? Also... Halt bei Bier, lesen wir doch mal in Selectors Level 4. Ja, also man kann dann nämlich eben nicht sagen, was du vorgeschlagen hast, ich koppel oder ich switche dann, ob X und Y overflown, also wie die overflown, abhängig von dem Writing-Mode.
Ja, tatsächlich ist es ja so, dir ist technisch gesehen eine der linguistischen Pseudoklassen, also in einem Bett zusammenliegend mit Lang. Und die Blockrichtung wäre ja irgendwas anderes, weil die Anzahl der Schriften, die jetzt tatsächlich von unten nach oben geschrieben werden, auf diesem Planeten ist meines...
Aber es gibt ja Schriften, die von oben nach unten geschrieben werden. Ja, ja, klar. Und so, glaube ich. Ja. Und da hättest du ja schon dein, also da hättest ja schon vielleicht Bedarf, deine Overflow-Achsen irgendwie zu ändern, möglicherweise. Ja. Also wenn du zum Beispiel sowas machst, wie dass du die Höhe begrenzt und dann, bricht das eben so in Columns immer weiter um, jetzt so in die Horizontale.
Genau. Aber geht glaube ich nicht. Ich finde zumindest in Level 4 hier nichts, was da offensichtlich für gedacht ist, tatsächlich. Ja. Ich meine, im Summe ist es ja relativ neu, dass so das Nudging begonnen hat, von wegen links, rechts, kommt weg und Inline und Block übernehmen jetzt. Es ist ja nicht notwendigerweise schlimm, dass das fehlt. Vielleicht ist das auch wirklich so ein, lass mal erstmal gucken, ob man da jetzt Adoptionen aktivieren kann in der Entwicklerschaft und dann kann man das vielleicht mal nachreichen.
Ja. Ist das eigentlich dann auch mittlerweile Vogue, wenn man sowas benutzt? Und dann wollen Leute das nicht benutzen, weil es Vogue ist? Da muss man halt echt fragen, was irgendwie Grog sagt, wenn man sagt, generieren wir mal ein bisschen CSS und wenn das da rauskommt, dann ist es nicht Vogue. Rock auch. Was? Ja. Was?
Die KI deines Vertrauens. Rock. Es ist wirklich sehr bemerkenswert, also wir sind jetzt hier alle am Kichern, weil sicherlich, natürlich, offensichtlich, klar warum. Aber anderswo ist das halt irgendwie so, ey, das ist ja einfach das andere KI-Modell, das irgendwie von den anderen gebaut wird, lass mal ausprobieren.
Und das wird halt ernst genommen, als wäre das ein ganz normales Ja. Also der Golf der Haltungen ist sehr, sehr, sehr, sehr weit. Ja. Faszinierend. Ich frage halt auch manchmal, wenn ich irgendwie so einen Artikel revieue, ist mein Kommentar auch, Grog, is this true? Und manchmal wird es halt nicht verstanden.
Ist echt wild. Komm, lass zurück in unseren Safe Space gehen. Wer ist dran mit drücken? Der Stefan. Du bist dran. Du hast dran, oder? Wir sind ja beim vierten Thema. Ach ja, doch, du hast schon. Ich bin ja doof. Okay, alles klar. Ich habe nur unten auf die Liste geguckt. Ich honke. Dann drück drauf, dann bist du nicht mehr doof. Ah, guck, da haben wir doch schon die Antwort.
Ui, ui, ui. Wir haben eben noch gefragt, wie das bei Border ist. Ob es da auch Logical-Varianten von gibt. Und hier haben wir jetzt Border Start Start Radius. Brillant. Ja. Sieht aus wie ein Tippfehler. Ja, ist übel. Genau, ja, Border Start Start Start vom Block und Start von Inline, also oben links.
Also in unserer Welt oben links. Also wenn ich mir das jetzt anschaue und ich muss halt in Betracht ziehen, das in meinen Code einzubauen, ich glaube, ich bleibe bei Top und Left und Konsol. Ich glaube, das kann ich nicht verantworten. Oder einfach einheitlich. Border-Radius, bist du fein raus. Das ginge natürlich auch.
Ja. Borders.start habe ich tatsächlich noch nie gesehen. Ich falle hier gerade vom Stuhl. Das ist aber echt weird. Also mega. Crazy. Ja. Das erinnert mich an dieses, war das nicht ein Quiz irgendwie letzten Adventskalender oder irgendwie sowas, wo man raten musste, ob diese CSS-Property existiert oder nicht?
Ging da nicht was über Social Media? Also der Kevin Powell macht auf YouTube macht ja immer solche CSS-Quizze, haut heraus. Ne, ne, irgendwer hat eine Web-App gebaut, wo man irgendwie auch so sagen konnte, Schwierigkeitsgrad dieser jener Seuche, wie viele Punkte kriege ich? Ja, stimmt. Das hat dieser Keith, hast du nicht gesehen, glaube ich, der Web-Components-Mensch, hat er das gebaut. Ja, der Firefox-Keith. Ich glaube, Firefox ist er.
Auf jeden Fall habe ich gedacht, hold my beer. Ich kann nichts anderes als irgendwie Web-Standards und dann habe ich irgendwie so vier von 10 Punkten bekommen und dann habe ich mich in die Ecke gesetzt und nichts getan. Wenn man sich allerdings die Demo anschaut auf MDN, sieht es natürlich so aus, als wenn Direction und Riding Mode tatsächlich bei Border Start Start Radius, mit berücksichtigt wird. Sag nochmal, was wird da berücksichtigt?
Der Riding Mode. Ob Top Left oder Hoch oder Links. Man muss ja, ne? Ja. Weil das bestimmt ja was Inline-Achsen sind. Ich habe das auch rausgefunden. Das war in der Tat hier der Key Circle und es war CSS or Bullshit. Ja, genau. Werde ich auf jeden Fall mal hier auch an die Show notes packen. Und bei Border Start Subradius kann man dann ganz einfach klar sagen, why not both? Why not both? Ja.
Also ich war bei dem Quiz echt nicht besonders gut. Nee, ich hatte, ich sehe ja auch noch das Ergebnis, was ich hatte, glaube ich. Also 16 von 20, richtig. Also gut. ist schon okay. Das ist nicht schlecht. Das ist richtig gut. Ja. Genau, aber eben jetzt auch nicht 18 und auch nicht 19 und schon mal gar nicht 20.
Also wenn ich mich richtig erinnere, war ich sehr weit von irgendwie 16 entfernt. Meine Güte. Also ich habe es nur aufgerufen und habe direkt quasi das wieder, hat er mir angezeigt. Also weiß nicht, ob das bei dir auch so ist. Ich kann mich nicht daran erinnern. Falscher Browser, falscher Computer. Ja. Aber das ist auf jeden Fall sehr gut. Also wenn ihr glaubt, oder noch besser, wenn ihr jemanden kennt, der sagt, ich bin hier, ich kann CSS, dann gebt ihr das eben dieser Person mal, um die mal wieder so ein bisschen zurechtzustutzen.
Ja. Bei mir hat's funktioniert. Schickt mir mal die Score, oder schickt uns die Score so. Und dann bist du dann, Peter, oder? Ja, dann drücke ich mal Zufallsgenerator. aktivieren. CSS ist die Stroke Property. Jawohl, ja. Da habe ich was Gutes auch, was ich erzählen kann dazu gleich. Okay, obwohl das SVG ist? Nee.
Das ist nicht nur SVG. Aber es ist primär SVG, oder? Ich habe es jedenfalls nie für was anderes als SVG verwendet. Nee, also das kannst du auch in HTML cool benutzen. Und zwar, also es gibt ja so verschiedene Arten und Weisen, wie du um Text eine Outline machen kannst. Der ganz alte Klassiker ist ja so Text-Shadow und da dann irgendwie vier Stück in alle vier oder Himmelsrichtungen, damit es irgendwie in alle Richtungen einmal so drumrum geht.
Dann die coolere Variante ist Webkit-Text-Outline, glaube ich, oder so, das gibt's. Ich weiß noch nicht, ob das in allen Browsers unterstützt ist und was man auch machen kann, was glaube ich ein bisschen mehr unterstützt wird, ist, dass du mit, also du kannst auch in HTML kannst du Stroke drauflegen auf Dinge und kannst dann mit Paint Order, sagen, also weil deine Buchstaben sind ja standmäßig, die haben immer ein Fill, deswegen sind die ja sichtbar, und wenn du einen Stroke machst, hast du halt ein bisschen das Problem, dass der immer mittig auf der Außenkante liegt und dadurch sieht der Buchstabe irgendwie, komisch aus. Weil er von außen aufgefressen wird gleichsam.
Ja, genau. Und dann kannst du eben mit Paint Order sagen, zuerst soll der Stroke gezeichnet werden, und dann der Fill und dann schneidet der Fill oder dann liegt der eben über einen Teil des Strokes und dann sieht das wieder cool aus. so. Ja. Auch da hätte ich jetzt irgendwie gesagt, Paintorder kenne ich, ja, weiß ich, das ist doch so ein SVG-Ding, aber ist es gar nicht. Genau, nicht mehr.
Das ist halt eben dann irgendwann alles in HTML auch reingewandert, weil kann man da auch gebrauchen. Aber das Problem ist, und das habe ich letztens gemerkt, dass wenn du Feature testest auf Paint Order und sagst, also so habe ich es gemacht, dass ich quasi einen Ad-Supports mache und dann mache ich Paint Order Stroke Fill, und nur dann mache ich das.
Weil wenn der Browser diese Paint Order nicht unterstützt, dann sieht es ja kacke aus, wie wir gerade gesagt haben. Ja. Stellst dir aber raus, dass in Chrome der immer sagt, er kann das. Also, weil er Hand Order kann, aber eben in SVG und der sagt immer, er kann das und dementsprechend sieht es halt kacke aus in älteren Chromes, wo du diese Technik benutzt.
Genau. Verdammts. Ich meine, es ist ja nicht falsch. Wie meinst du das? Es ist nicht falsch. Also er unterstützt eben nicht diese Value. Er unterstützt halt also ich habe ja nicht nur nach Paint Order gefragt, nach Paint Order Support. Sondern ich habe auch konkret eben Stroke Fill abgefragt als Wert.
Und da sagt er eben leider trotzdem Jo, kann ich alles. Okay. Ja. Wahrscheinlich, weil das in SVG kann. Ja, denke ich auch. Gut, weil sonst wäre nämlich meine nächste Idee, um das rauszufinden, also die wäre halt JavaScript-desk, aber das wäre ja eventuell für so ein Feature-Test-Fleck. Ich setze eine CSS-Variable, wenn es geht.
Ist ja immer, wenn ich so erwarten würde, diese Kombination aus Property müsste von Add-Support so und so interpretiert werden. Aber etwas supporten, wie wir jetzt ja als Beispiel haben, ist ja nicht immer so eindeutig. Da tendiere ich ja dann auch immer so zu, als sozusagen Fallback-Alternative zu untersuchen, wenn ich dem Browser das so als CSS-String gebe, unter gegebenen Umständen, taucht das dann so auf?
Und was ich halt jetzt so fragen würde, ist, was sagt denn die Style-Property von einem Diff, wenn du ihm Paint Order Stroke Fill gibst? Weil dann bist du ja, hast du eine CSS außerhalb von SVG definitiv. Weil bei so einem Style-Sheet weißt du ja nicht, auf was der es gilt, aber wenn du es auf einen Diff setzt, kann es ja nur da drin existieren.
Also ich kann es dir jetzt nicht, ich kann es jetzt gerade nicht sagen, ich müsste das ja wenn dann auch in so einem alten Chrome quasi testen, in BrowserStack und da dann schauen. Ich habe aber mir ein Proxy, eine Proxy-Property gesucht, also weil PaintOrder, mit zwei Properties unterstützt der ab Version 123 und dann habe ich mir eben ein anderes Feature gesucht, was auch erst ab 123 supported wird und habe meine Supports-Query dann darauf eben gelegt.
Proxy-Property, also zu meiner Zeit haben wir das früher so Browser-Test genannt, weil wir ja nicht einen Feature-Test machen, wie zivilisierte Menschen, die zu aufrecht im Gang in der Lage sind, sondern weil wir stumpf fragen, bist du IE6? Das ist ja eigentlich, was du tust. Ja, ja, genau. Ich schließe nur gegebenenfalls auch andere Browser erstmal aus in meiner Übervorsichtigkeit, die das können, weil auch die müssen dann natürlich, also in dem Fall ist es Light Dark, die Funktion, die wird auch ab Chrome 123 supported.
Die müssen das dann eben auch können. so. Ja. Ja. Also ich habe einen Feature-Test drin tatsächlich, der in JavaScript läuft für den Support von FlexGap. Das ist ja auch so ein Ding, das kannst du in CSS nicht testen. Genau. Aber da wollte ich jetzt nicht auch wieder JavaScript für anwerfen. Warte, warte. Was heißt, kannst du nicht testen?
Weil das wäre ja auch ein Support-Query. Über Ad-Supports kannst du es nicht irgendwie querieren. Warum nicht? Weil es gab nie ein Flex-Gap. Ach so. Die ist ja als Grid-Gap geboren. Und dann haben die irgendwann gesagt, wäre eigentlich ganz geil, wenn es das auch für Flex gäbe und wenn es das auch für Columns gäbe, Multicolum.
Lassen wir uns das einfach irgendwie Gap nennen. Also Grid-Gap gibt es, glaube ich, immer noch aus historischen Gründen. Aber lassen wir uns das einfach Gap nennen. Und weil das auf Grid Gap gealiast wird, gibt es halt Browser, die sagen, eben, ich kann Gap, aber eben nur für Grid und nicht für Flex. Ja.
Hm. Also du meinst Gap in Flex-Layouts und mich Flex-Gap oder so? Genau, weil das gibt es nicht. Also sonst könnte man spezifisch nur für Flex fragen, so wie man spezifisch Grid-Gap fragen kann. Aber genau, aber das Coole ist, dass der Bramus letztens was geschrieben hatte, das muss ich aber mal in seinem Blog gucken.
Es gibt nämlich jetzt so eine ultra krasse Supports Query für genau solche Fälle und da ist quasi das, die CSS Working Group hat da irgendwie eine Gruppe so von fünf oder sechs Sachen, die man, wo es so eine Spezialabfrage dafür gibt, ob der Browser das kann und ich muss mal gucken, ob ich das finde, das ist nämlich echt Ich konnte nämlich jetzt noch gerade dieser Erklärung Spezialabfrage, die rausfällt, ob der Browser das kann, konnte ich jetzt von meinem geistigen Auge nicht direkt ein Bild erzeugen, muss ich gestehen.
Also wovon kannst du kein Bild erzeugen? Was dieses, dieser neue Art von Support-Query jetzt anders ist. Macht, kann. Genau, ich schmeiß mal den Link hier rein, ich hab's gerade gefunden. Also da geht's wirklich um diese undetectable Dinge. Genau. Named Feature. Genau, und da ist halt quasi auch der Patient Null ist eben diese Flexbox Gap Problematik, aber da ist natürlich der Zug abgefahren, da bringt uns das ja nichts, dass wir dieses Feature jetzt haben, aber jetzt gucke ich gerade die Liste durch.
Aber das funktioniert denn so, dass der Browser eine interne Liste mit True und False hält? Ja, muss ja. Funky. Genau, also Anchor Positioning, das auch berücksichtigt, Transforms ist dabei. Also weil das kannst du einfach auch nicht anders rausfinden. Also zumindest nicht mit CSS alleine. Ach, jetzt verstehe ich das. Es geht um spezifische Wechselwirkungen, bestimmte Kombinationen aus Properties oder wie?
Oder geht es um eine Property namens Anchor Positioning? Also Anchor Positioning konnte in seiner ersten Implementierungsart und Weise konnte es eben nicht andocken an Elemente, die per Transform verschoben waren. Also er ist immer angedockt an die ursprüngliche Position, wo das Element war, bevor es dann wegtransformed wurde.
Und du kannst eben gar nicht über Ad Supports rausfinden, was unterstützt also was implementiert der Browser jetzt gerade implementiert der Anchor Positioning in der alten Version, die keine Transforms kann, oder in der neuen Version die Transforms kann, Ja, also mit Feature ist hier spezifisch gemeint, ein Effekt, der sich durch.
Der sich erzeugen lässt und nicht irgendwie eine Property oder eine Kombination aus Property und Value, sondern ein Verhalten wird gleichsam beschrieben. Also es gibt, man kann sagen named feature anchor position follows transforms. Das bedeutet aber nicht, dass es jemals eine Property gab namens anchor position follows transforms.
Das ist der Punkt. Okay, jetzt habe ich es auch verstanden. Lang hat es gedauert. Genau, oder eben dann das nächste Single-Axis-Scroll-Container, also dass man eben mittlerweile auch die andere Achse nicht, also die wird ja sonst immer zwangsungewandelt auch in einen Scroll-Container, wenn die eine Achse das dementsprechend Scroll-Container wird also die andere muss dann immer mitziehen das geht neuerdings eben auch anders aber wissen tut man das eben nicht.
Ja, und wenn ich jetzt hier gerade richtig sehe, dann hilft dir das bei deinem Flex-Problem nicht? Nee, weil das müsste, also dieses Named-Feature hätten dann die alten Browser implementieren müssen, respektive diejenigen, die dann Flex-Gap auch unterstützt haben. Ja, und das kommt aber jetzt. Die hätten wissen müssen, dass man in Zukunft wird wissen wollen, was sie nicht können.
Ja, genau. 5, 6 Jahre, nee, wie viele Jahre, wie lange gibt es das schon? Also Grid ist 2017 gekommen. Also wahrscheinlich, also seit 9 Jahren ist dieses Feature überfällig sozusagen. Kommt aber in Firefox 156 und ist in Safari Tech Preview. Zumindest Named Feature. Ah ja, dann haben das bei MDN, gibt es das dann auch irgendwie gelistet schon.
Oder wo? Ne, steht in Bramers Post. Das hatte ich nicht gesehen. Müssen sich die Kollegen dann alle nur noch so ein bisschen alignen, weil sie dann hier ein neues Boolean dazu führen, ne? Genau. Kann ich irgendwie detektieren, ob ein Browser Named Feature nutzen kann, um Dinge zu detektieren? Gute Frage. Weil es ist ja so ein Media Query Bestandteil und so ein normaler Support Query macht das ja eher nicht.
Es ist ein Media Query Bestandteil, was meinst du damit? Also Named Feature, also nicht Media Query, sondern ein Ad-Rule-Bestandteil. Also die Frage ist, kann ich mit einem Ad-Supports Ausdruck gucken, ob eine bestimmte Ad-Supports-Syntax unterstützt wird? Naja, du könntest eine Property, eine Custom-Property setzen und dann könntest du in diesem, Ad-Supports Name-Feature-Block diese Property auf einen anderen Wert setzen und dann könntest du danach in der Style-Query irgendwie gucken, was du jetzt für einen Wert hast. Ja, okay, das klingt gut.
Ich frage nur, weil ich sammle gerade einen bunten Strauß an Bug-Reports für meinen liebsten CSS-Parser. Ich wollte das die Tage dann mal submitten und dachte mal, vielleicht kann man da noch ein bisschen was finden. Beziehungsweise du kannst auch wahrscheinlich, also Container-Style-Queries sind, damit geht das, das können ja auch alle Browser mittlerweile.
Blöd ist da nur, dass du ja immer nur von einem Kind-Element so eine Abfrage machen kannst. Also nie. Und dann gibt es ja noch if, die if-Funktion, wo du auch Styles querien kannst. Da geht das sogar auf dem Element selbst. Das unterstützt aber, glaube ich, nur der Chrome bisher und die anderen Browser nicht.
Also if mit Style. Also if, glaube ich, unterstützt der Safari auch mittlerweile, oder eine Tag-Preview, aber eben noch nicht die Variante, wo man auf einen Style abfragt. Nur noch eine Frage der Zeit. Bewegen sich ja gerade relativ schnell die Browser, oder ist das nur mein Empfinden? Also gerade im CSS-Bereich passiert da schon viel für mich. Absolut.
Das ist schon gut. Und auch so die richtige Kloppe eigentlich, die jetzt umgesetzt werden. Also ich finde gerade im Scroll-Bereich ja total viel Cooles. Also in meiner Realität ist ja der ganze Farbkram erst vor einiger Zeit so richtig angeflutet. Ich glaube beim letzten Luxwhatschapp hatten wir ja auch über irgendwie so Contrast, Color und so geredet.
Und das ist ja dann schon, wo wir ja irgendwie so ein bisschen so mittelbegeistert davon waren, dass der ja nur schwarz oder weiß rauskommt. Aber wenn man dann tatsächlich so Komponentenzerlegung macht und dann darauf Basis irgendwelche Logik da aufsetzt, kommt man damit ja schon sehr weit. Ja. Nee, da ist noch passiert viel. Kommen auch noch zahlreiche neue Funktionen.
Genau, und dann kommt ja theoretisch irgendwann, also was wir bis jetzt ja nur haben, ist Wide Gamut, also quasi großer Farbraum, was dann oft unter HDR läuft. Aber es ist ja kein HDR, es ist nur Wide Gamut. Also wir haben nicht mehr Range zwischen schwarz oder dunkel und hell. Aber HDR kommt ja auch noch also dann können wir unseren Besuchern die Augen wegfrittieren, mit sehr hellen Weißtönen Gott sei Dank ich wollte gerade sagen, dann sieht alles so aus wie diese Fotos die mal eine Zeit lang extrem trendy waren Aha, welche waren das?
Wenn du HDR Fotos machst und halt so auf maximal aufdrehst, damit es halt so aussieht als wäre es eins? Das siehst du aber nur wenn du Chromium benutzt Also ich sehe das in Electron-Apps. Und das muss gar nicht mal aufgedreht sein, sondern bestimmte Fotos, die dunkeln tatsächlich alles ab. Und ich bin ja normaler Firefox-User, dann siehst du das immer nicht.
Aber dann habe ich halt das Signal-Electron-App und dann falle ich halt auch immer vom Stuhl. Genau was du beschreibst, dann ist der Himmel halt, rülpt mich so an und alles andere direkt. Ja. Da hatte ich auch eine geile Seite. Ich weiß nicht, ob ich die noch finde, in meiner Bookmarks-Sammlung. Ich gucke mal, die hat richtig geile HDR-Bilder.
So HDR-Beispiele so. Ah ja, hier. Aber ich sehe gerade bei Pramos auf dem Blog, Entschuldigung, es gibt doch Supports at Dash Rule. Könnte man damit nicht Feature Detection machen? Für den Fall von den Named Feature. War das nicht meine beknöckte Idee? Supports? Ja. Add minus Rule. Warte mal, ich teste mal.
Hier? Ja. Lass mal gucken. Supports Add Rule. Ah ja, guck. Ah ja, wunderbar. Ach ja, schön. Ja. Starting-Style, Counter-Style, Container. Das sieht schon gut aus und das ist sicherlich wieder ein wunderbarer Bug-Report für meinen Freund von CSS-Parser. Ich meine, was halt bei so Sachen irgendwann spannend wird, ist, das geht so ein bisschen in das rein, was ja Shep auch hat.
Ich glaube, mit der Komplexität von CSS wird irgendwann ja die Frage spannender nicht, kann der Browser dieses eine Feature, sondern kann er umgehen mit einer bestimmten Kombination aus Features oder Feature unter Umständen. Genauso was wie halt eben Anker Positioning an transformierten Elementen. Und ich glaube, also keine Ahnung, ob das jetzt irgendwie eine besonders, gute Idee ist mit diesen Named Features, weil man ja tatsächlich sich ausmalen kann, dass ja die potenzielle Liste von diesen Fragen sehr groß werden kann.
Ich denke halt so Sachen, mein Pet-Pief ist ja Interpolation von CSS-Variablen in der CSS-Animation. So. Geht das? Und die Antwort ist halt, ja, nee, halt, er kommt halt auf den Browser an. Und das ist halt eine spannende Frage. Ich kann halt den Browser fragen, kannst du CSS-Animation? Der wird mir sagen, jo, kannst du irgendwie Custom-Properties? Sagt er auch, jo.
Kann ich da auch bei der Property-Deklaration mit Add-Property angeben, dass es einen Type hat, damit halt Interpolation technisch gesehen möglich wird? Kann er auch sagen, das geht, aber halt eben die CSS-Variablen anregieren kann er dann halt nicht. Ja, aber ich glaube, das ist ja dann, also die Working Group kann ja nur Dinge definieren, auf die sie dann auch erst später gekommen ist. Also die hat eine Spec released und hat die dann nochmal upgradet irgendwann.
Und es ist undetectable, aber in dem Fall ist das ja dann der Browser selber, der einfach das nicht implementiert hat und irgendwann vielleicht das dann implementiert, korrekt. Also abgesehen von der Position auf dem Zeitstrahl sehe ich jetzt da keinen großen Unterschied zwischen den Dingern und halt, okay, die Spezifikateure haben hinterher was umgeschrieben oder so, aber doch aus meiner Perspektive, als jetzt der Mann von der Straße, der damit arbeitet, ist es doch am Ende so, ich will ja diese beiden Dinger zusammenmanschen, die eigentlich gehen müssten und das geht nicht.
Und mir ist keine Möglichkeit gegeben, festzustellen, dass es nicht geht. Was soll das denn? Also du hast recht mit dem, was du sagst, aber so als Product Owner ist die Developer Experience halt so mittel, ne? Weil ich halt, mir kannst halt im Prinzip sagen, ja, du wohnst halt hier gerade in der falschen Dekade, hast halt Pech gehabt, warte halt noch ein bisschen.
Ja. Ist halt doof. Ja, da kannst du dann, glaube ich, wirklich nur so ein Feature-Test in JavaScript bauen, oder? Ja, glaube ich. Kann ich das? Theoretisch. Genau, du animierst irgendwie eine Custom Property und die wird gemappt auf die Breite von dem Element und wenn die Animation quasi auf, also, und dann misst du das Element eben aus.
Ja, genau, ich müsste halt im Prinzip dieses Ding machen, wo mit negativer Animation Duration ist das, glaube ich, man ja im Prinzip dann an einen Punkt springen kann. Dass du direkt am Ende bist quasi. Genau, weil, ja, am Ende, beziehungsweise, nee, Ende hilft mir ja nicht, weil, was ja funktioniert, ist, dass das Ding dann ein, hier, es macht halt keine smoothen Transition, aber es wechselt halt am Ende schon, als wäre es halt irgendwie so eine von diesen Properties von Family und Konsorten, die halt, mir fehlen gerade die Worte, ne, die halt können, wie man discreet, discreet, genau, danke, das war's.
Genau, wo man halt diskrete Schritte haben kann. Also, was man wirklich machen müsste, wäre, irgendwie so in 20% der Animation springen, was ja mit negativer, Animation Duration oder ähnlichen Kram ging ja, glaube ich, wenn ich mich recht erinnere. Und dann halt eben gucken, was dann da der Style ist.
Das ginge in einem Use Case, wo man JavaScript hat und den habe ich nicht. Irgendwas ist immer. Ja, es wäre so wirklich so viel leichter, wenn man dieses ganze CSS-Krempel in die Tonne treten würde und alles mit JavaScript machen würde. Das wäre nicht besser, aber es wäre einfacher. Ja, oder mit HTML-Gestaltungssprache. Ich glaube, da sollten wir eigentlich wieder hingehen.
Center-Tag und so, ne? Ja, genau. Wie gesagt, Marquis-Element ist noch da, funktioniert. Sieht gut aus, brennt gut, ist unterstützt. Ja, ich denke, ich denke, da wird es so eine Rückwärtsbewegung geben irgendwann. Return. Treadcoder. Ja, genau. Wo man dann noch die HTML-Tags so alle Uppercase schreibt, ne? Center!
Ja, genau. Ja, cool. Ich weiß nicht. Also ich glaube, Stefan kann noch mal, oder? So als Gast. Ja, komm. Nein! Wir haben Accessibility Area Meter Roll. Ja, ich bin auch ein laufender Mieter. Zählt das was? Dann kriegst du so ein T-Shirt. Wir müssen dir ein T-Shirt machen. Wieder ein Zitat für dich. Und nein.
Ich sollte meine Klappe halten. Meter Roll. Ich habe noch nicht drauf gedrückt. Vielleicht das, Progress. auf jeden Fall supported. So, ich drück mal. Es gibt ja das HTML-Element, das HTML5-Element, das am wenigsten benutzt wird auf diesem Planeten. Ich würde hier drauf wetten, dass es das Meta-Element ist. Ja.
Es gibt wirklich das Meta-Element. Ja, ich glaube, ich habe das auch wirklich noch nie benutzt. Aber das, was die hier sagen, das macht auch Sinn. Zum Beispiel, wenn man Batteriefüllstand darstellen möchte, da würde ein Nita-Element Sinn machen, ja. Wie voll ist deine Festplatte? Wirklich so eine Bestandsaufnahme, nicht ein Fortschritt, weil wir wollen ja nicht, dass die Festplatte noch voller wird, sondern so Bestand, ja, eine Momentaufnahme.
Und ja, weil das Nita-Element halt aussieht wie schon mal gegessen, verwendet das keiner. Alle bauen das mit Diffs nach. Die wenigsten setzen halt Royal Meter drauf, aber sie sollten es natürlich tun. Ja, wobei ich habe Progress und Meter, glaube ich, auch mal genommen und umgestylt. Also es ist nicht so, dass es nicht gehen würde. Es ist halt nur ein bisschen anstrengend. Ich wollte es gerade sagen, jemand deines Kalibers kann das vielleicht, aber Otto Normalverbraucher doch nicht.
Ja, möchte das nicht. Kann das schon. Das kann man ja alles zusammengoogeln. Aber jeder, dadurch, dass das eben leider nicht irgendwie von allen Vendoren standardisiert ist, ist vielleicht irgendwas, was Open UI irgendwann macht, musst du natürlich hingehen und, alle Pseudo-Elemente der verschiedenen Browser eben dir nehmen und umstylen.
Okay, Hot Take meinerseits, ich glaube, das kann man sich sparen. Ich glaube, Mieter und Progress in HTML als Elemente nativ einzubauen, hat sich, glaube ich, erwiesen als Fehler. Weil man könnte natürlich jetzt gewaltigen Aufwand betreiben, um den Leuten alle ihre Pseudo-Elemente zu geben und alle Implementoren und dafür zu sorgen, dass der Safari genauso die gleichen Styling- Mechanismen bietet wie der Firefox.
Es ist halt echt viel praktikabler, den Leuten zu sagen, nimm Diffs und hier hast du diese Handvoll ARIA-Attribute, weil die Mechanik ja am Ende genau die gleiche ist. Du baust halt ein HTML-Tag und dann setzt du halt Dinge, die halt so Namen haben wie ValueNow oder Min und Max und Konsorten und jetzt schreibst du halt eben ARIA-Dash davor.
Und du kriegst komplette Gestaltungsfreiheit, null extra Implementierungsaufwand für die Vendors, weil das ist halt im Browser so schon drin. Das kannst du machen, das musst du eh haben. Und Progress und Meter weg, weg. Das ist weniger nützlich als Blink. Ja, das ist dann vielleicht wirklich einer dieser Fälle, wo das native HTML-Element, weniger Sinn macht, als einfach in die ARIA-Kiste zu greifen.
Zumal man ja wirklich nicht irgendwelche Interaktionspattern noch implementieren muss. Das ist ja oft der Grund, warum man dann lieber HTML-Elemente nehmen sollte, ne? Also, dass man Buttons mit der Space-Taste feuern kann und so Zeugs. Aber hier gibt's ja nichts zu tun, also. Stellt sich halt die Frage, welchen, wie das, also weiß ich nicht, ne, aber wie das dann halt von Screenreadern und Assistive Tech irgendwie announced wird.
Na, ich weiß, was hast du denn? Du hast ja Min, Max, Mitte. Ich sehe hier ist auch noch ein Optimum und eine Value. Das kann ja, hat ja nicht viel mehr Wert letztendlich, wenn du das irgendwie wahrnimmst, gelesen oder wie auch immer. Nee, absolut. Könntest du auch ein Bild hintun, kannst Max Doppelpunkt hinschreiben.
Alles, was das Meta-Element halt wirklich bringt, ist ein hässliches Diff, das in Firefox anders aussieht als in Chrome. Den Hocktake unterschreibe ich so. Genau. Naja, vielleicht hört uns ja jemand mit assistiver Technologie mit Screenreader zu und kann uns irgendwie die Frage beantworten, wie interagiert man mit Meta-Elementen?
Das Meta-Element ist ja nicht zum Interagieren gedacht. Das ist ja wirklich nur Informationsausgabe. Genau, also Also, aber wird es automatisch auszugeben oder muss man das quasi explizit dann sozusagen anfragen? Weil ich kann mir das vorstellen, dass es vielleicht auch ein bisschen noisy ist, so den ganzen Kack einfach an den Kopf geworfen zu bekommen, wenn man das vielleicht auch gar nicht so gerade braucht.
Also die Attribute sind Value, Min, Max, Low, High und Optimum. Also wir haben jetzt hier sechs numerische Values. Man könnte natürlich, weiß ich nicht, wenn man einen Fader baut oder sowas. Ich denke auch nur laut, wenn man jetzt natürlich filtern wollen würde, Meter mit Wert zwischen 20 und 30. Dann wäre das ja interaktiv und dann wäre das doch ein Input-Type-Range am ehesten. Ja, ja.
Ja, na, fair. Ja, fair. Ja, okay. Es hat ein Read-Only-Attribute-Notelist-Labels. Also man kann ein Meta-Element labeln und ja, das stimmt auch. Okay, das ist ein Feature, das halt so ein Diff nicht out of the box so hat. Nö, aber dann machst du halt ein ARIA-Label drauf. Oder ein ARIA-Labeled-By. Ja gut, aber ich meine, Label-Abel heißt ja tatsächlich, dass es auch automatisch ein Label zugewiesen kommt, einfach, bekommt qua Verschachtelung.
Und das ist ja ein Feature. Ja, das stimmt. Das ist wohl wahr. Okay, also Kommando zurück. Alle müssen das Mieter-Element benutzen. Auf gar keinen Fall. Sag Bescheid, wann und wie und wie das gut ist. Also ich verwende ja irgendwie so Progress-Element für, wenn ich irgendwie was demonstrieren will, in so der minimalsten HTML-Demo, die auf eine Slide passen soll, von wegen, wann ist der JavaScript-Main-Thread blockiert.
Weil es ist eine Animation, die man in HTML bekommt for free, wenn man wirklich ein Progress-Element nimmt, ohne halt so Progress-Values. Da macht er halt einfach so einen Ping-Pong. Das ist, wenn ich Progress benutze. Ja, und blockiert das dann? Also, was ist, wenn du den Mainstrap blockierst? Läuft die Animation dann weiter oder nicht? Natürlich nicht, weil dann ist ja blockiert.
Aha, dann benutzt er ja keine CSS-Animation anscheinend. Aha. Weil dann hätten die das Problem ja nicht. Da habe ich noch nicht drüber nachgedacht, das stimmt. Weil die läuft ja nur auf der Grafikkarte und der ist ja völlig wurscht, ob die CPU gerade blockiert ist oder nicht. Ich muss nachher mal ein paar Tests durchführen. Also morgen vielleicht.
To-Do-List wird länger und länger hier heute. Ja, so ist das bei Working Draft. Man geht mit mehr Fragen raus, als man reingegangen ist. Ja, genau. Also eigentlich ist das alles nicht gut, was wir hier machen. Gerade dieses, dass man links und rechts Dinge mitnimmt, finde ich ja total gut da dran. Ja. Random Facts. Genau. Und auch Dinge aus der eigenen Paxes dann.
Sei es, dass man ein Revocable Proxy verdingelt oder eben, mit irgendwelchen Check-Currents. sich rumschlägt. Dass ich jetzt damit was anfangen kann, dass du mir jetzt beigewogen hast, dass ich Stroke außerhalb von SVG verwenden kann. Ich glaube, die Wahrscheinlichkeit, dass ich damit epischen Gewinn erziele, ist ein bisschen höher, als dass du jetzt sagst, Revocable Proxy.
Genau das habe ich gesucht. Das brauche ich jetzt morgen. Es liegt auch daran, dass ich selber immer noch gar nicht genau weiß, wann ich sowas benutzen wollen würde. Deswegen kann ich auch niemand anders damit beeindrucken. Weil ich die Frage Why nicht beantworten könnte. Du musst halt ich baue was Framework-artiges Brain haben und weil dieser spezifische Art von Dachschaden bei dir noch nicht angekommen ist, sondern du halt tatsächlich mit Wertschöpfung befasst bist, so hat das halt auf deine Realität keinen Einfluss.
Das ist ja auch gut, das ist ja richtig und wichtig. Ja, oder ich bin noch nicht reif dafür einfach, weißt du? Das kann auch sein. Ich muss noch ein bisschen maturen, bis ich auf dann diese Bedürfnisse habe. Bis du genauso matschig bist wie diese Apfel hier. Ja, ist so genau so. Den hätte ich vorgestern essen können vielleicht noch. Mhm.
Ja, cool. Hat Spaß gemacht. Mir hat es Spaß gemacht. Ich fand das gut. Ich fand auch schön, dass du da warst, Stefan. Einfach, weil wir das irgendwie schon so lange nicht gemacht haben und dass es immer schön ist mit dir. Danke. Und wir können ja mal gucken, ob wir im Anschluss ein, das hat nämlich immer beim Aria-Glücksrad gut funktioniert, wenn wir einen Termin im Anschluss gemacht haben der kann ja ruhig irgendwie weiter in der Zukunft fliegen und dann macht man das eben wieder, machen wir das gerne immer was gelernt hier genau, ich auch vielen Dank wenn euch die Folge gefallen hat, ihr wisst Bescheid Sternchen, hier Daumen hoch sagt es weiter und in den Kommentaren habt, immer her damit.
Alle Kontaktmöglichkeiten findet ihr auf unserer Seite und dann hören wir uns nächste Woche wieder, wenn es heißt, ja, was heißt es da? Da wird es heißen, höchstwahrscheinlich Do's and Don'ts der Typografie im Web. Da haben wir den Oliver Schöndorfer da. Wow. Wobei, nee, ich glaube, ich lüge, nee, wir hatten den Termin geschoben, weil er da doch nicht konnte. Okay, ich habe gelogen. Ich glaube, das war am 9.11. Nehmen wir erst auf. Das ist noch ein bisschen.
Ja gut, dann müsst ihr euch noch gedulden. Nee, dann weiß ich es noch nicht. Dann schauen wir einfach. Wir finden schon was. Ja, alles klaro. Bis denne. Tschüss. Danke. Tschüss.