Revision 509: Letzte Runde Glücksrad für 2021

Dieses Mal hat Schepp Patrick Lipinski aka Lippe aka @dickelippe zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff „Klassenfahrt“, und bei der letzten gemeinsamen Konferenz kamen wir darauf, dass er doch einmal Gast bei uns sein könnte. Gesagt, getan!

[00:00:59] Glücksrad

CSS‘ appearance-Property

Los geht es mit der appearance-Property. Patrick und Schepp stellen fest, dass sie diese CSS-Eigenschaft eigentlich immer nur mit dem Wert none verwenden. Gibt es auch andere Use-Cases? Schepp kommt außerdem in den Sinn, dass man im neuesten Edge Canary das vom Open UI Projekt konzipierte, und frei umgestaltbare <selectmenu> ausprobieren kann. Wir debattieren zum Abschluss kurz über Reset vs. Normalize und über die neueste Form des Resets.

Das <applet>-Element

Die Anfangszeiten des Webs grüßen und wir erinnern uns an Java-Applet-getriebene Wellen-Effekte auf Websites. Auch Java-getrieben, aber anders schlimm: Die Log4j-Sicherheitslücke, über die Kristian Köhntopp ein herrliches Meinungsstück geschrieben hat.

Das title-Attribut

Wird leider meist als Tooltip oder von SEOs missbraucht. Wo das title-Attribut sinnvoll eingesetzt werden kann, ist z. B. als Sidekick des <abbr>-Elements.

Der CSS-Datentyp <time-percentage>

Mehr als das, was wir in MDN lesen können, wissen wir in der Folge selbst nicht über diesen Datentyp: Er darf wahlweise ein Zeitwert oder ein Prozentwert (einer Zeit) sein. Anders als Schepp vermutet, hat das Ganze aber nichts mit den neuen Scroll-Linked-Animations zu tun.

Die Gyroscope API

Eine der ersten APIs, die mit HTML5 aus der Taufe gehoben wurden. Schepp erinnert sich, dass Macbooks auch ein eingebautes Gyroskop/Accelerometer haben, auf welches man aus Browsern heraus zugreifen kann.

Die CSS :host-context()-Pseudoklasse

Über diese Pseudoklasse kann eine Webcomponent trotz Shadow-DOM-Barriere herausfinden, in was für einem Light-DOM-Baum ihr Shadow-Dom-Host steckt. Gut, wenn die Komponente sich an verschiedene Kontexte anpassen können soll.

CSS Global Keywords

Globale Keywords in CSS wären Dinge wie auto, none, inherit, revert oder initial, die man in so gut wie jede Eigenschaft stecken kann.

HTMLs inputmode-Attribut

Über das inputmode-Attribut können Web-Entwickelnde auf einem <input>-Element steuern, welche Art von Softkeyboard zur Eingabe angezeigt wird. Praktisch, wenn es etwa in einer Anmeldung ein Feld gibt, in dem man entweder seine E-Mail-Adresse oder seinen Benutzernamen eingeben kann.

Web Animations API Keyframe Effects iterationComposite-Eigenschaft

Diese Eigenschaft, von der wir zuvor noch nicht gehört haben, scheint zu steuern, ob erneute Animationsdurchgänge einen vorherigen Wert ersetzen oder sich aufaddieren. Tja, wieder was gelernt und vielleicht brauchen wir es eines Tages mal? Sowohl Patrick als auch Schepp haben die Web Animations API bislang noch nicht eingesetzt, allerdings kommt Schepp eine bestimmte Folge der „HTTP 203“-Serie in den Sinn, in welcher Jake ein ganz bestimmtes Problem nur mit Hilfe des Web Animations API lösen konnte. Sehenswert!

Der CSS-Datentyp ratio

Wurde der ratio-Datentyp früher ausschließlich in Media Queries genutzt, kommt er neuerdings auch in der CSS-Eigenschaft namens aspect-ratio zum Einsatz.

Die Presentation API

Wir wissen nur eines: Es gibt sie wohl. Wer weiß, wofür sie gut ist: Bitte melden! 😅

CSS‘ @property-Rule

Wir finden diese ist das Beste des ganzen CSS-Houdini-Projekts und verweisen auf Schepps Darlegungen in der 33-ten Folge des „Wo wir sind ist vorne“-Podcasts (ab 00:12:31).

Links

CSS‘ -webkit-text-stroke-Property

Patrick erzählte in der Vorbesprechung von der Möglichkeit, farbige Text-Umrandungen nicht nur in SVG, sondern auch in HTML per CSS zu setzen. 😊

CSS‘ paint-order-Property

Die zweite CSS-Eigenschaft, von der Patrick erzählte, war paint-order, das in Kombination mit -webkit-text-stroke nützlich wäre, um eine Umrandung wirklich nur außen herum gehen zu lassen, indem man den Hintergrund/Fill drüber legt. Leider wird diese noch nicht außerhalb von SVG unterstützt. 🙁

Patrick sucht aktuell eine Position als UX-Engineer!

Ihr fragt, was macht denn ein UX-Engineer eigentlich? Kein Problem, auch hier können wir wieder auf die Kollegen vom „Wo wir sind ist vorne“-Podcast verweisen, die zu dem Thema eine Folge mit Dirk Ginader aufgenommen haben. Wer also jemanden weiß, der jemanden weiß… Immer her mit den Jobangeboten!