Endlich spielen wir wieder Glücksrad! Der aus unserer „Mit Gast“-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Glücksrad. Folgendes sprang dabei heraus: [00:01:00] Glücksrad [00:03:28] HTML | global_attributes | spellcheck Ein boolsches […]
Endlich spielen wir wieder Glücksrad! Der aus unserer „Mit Gast“-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Glücksrad. Folgendes sprang dabei heraus: [00:01:00] Glücksrad [00:03:28] HTML | global_attributes | spellcheck Ein boolsches Attribut, mit dem sich eine Rechtschreibprüfung auf editierbaren Elementen aktivieren oder deaktivieren lässt. Entdeckte Rechtschreibfehler lassen sich per ::spelling-error-Pseudoelement herausgreifen und mit „Squiggly Lines“ aka text-decoration: wavy red; markieren. Grammatikfehler wiederum kriegt man mit ::grammar-error zu fassen. Was insofern nicht stimmt, als dass der Browser-Support für diese Pseudo-Elemente non-existent ist Ach so, und für eine brauchbare Rechtschreibhilfe dürft Ihr nicht vergessen, das korrekte lang-Attribut auf dem Root-Element zu setzen! [00:09:20] API | HTMLElement | .outerText Der .outerText-Getter und -Setter unterscheidet sich beim Lesen genau gar nicht von .innerText. Erst beim Schreiben unterscheidet sich sein Verhalten. Dann nämlich wird das betroffene HTML-Element inklusive seinem enthaltenen Text durch den zugewiesenen Text ersetzt. Der Text steht also im Anschluss im Elternelement des eben noch angesteuerten Elements – an dessen bisheriger Position im DOM. Wir sprechen kurz den Fakt an, dass eine Leseoperation per .innerText im Gegensatz zu .textContent zu Reflows führt, weil der Browser nur denjenigen Text ausgeben soll, der auch tatsächlich sichtbar ist – was er nur durch ein kurzfristig anberaumtes Neurendern herausfinden kann. [00:16:18] CSS | properties | text-overflow Pah, einfach! Oder etwa nicht? Zu text-overflow können wir schnell alles Wissenswerte zusammentragen: Sie dient dem Auspunkten von überschüssigem Text. Dazu setzt Ihr die Property im Grunde immer auf ellipsis, und funktionieren tut das nur, wenn Ihr gleichzeitig auch overflow: hidden und white-space: nowrap setzt. Aber was ist eigentlich der initialer Wert? Na clip! Das bringt uns kurz auf overflow: clip. Außerdem lernen wir, dass text-overflow ähnlich wie content beliebige Strings unterstützt und auch das fade-Keyword oder eine fade()-Funktion für weiches Ausblenden. Zu guter Letzt lassen sich sogar zwei Werte setzen: Einer für das gewünschte Auspunkten zu Text-Beginn und eines zu Text-Ende. Leider ist der Browser-Support auch hier unterirdisch [00:24:21] CSS | selectors | :read-only Mit der :read-only-Pseudoklasse könnt Ihr Eingabeelemente herausgreifen und stylen, die auf einem reinen Lesemodus stehen. Bei Inputs bewerkstelligt Ihr das mit einem gesetzten readonly-Attribut. So weit, so klar. Aber wusstet Ihr, dass :read-only jedes HTML-Element mit Ausnahme von input, textarea und contenteditable erfasst, weil die ja alle „Read only“ sind? Umgekehrt könnt Ihr alle input, textarea und contenteditable, auf denen kein readonly-Attribut gesetzt ist mit der Pseudoklasse :read-write ansteuern. [00:33:37] HTML | elements | Wir erinnern uns, dass eines dieser Elemente aus grauer Vorzeit sind, als es weder CSS noch Flash oder Java Applets gab, um Texte zu animieren. Meist wurde es für Nachrichten-Ticker eingesetzt. Was wir nicht auf dem Schirm hatten war, wie viele Attribute (oder Neudeutsch: „props“) bereitstehen, um Art der Animation, Richtung, Bouncen, Loopen, Scrolldistanz oder Scrollschritte festzulegen. Es stehen zudem die Methoden .stop() und .start() bereit, um die Animation anzuhalten und wieder zu starten. Rund wird die Sache durch die drei Events start, bounce und finish. [00:38:59] CSS | types | Bei handelt es sich um eine alternative Spezifikations-Notation von [ |
Endlich spielen wir wieder Glücksrad! Der aus unserer „Mit Gast“-Premiere bekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor des Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues MDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Glücksrad. Folgendes sprang dabei heraus:
spellcheck
Ein boolsches Attribut, mit dem sich eine Rechtschreibprüfung auf editierbaren Elementen aktivieren oder deaktivieren lässt. Entdeckte Rechtschreibfehler lassen sich per ::spelling-error-Pseudoelement herausgreifen und mit „Squiggly Lines“ aka text-decoration: wavy red; markieren. Grammatikfehler wiederum kriegt man mit ::grammar-error zu fassen. Was insofern nicht stimmt, als dass der Browser-Support für diese Pseudo-Elemente non-existent ist lang-Attribut auf dem Root-Element zu setzen!
[00:09:20] API | HTMLElement | .outerText
Der .outerText-Getter und -Setter unterscheidet sich beim Lesen genau gar nicht von .innerText. Erst beim Schreiben unterscheidet sich sein Verhalten. Dann nämlich wird das betroffene HTML-Element inklusive seinem enthaltenen Text durch den zugewiesenen Text ersetzt. Der Text steht also im Anschluss im Elternelement des eben noch angesteuerten Elements – an dessen bisheriger Position im DOM..innerText im Gegensatz zu .textContent zu Reflows führt, weil der Browser nur denjenigen Text ausgeben soll, der auch tatsächlich sichtbar ist – was er nur durch ein kurzfristig anberaumtes Neurendern herausfinden kann.
[00:16:18] CSS | properties | text-overflow
Pah, einfach! Oder etwa nicht? Zu text-overflow können wir schnell alles Wissenswerte zusammentragen: Sie dient dem Auspunkten von überschüssigem Text. Dazu setzt Ihr die Property im Grunde immer auf ellipsis, und funktionieren tut das nur, wenn Ihr gleichzeitig auch overflow: hidden und white-space: nowrap setzt. Aber was ist eigentlich der initialer Wert? Na clip! Das bringt uns kurz auf overflow: clip. Außerdem lernen wir, dass text-overflow ähnlich wie content beliebige Strings unterstützt und auch das fade-Keyword oder eine fade()-Funktion für weiches Ausblenden. Zu guter Letzt lassen sich sogar zwei Werte setzen: Einer für das gewünschte Auspunkten zu Text-Beginn und eines zu Text-Ende. Leider ist der Browser-Support auch hier unterirdisch
[00:24:21] CSS | selectors | :read-only
Mit der :read-only-Pseudoklasse könnt Ihr Eingabeelemente herausgreifen und stylen, die auf einem reinen Lesemodus stehen. Bei Inputs bewerkstelligt Ihr das mit einem gesetzten readonly-Attribut. So weit, so klar. Aber wusstet Ihr, dass :read-only jedes HTML-Element mit Ausnahme von input, textarea und contenteditable erfasst, weil die ja alle „Read only“ sind? input, textarea und contenteditable, auf denen kein readonly-Attribut gesetzt ist mit der Pseudoklasse :read-write ansteuern.
[00:33:37] HTML | elements | <marquee>
Wir erinnern uns, dass <marquee> eines dieser Elemente aus grauer Vorzeit sind, als es weder CSS noch Flash oder Java Applets gab, um Texte zu animieren. Meist wurde es für Nachrichten-Ticker eingesetzt. Was wir nicht auf dem Schirm hatten war, wie viele Attribute (oder Neudeutsch: „props“) bereitstehen, um Art der Animation, Richtung, Bouncen, Loopen, Scrolldistanz oder Scrollschritte festzulegen. Es stehen zudem die Methoden .stop() und .start() bereit, um die Animation anzuhalten und wieder zu starten. Rund wird die Sache durch die drei Events start, bounce und finish.
[00:38:59] CSS | types | <time-percentage>
Bei <time-percentage> handelt es sich um eine alternative Spezifikations-Notation von [ <time> | <percentage> ] und bedeutet, dass als Wert wahlweise ein Zeit- oder ein Prozentwert angegeben werden kann. Allerdings nur dann, wenn sich der Prozentwert eindeutig in einen Zeitwert umwandeln lässt, so wie sich Prozentwerte bei Höhen- und Breitenangaben auch in Längen umwandeln lassen. Damit wissen wir schonmal mehr als in unserem zweiten Glücksrad mit Gast im Dezember, wo das auch schon einmal aufkam. Die wichtigste Frage können wir aber weiterhin nicht beantworten: Wo in CSS ist es möglich, einen Zeitwert in Prozent auszudrücken? MDN weiß es leider auch nicht. Wisst Ihr es?
[00:44:36] HTML | global_attributes | class
Naja, naja, hier gibt es nicht viel zu sagen. Stefan und Schepp sprechen ein wenig über Wege, HTML mit CSS zu verdrahten: Die einen mögen lieber BEM, die anderen setzen auf Utility-Klassen, und Dritte wie Harry Roberts mischen beides munter. Schepp mag es zudem, so viel wie möglich mit HTML-Attributen à la aria-hidden / hidden, aria-current & Co zu arbeiten, weil man Accessibility obendrauf bekommt. Beide freuen sich sehr auf all die neuen Möglichkeiten, mit dem :has()-Selektor CSS zu strukturieren
[00:58:25] CSS | selectors | ::-moz-color-swatch
Das Pseudo-Element ::-moz-color-swatch stellt in Firefox beim Farb-Input den Bereich dar, in dem die aktuell gewählte Farbe angezeigt wird. In Safari und Chromium gibt es analog dazu das Pseudo-Element ::-webkit-color-swatch. In dem Zusammenhang kommen wir auf das Open UI Projekt zu sprechen, das sich zum Ziel gesetzt hat, all diese Browser-Sonderlocken zu vereinheitlichen und gestaltbar zu machen. Stefan weist außerdem darauf hin, dass Ihr bei Input-Elementen mit Pickern ebendiesen neuerdings per .showPicker() sich programmatisch öffnen lassen könnt.