BROADCASTS.com

Die allj\xe4hrliche Umfrage zum State of CSS haben Vanessa und Schepp herangezogen,\num \xfcber die dort aufgef\xfchrten brandneuen oder auch nicht mehr so neuen, aber\ndennoch interessanten CSS Features zu sprechen. Dies ist Teil zwei von zwei\nTeilen. Teil eins k\xf6nnt Ihr hier nachh\xf6ren.\n\n\n[00:01:00] SCHAUNOTIZEN\n\n[00:02:03] DAS PREFERS-REDUCED-DATA MEDIA FEATURE\n\nDas prefers-reduced-data Media Feature (HTML), bzw. die prefers-reduced-data\nMedia Query (CSS) wird derzeit nur von den Chromium-Browsern unterst\xfctzt, und\ndas auch nur hinter Flags. Hiermit k\xf6nnt Ihr (teilweise) steuern, was an Daten\nzus\xe4tzlich geladen werden soll, je nachdem ob der Wert auf no-preference oder\nreduce steht.\n\n\n\nWir sprechen in dem Zusammenhang auch \xfcber sogenannte \u201eBrowser Interventions\u201e,\ndie Simon Pieters in diesem Twitter-Thread genauer ausf\xfchrt.\n\nAu\xdferdem findet der Poor Man\u2019s Dark Mode Erw\xe4hnung.\n\n[00:18:37] :FOCUS-VISIBLE\n\nDie Kurzfassung der Funktionsweise der :focus-visible-Pseudoklasse ist, dass\ndiese nur dann zum Tragen kommt, wenn der Browser ein Interaktionsmuster\nfeststellt, bei dem die benutzende Person einen visuellen Fokus-Indicator\nben\xf6tigt. Damit kann man die von Designern und Chefs verhassten Fokus-Outlines\nwegstylen, um sie im Falle eines aktivierten :focus-visible wieder zur\xfcck zu\nbringen.\n\n\n\nDie Langfassung dessen, was hinter :focus-visible (und inert) steht, k\xf6nnt Ihr\nin dieser Folge der Igalia Chats Podcastreihe nachh\xf6ren.\n\n[00:21:15] COLOR SCHEMES\n\nDieser von Vanessa erw\xe4hnte Artikel beinhaltet alle Infos zu den verschiedenen\nColor Schemes, die man ben\xf6tigt.\n\n[00:22:00] DAS ::MARKER-PSEUDOELEMENT\n\nMit Hilfe von ::marker l\xe4sst sich nun endlich(?) das Aufz\xe4hlungszeichen von\nListen greifen und stylen. Wir sind uns allerdings nicht sicher, wie sehr uns\ndas tangiert.\n\n\n\nWichtig zu wissen ist n\xe4mlich, dass man bei ::marker nur ein Subset an\nCSS-Eigenschaften zum Stylen zur Verf\xfcgung hat.\n\n[00:24:45] :HAS()\n\nDank der Ideen eines brillanten WebKit-Ingenieurs zur Umgehung der drohenden\nPerformance-Probleme, ist Ende 2021 naben Container Queries auch der zweite\nTraum aller Frontend-Enwickler*innen, der Parent-Selector Wirklichkeit geworden!\n\n\n\nWir erw\xe4hnen kurz die Tatsache, dass es auch beim :last-child-Selektor aus\nPerformancegr\xfcnden l\xe4nger gedauert hat, bis dieser in allen Browsern verf\xfcgbar\nwar.\n\n[00:28:46] :WHERE()\n\nMit :where() kann man einerseits stellvertretend m\xf6gliche Selektoren auflisten,\num sich nicht per Selektoraufz\xe4hlung wiederholen zu m\xfcssen. Das kann :is()\nallerdings auch. Der Unterschied von :is() zu :where() ist jedoch, dass :is()\ndie Spezifit\xe4t des\xa0 Selektors in der Auflistung mit der h\xf6chsten Spezifit\xe4t\n\xfcbernimmt, w\xe4hrend die Spezifit\xe4t von :where() bei 0 (null) verbleibt, \xe4hnlich\nwie beim Universalselektor *.\n\n\n\nUnd das wiederum erm\xf6glicht zusammen mit anderen Neuerungen wie den globalen\nEigenschaftswerten unset und revert g\xe4nzliche neue Arten von CSS-Resets.\n\n[00:30:39] WARUM HEISST ES MANCHMAL CSS VARIABLEN UND MANCHMAL CUSTOM\nPROPERTIES?\n\nWir kl\xe4ren die Frage, ob beides vielleicht unterschiedliche Dinge sind (Spoiler:\nsind sie nicht), und warum das Ganze offiziell nicht \u201eCSS Variablen\u201c hei\xdft.\n\n\n\nDann erw\xe4hnen wir Lea Verous Talk \xfcber Custom Properties vom letzten CSS Day,\nder sehr weit in die Tiefe geht und Dinge wie Toggle-Switches und mehrere Ebenen\nvon verschachtelten Custom Properties zeigt.\n\n[00:37:56] @PROPERTY\n\n\xdcber @property ging es vor nicht all zu langer Zeit in der Folge Revision 534:\nCSS Houdini, gescheitert?. Dank @property kann man CSS Custom Properties\ntypisieren, so dass der Browser im Anschluss wei\xdf, wie er den Wert im Rahmen\neiner Animation interpolieren kann. Oder man definiert, ob eine Custom Property\nsich vererbt, oder eben nicht. Und zu guter Letzt kann man einen initialen Wert\nfestlegen, den die Custom Property hat, wenn Ihr kein Wert zugewiesen wurde.\n\n\n\n@property --property-name {\n syntax: "";\n inherits: false;\n initial-value: #c0ffee;\n}\n\nEin sch\xf6ner Nebeneffekt von \u201edummen\u201c, also nicht-typisierten Custom Properties\nist die Tatsache, dass man von diesen z.B. Farben mit verschiedenen\nTransparenzen oder Farben mit \xe4hnlichen HSL-Werten ableiten kann.\n\n[00:41:58] @SUPPORTS()\n\n@supports() ist eine im Browser eingebaute Feature Detection f\xfcr CSS\nEigenschaften und/oder bestimmte Eigenschaftswerte. Verwenden wir beide gerne\nund viel.\n\n\n\nNeuerdings l\xe4sst sich mit Hilfe der selector()-Funktion in einem @supports auch\nherausfinden, ob CSS Selektoren vom Browser unterst\xfctzt werden.\n\n[00:43:46] MIN(), MAX() UND CLAMP()\n\nAlle drei Funktionen sind aus unserer Sicht sehr n\xfctzliche Erg\xe4nzungen von CSS.\nBei min() und max() haben wir allerdings wie die meisten anderen\nEntwickler*innen das Problem, dass wir zun\xe4chst zum falschen greifen wollen,\nweil wir das Gegenteil des Funktionsnamens erreichen wollen.\n\n\n\nclamp() wiederum findet meist im Rahmen von Fluid Typography Anwendung.\n\nUnd schlie\xdflich erw\xe4hnen wir noch die Tatsache, dass man innerhalb von min(),\nmax() und clamp() kein calc() benutzen muss, weil die schon von Haus aus\nMathematische Ausdr\xfccke als Werte unterst\xfctzen.\n\n[00:47:14] DIES UND DAS\n\nWir rauschen als n\xe4chstes schnell noch \xfcber ein paar CSS Features dr\xfcber:\n\n\n\n * will-change finden nicht nur wir sehr problematisch und raten vom Einsatz ab\n * Cascade Layers aka @layer sind ein spannendes neues Konzept. Es gibt dazu\n einen tollen Talk von Bramus van Damme. Use-Case sind vermutlich Design\n Systeme.\n * Mit ::part() kann man von au\xdfen Teile eines Shadow DOMs stylen, sofern die\n Autoren desselben diese Teile mit einem part-Attribut markiert haben.\n * Trigonometrisch Funktionen wie sin(), cos() und tan() sind sinnvolle\n Erg\xe4nzungen, um komplexe Transformationen zu berechnen.\n * CSS Nesting ist nett, haut uns aber nicht so vom Hocker. Au\xdferdem wird es\n wohl noch etwas l\xe4nger dauern, bis man das einsetzen kann.\n * Die image-set()-Funktion ist sowas wie srcset, nur in CSS. Wird in einer\n Vorversion mit -webkit--Prefix schon seit langem von Safari und Chromium\n unterst\xfctzt.\n * Die image()-Funktion ist so etwas wie die Nachfolgerin der url()-Funktion.\n Sie r\xe4umt ein paar historische Probleme von url() aus, wie zum Beispiel, dass\n man darin keine Custom Properties verwenden kann. Dar\xfcber hinaus r\xfcstet\n image() weitere F\xe4higkeiten nach, wie etwa ein Bild aus einer Farbe zu\n generieren, so dass man keinen Gradienten mehr daf\xfcr missbrauchen muss. Und\n man kann auch nur Bildausschnitte via Fragment-Notation verwenden. Der\n Browser-Support ist aber nicht vorhanden.\n\n[00:53:09] CSS FRAMEWORKS\n\nWir gehen kurz die aufgelisteten Frameworks durch und stellen fest, dass wir nur\ndie wenigsten davon kennen. Au\xdferdem werden hier echte CSS Frameworks wild mit\nKomponentenbibliotheken gemischt. Welche verwendet Ihr denn und was gef\xe4llt Euch\nan denen gut? Joined uns im Community Draft und sagt es uns!\n\n[00:58:53] CSS IN JS\n\nNoch viel weniger Plan als von Frameworks haben wir von den verschiedenen\nCSS-in-JS-Bibliotheken \U0001f974\n\n\n\nVanessa erinnert sich jedoch an eine alte Folge, in der Hans und Schepp\nausschlie\xdflich \xfcber CSS in JS diskutiert haben: Revision 468: CSS in JS.\n\n[01:07:08] OTHER TOOLS\n\nSchepp nutzt weiterhin sehr gerne SCSS, weil es sehr angenehm ist, damit zu\narbeiten und sein CSS zu organiseren. Bei Vanessa kommt es ein wenig von den in\nProjekten eingesetzten Scaffolding-Tools und deren \u201eServiervorschl\xe4gen\u201c an,\nwelche Art Pre- und Postprozessoren am Werk sind.\n\n\n\nAn weiteren Tools nutzt Vanessa noch Stylelint, Purge CSS, Prettier,\nAutoprefixer und CSS Nano. Dadurch dass diese Dinge aber eben oft automagisch\nvon Scaffolding-Tools gesetupped werden, steht man auch schonmal wie der Ochs\nvor dem Berge, wenn etwas nicht geht, weil man nicht wei\xdf, was denn genau alles\nin einem Projekt am Werk ist. Schepp hingegen ist mehr so der Typ, der alles\nselbst aufsetzt und konfiguriert, der damit am Anfang zwar langsamer ist, er\naber immer wei\xdf, was passiert. Von CSS Nano r\xe4t Schepp hingegen ab. Aus CSS\nl\xe4sst sich einfach nicht so viel an Minifizierung herausholen, als dass es sich\nlohnne w\xfcrde die Risiken einzugehen, die mit CSS Nano daherkommen.\n\nAls Entwicklungsbrowser nutzt Vanessa den Microsoft Edge, w\xe4hrend Schepp\nweiterhin auf Chrome setzt. Beide schw\xe4rmen wir aber auch von extra f\xfcr\nEntwickler*innen gebaute Browser wie dem Sizzy-Browser oder Polypane.\n\nZu guter Letzt gehen wir noch auf eine Art K.O.-Umfrage ein, in der man sich in\nmehreren Duellen f\xfcr eines von zwei Kriterien entscheiden soll, die einem bei\nder Auswahl eines Tools wichtiger ist. Am Ende der Duell-Reihe bleibt dann das\nwichtigste Kriterium \xfcbrig. Die Duelle sind unserer Meinung nach aber seltsam\ngegeneinander aufgestellt.\n\n[01:31:45] RESOURCES\n\nIm Kapitel \xfcber die Learning Resources freuen wir uns schlie\xdflich sehr dar\xfcber,\ndass unser Podcast es hineingeschafft hat. Mega!