Revision 443: Select-Styling und Computed Styles


Episode Artwork
1.0x
0% played 00:00 00:00
Sep 22 2020 79 mins   52
Aufgrund außerplanmäßiger Ausfälle geplanter Gäste erzählt Schepp etwas von seinen Versuchen, mit allen Mitteln Select-Elemente zu stylen (was nicht gehen sollte, aber trotzdem einigermaßen klappt) und Peter von seinen Versuchen, Elementen ihre Computed Styles zu entlocken (was trivial sein sollte, aber knifflig ist). Moderiert vom unvergleichlichen Hans! a.message_link { margin: 0 0 1rem; width: 100%; border-bottom: 0; display: block; } a.message_link img { margin: 0 0 0 1rem; max-width: 25rem; width: 100%; } Unser Sponsor tradingtwins sucht einen Frontend-Developer für den Aufbau einer digitalen Angebotsplattform. Wenn Du Spezialist für HTML/CSS und Javascript bist, solltest du dir das Startup mal genauer ansehen. Dich erwartet eine Schlüsselrolle in einem Kanban-Team aus Designern und Entwicklern. tradingtwins sitzt im Herzen von Köln, hat aktuell 11 Mitarbeiter. Zwei der drei Gründer sind selbst Entwickler. Sie bauen ein spannendes Produkt mit langfristigem Fokus, sind profitabel und solide finanziert. Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter www.tradingtwins.com/workingdraft. Schaunotizen [00:01:42 ] Select-Styling, Farb-Fonts und UnicodeSchepp sah sich der Aufgabe gegenüber, mit nativen – -Elementen eine Länderauswahl mit bunten Landesflaggen zu bauen. Native Elemente haben viele Vorteile, sind aber Replaced Elements und daher spätestens seit Firefox Electrolysis in allen Browsern ungestaltbar. Schepp griff zu farbigen Fonts und dem Font-Editor Birdfont um sich einer Problemlösung anzunähern. Des Weiteren geht es um unicode-range, Zero-Width-Spaces, Ligaturen und Swingerclubs.[00:51:15 ] Computed Styles auslesenPeter hat dank Warhol in der letzten Zeit viel mit dem CSSOM (dem ollen CSSOM, nicht Houdini) zu tun und berichtet von den Herausforderungen beim Auslesen von Computed Styles. Es geht um window.getComputedStyle(), Element.computedStyleMap(), Custom Properties, Browser, Browserbugs in Chrome (v.a. mit font-feature-settings) und die Implementierung von Single-Page-Apps in Netscape-Browsern.