BROADCASTS.com

Endlich spielen wir wieder Gl\xfccksrad! Der aus unserer \u201eMit Gast\u201c-Premiere\nbekannte Stefan Judis (Twitter, Web), mittlerweile DevRel bei Checkly und Autor\ndes Web Weekly Newsletters, setzte sich zusammen mit Schepp an unser neues\nMDN-gespeistes und Svelte + WebSockets gepowerte Webtechnologie Gl\xfccksrad.\nFolgendes sprang dabei heraus:\n\n\n[00:01:00] GL\xdcCKSRAD\n\n[00:03:28] HTML | GLOBAL_ATTRIBUTES | SPELLCHECK\n\nEin boolsches Attribut, mit dem sich eine Rechtschreibpr\xfcfung auf editierbaren\nElementen aktivieren oder deaktivieren l\xe4sst. Entdeckte Rechtschreibfehler\nlassen sich per ::spelling-error-Pseudoelement herausgreifen und mit \u201eSquiggly\nLines\u201c aka text-decoration: wavy red; markieren. Grammatikfehler wiederum kriegt\nman mit ::grammar-error zu fassen. Was insofern nicht stimmt, als dass der\nBrowser-Support f\xfcr diese Pseudo-Elemente non-existent ist \U0001f62c\nAch so, und f\xfcr eine brauchbare Rechtschreibhilfe d\xfcrft Ihr nicht vergessen, das\nkorrekte lang-Attribut auf dem Root-Element zu setzen!\n\n[00:09:20] API | HTMLELEMENT | .OUTERTEXT\n\nDer .outerText-Getter und -Setter unterscheidet sich beim Lesen genau gar nicht\nvon .innerText. Erst beim Schreiben unterscheidet sich sein Verhalten. Dann\nn\xe4mlich wird das betroffene HTML-Element inklusive seinem enthaltenen Text durch\nden zugewiesenen Text ersetzt. Der Text steht also im Anschluss im Elternelement\ndes eben noch angesteuerten Elements \u2013 an dessen bisheriger Position im DOM.\nWir sprechen kurz den Fakt an, dass eine Leseoperation per .innerText im\nGegensatz zu .textContent zu Reflows f\xfchrt, weil der Browser nur denjenigen Text\nausgeben soll, der auch tats\xe4chlich sichtbar ist \u2013 was er nur durch ein\nkurzfristig anberaumtes Neurendern herausfinden kann.\n\n[00:16:18] CSS | PROPERTIES | TEXT-OVERFLOW\n\nPah, einfach! Oder etwa nicht? Zu text-overflow k\xf6nnen wir schnell alles\nWissenswerte zusammentragen: Sie dient dem Auspunkten von \xfcbersch\xfcssigem Text.\nDazu setzt Ihr die Property im Grunde immer auf ellipsis, und funktionieren tut\ndas nur, wenn Ihr gleichzeitig auch overflow: hidden und white-space: nowrap\nsetzt. Aber was ist eigentlich der initialer Wert? Na clip! Das bringt uns kurz\nauf overflow: clip. Au\xdferdem lernen wir, dass text-overflow \xe4hnlich wie content\nbeliebige Strings unterst\xfctzt und auch das fade-Keyword oder eine\nfade()-Funktion f\xfcr weiches Ausblenden. Zu guter Letzt lassen sich sogar zwei\nWerte setzen: Einer f\xfcr das gew\xfcnschte Auspunkten zu Text-Beginn und eines zu\nText-Ende. Leider ist der Browser-Support auch hier unterirdisch \U0001f62d\n\n[00:24:21] CSS | SELECTORS | :READ-ONLY\n\nMit der :read-only-Pseudoklasse k\xf6nnt Ihr Eingabeelemente herausgreifen und\nstylen, die auf einem reinen Lesemodus stehen. Bei Inputs bewerkstelligt Ihr das\nmit einem gesetzten readonly-Attribut. So weit, so klar. Aber wusstet Ihr, dass\n:read-only jedes HTML-Element mit Ausnahme von input, textarea und\ncontenteditable erfasst, weil die ja alle \u201eRead only\u201c sind? \U0001f92f\nUmgekehrt k\xf6nnt Ihr alle input, textarea und contenteditable, auf denen kein\nreadonly-Attribut gesetzt ist mit der Pseudoklasse :read-write ansteuern.\n\n[00:33:37] HTML | ELEMENTS | \n\nWir erinnern uns, dass eines dieser Elemente aus grauer Vorzeit sind,\nals es weder CSS noch Flash oder Java Applets gab, um Texte zu animieren. Meist\nwurde es f\xfcr Nachrichten-Ticker eingesetzt. Was wir nicht auf dem Schirm hatten\nwar, wie viele Attribute (oder Neudeutsch: \u201eprops\u201c) bereitstehen, um Art der\nAnimation, Richtung, Bouncen, Loopen, Scrolldistanz oder Scrollschritte\nfestzulegen. Es stehen zudem die Methoden .stop() und .start() bereit, um die\nAnimation anzuhalten und wieder zu starten. Rund wird die Sache durch die drei\nEvents start, bounce und finish.\n\n[00:38:59] CSS | TYPES | \n\nBei handelt es sich um eine alternative\nSpezifikations-Notation von [ | ] und bedeutet, dass als\nWert wahlweise ein \u231aZeit- oder ein Prozentwert angegeben werden kann. Allerdings\nnur dann, wenn sich der Prozentwert eindeutig in einen Zeitwert umwandeln l\xe4sst,\nso wie sich Prozentwerte bei H\xf6hen- und Breitenangaben auch in L\xe4ngen umwandeln\nlassen. Damit wissen wir schonmal mehr als in unserem zweiten Gl\xfccksrad mit Gast\nim Dezember, wo das auch schon einmal aufkam. Die wichtigste Frage k\xf6nnen wir\naber weiterhin nicht beantworten: Wo in CSS ist es m\xf6glich, einen Zeitwert in\nProzent auszudr\xfccken? MDN wei\xdf es leider auch nicht. \U0001f914 Wisst Ihr es? \U0001f440\n\n[00:44:36] HTML | GLOBAL_ATTRIBUTES | CLASS\n\nNaja, naja, hier gibt es nicht viel zu sagen. Stefan und Schepp sprechen ein\nwenig \xfcber Wege, HTML mit CSS zu verdrahten: Die einen m\xf6gen lieber BEM, die\nanderen setzen auf Utility-Klassen, und Dritte wie Harry Roberts mischen beides\nmunter. Schepp mag es zudem, so viel wie m\xf6glich mit HTML-Attributen \xe0 la\naria-hidden / hidden, aria-current & Co zu arbeiten, weil man Accessibility\nobendrauf bekommt. Beide freuen sich sehr auf all die neuen M\xf6glichkeiten, mit\ndem :has()-Selektor CSS zu strukturieren \U0001f929\n\n[00:58:25] CSS | SELECTORS | ::-MOZ-COLOR-SWATCH\n\nDas Pseudo-Element ::-moz-color-swatch stellt in Firefox beim Farb-Input den\nBereich dar, in dem die aktuell gew\xe4hlte Farbe angezeigt wird. In Safari und\nChromium gibt es analog dazu das Pseudo-Element ::-webkit-color-swatch. In dem\nZusammenhang kommen wir auf das Open UI Projekt zu sprechen, das sich zum Ziel\ngesetzt hat, all diese Browser-Sonderlocken zu vereinheitlichen und gestaltbar\nzu machen. Stefan weist au\xdferdem darauf hin, dass Ihr bei Input-Elementen mit\nPickern ebendiesen neuerdings per .showPicker() sich programmatisch \xf6ffnen\nlassen k\xf6nnt.