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 eins von zwei\nTeilen.\n\n\nUNSER SPONSOR\n\n\n\nDieser Podcast wird von NordVPN unterst\xfctzt. NordVPN ist ein\nPremium-VPN-Anbieter, der sich durch regelm\xe4\xdfige Updates mit neuen und\npraktischen Funktionen von der Konkurrenz abhebt. In Kombination mit einem\nfairen Preis und der jahrelangen Erfahrung des Teams, das aus Cybersicherheits-\nund IT-Experten besteht, blickt NordVPN auf eine inzwischen 10-j\xe4hrige\nFirmengeschichte zur\xfcck. Ein VPN erm\xf6glicht die Verbindung ins Internet \xfcber\neinen virtuellen privaten Server eines spezifischen Standorts und verschleiert\ndabei die eigene IP-Adresse. Zus\xe4tzlich wird so der Datenverkehr verschl\xfcsselt\nund sorgt so f\xfcr mehr Anonymit\xe4t im Netz.\nDamit auch du sicher im Internet unterwegs sein kannst, schau bei\nnordvpn.com/workingdraft vorbei und teste 30 Tage lang risikofrei mit der\n30-Tage-Geld-zur\xfcck-Garantie!\n\n\nSCHAUNOTIZEN\n\n[00:01:52] STATE OF CSS\n\nVanessa und Schepp beginnen mit der Feststellung, dass sich der Nutzen vieler\nneuer CSS Features nicht immer direkt erschlie\xdft, oder auch, dass einem der\nUmfang der M\xf6glichkeiten, die sich aus neuen Features ergibt, nicht immer sofort\nklar ist.\n\n[00:07:15] CSS WRITING MODES\n\nBeide haben wir nie Interfaces bauen m\xfcssen, die f\xfcr andere Sprachen als von\nlinks nach rechts und von oben nach unten gelesene angepasst werden mussten. Wir\nhaben die CSS Writing Modes aber durchaus genutzt, um Schrift auf engem Raum\nvertikal anzuzeigen. Irgendwie kommen wir auf die These, dass es bestimmt so\netwas wie \u201eUnter-Internets\u201c gibt, in der sich Konsumenten anders geschriebener\nSprachen tummeln, dort die tollsten Web Dev Tricks gepostet werden, und wir\ndavon aufgrund der Sprachbarriere \xfcberhaupt nichts wissen.\n\n[00:15:30] GAP PROPERTY FOR FLEXBOX\n\nWir sind uns einig, dass gap, welches neben CSS Flexbox auch von CSS Grid und\n(au\xdfer in Safari) CSS Multicolumn unterst\xfctzt wird, super praktisch ist.\n\n[00:21:43] SUBGRID\n\nSubgrid betrachten wir noch als nicht einsetzbar, weil der Browser-Support noch\nnicht breit genug ist und es auch keine guten Fallbacks gibt.\n\n[00:22:21] CONTENT-VISIBILITY\n\nBei content-visibility ist das anders. Das l\xe4sst sich trotz geringem\nBrowser-Support super in Form von \u201eProgressive Enhancement\u201c einbauen. Letztlich\nist das nichts anderes als Lazy Rendering von Elementen.\n\n[00:22:40] @CONTAINER\n\nUnd auch Container Queries beginnen wir mittlerweile so einzusetzen, dass Dinge\n\u201egraceful degraden\u201c, wenn die Technik noch nicht zur Verf\xfcgung steht, was man\nmit @supports ja gut herausbekommen kann.\n\n[00:24:21] MEDIA QUERIES RANGE CONTEXTS\n\nDie neue Schreibweise von Media Queries in Form von Wertebereichen zwischen\neinem Minimum und Maximum, mit Hilfe von mathematischen Gr\xe4\xdfer- und\nKleinerzeichen finden wir gut lesbar und sie hilft auch ein paar Edge Cases zu\nvermeiden, auf die wir mit der derzeitigen Schreibeweise sto\xdfen. Anders als von\nuns in der Aufnahme behauptet, werden die nicht nur von Firefox, sondern auch\nvon Chromium unterst\xfctzt. Es dauert also noch eine Weil, bis wir die einsetzen\nk\xf6nnen.\n\n[00:30:49] LOGICAL PROPERTIES\n\nLogische Eigenschaften benutzen wir aus den gleichen Gr\xfcnden nicht, wie im\nZusammenhang mit den CSS Writing Modes genannt. Allerdings sehen wir durch unser\nVerhalten Zug\xe4nglichkeitsprobleme f\xfcr Benutzer*innen, die mit Browser-Plugins\neine Seite in ihre Sprache \xfcbersetzen lassen. Die k\xf6nnten von Logical Properties\nprofitieren.\n\n[00:32:07] VIEWPORT-PERCENTAGE LENGTH UNITS\n\nDie neuen Viewport Units sind eine praktische und willkommene Erg\xe4nzung zu den\netablierten und l\xf6sen Probleme, die man speziell auf mobilen Ger\xe4ten und ihren\ndynamischen Viewports hat.\n\n[00:32:53] BACKDROP-FILTER\n\nDer Backdrop-Filter hat es Vanessa besonders angetan. Der Backdrop-Filter macht\nf\xfcr Dinge, die hinter einem Element durchscheinen das, was der normale Filter\nf\xfcr Elemente tut. Wir stellen fest, dass man mit Filtern, egal ob\nBackdrop-Filter oder normalem Filter, schnell zu dick auftragen kann. Weniger\nist hier also wieder einmal mehr. Irgendwie kommen wir dann auf die Serie\nShe-Hulk, die Vanessa sehr empfehlen kann.\n\n[00:38:37] INTRINSIC SIZING\n\nAls n\xe4chstes sprechen wir \xfcber die Keywords fit-content, min-content und\nmax-content, die man in width und height einsetzen kann und die ein Element\nabh\xe4ngig von seinem Inhalt dimensionieren, \xe4hnlich wie CSS Flexbox\u2018 flex-basis\noder CSS Grids fit-content()-Funktion. Use-Cases gibt es aber eher wenige.\n\n[00:44:12] ACCENT-COLOR\n\nVanessa liebt accent-color, das zum unkomplizierten \u201eThemen\u201c von Browser-GUI aka\n\u201eReplaced Elements\u201c genutzt werden kann. In manch einem Projekt reicht das\nschon, um die beteiligten Designer*innen gl\xfccklich zu machen, ohne dass man\ngleich Inputs & Co alle in neu (und barrierevoll) nachbauen muss.\n\n[00:48:17] CURRENTCOLOR\n\nZitat aus der \u201eIncomplete List of Mistakes in the Design of CSS\u201c der CSS Working\nGroup:\n\n\n\n> The currentColor keyword should have retained the dash, current-color, as\n> originally specified. Likewise all other color multi-word keyword names.\n\nTats\xe4chlich wird der Fehler des Camelcasens dieses Keywords nun in 2022 endlich\nkorrigiert, allerdings nicht mit einem Bindestrich, sondern durch komplettes\nLowercasen des Wortes. Das hat den Hintergrund, dass CSS gr\xf6\xdftenteils\ncase-insensitive ist und die \xc4nderung so r\xfcckw\xe4rtskompatibel bleibt.\n\n[00:53:36] (GRADIENT) COLOR SPACES\n\nAuf die neuen Farbr\xe4ume in CSS freuen wir uns schon. Die decken nicht nur mehr\nFarbraum ab, als das derzeit verwendete sRGB, sondern sind auch nach einem\npsychovisuellen Modell entwickelt. Und aufgrund ihrer Form erm\xf6glichen die neuen\nFarbr\xe4ume auch deutlich sch\xf6nere Farbverl\xe4ufe.\n\n[00:58:14] CSS SCROLL SNAPPING\n\nNun geht es endlich um das eingangs schon angesprochene CSS Scroll Snapping und\nScrollen und Touchen und wir verweisen auf Adam Argyles irren CSS Caf\xe9 Talk zu\ndem Thema.\n\n[01:03:09] VARIABLE FONTS\n\nObwohl wir schon einige Vortr\xe4ge zu dem Thema gesehen haben, haben wir der\nPraxis noch nicht einen variablen Font zum Einsatz gebracht. Das lohnt sich aber\neigentlich auch erst, wenn man mehr als zwei bis drei Schriftschnitte ben\xf6tigt.\nZudem stellen die variablen Fonts manches Schriften-verarbeitende Tool vor\nProbleme.\n\n[01:08:47] LINE-CLAMP\n\nWir sehen line-clamp, mit dem man Texte nach so und so viel Zeilen abschneiden\nkann, mit gemischten Gef\xfchlen. Einerseits erscheint es uns wie etwas\nunbeholfenes Interface-Design, bei dem st\xf6render Inhalt weichen soll.\nAndererseits finden wir schade, dass wir vom Browser keine R\xfcckmeldung, z.B. in\nForm einer Pseudoklasse haben, wenn Text tats\xe4chlich abgeschnitten wurde. So\nk\xf6nnen wir gestalterisch nicht darauf eingehen und einen Hinweis auf mehr Text\neinblenden.\n\n[01:13:25] FONT-DISPLAY\n\nfont-display stammt aus dem Bem\xfchen, die verschiedenen Verhalten von Browsern\nbeim Anzeigen von Schriften zu vereinheitlichen bzw. einstellbar zu machen.\nfont-display: swap ist hier meist die Einstellung, die man haben m\xf6chte.