BROADCASTS.com

Die allj\xe4hrliche CSS-Umfrage \u201eState of CSS\u201c hat ihre 2023er-Ergebnisse\nver\xf6ffentlicht, und wie es sich f\xfcr einen anst\xe4ndigen Frontend-Podcast geh\xf6rt,\ntun auch wir unsere Gedanken dazu kund. Schepp und Peter f\xfchren in diesem\nzweiten Teil zu Ende, was sie zwei Wochen zuvor mit Vanessa begonnen haben.\n\n\nUNSER SPONSOR\n\n\n\nMaximale Performance f\xfcr all deine Projekte? Bei mittwald brauchst du dir nie\nwieder Sorgen um Performance-Einbr\xfcche machen. Der Traffic kann ruhig durch die\nDecke gehen, deine Seite bleibt immer rasend schnell.\n\nmittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und\nWorkloads von Agenturen und Freelancern optimiert \u2013 inklusive Infrastruktur,\nbenutzerfreundlicher Oberfl\xe4che und flexiblen Tarifen. Egal, ob du deinen Server\nselbst konfigurieren m\xf6chtest oder das mittwald-Team sich um die optimalen Specs\nk\xfcmmern soll. Der pers\xf6nliche Kundenservice unterst\xfctzt dich 24/7 bei allen\nFragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade\nbesch\xe4ftigt. Im firmeneigenen und T\xdcV-zertifizierten Rechenzentrum sind deine\nDaten in sicheren H\xe4nden. Und das Beste? Wer seine Projekte bei mittwald hostet\nbekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.\nAlso, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein\nerstes Projekt!\n\n\nSCHAUNOTIZEN\n\n[00:03:36] DIE COLOR()-FUNCTION\n\nDie color()-Function soll in Zukunft all die einzelnen Farbr\xe4umen und\nFarbraummodellen gewidmeten CSS-Funktionen wie rgb() oder hsl() ersetzen. Denn\nes dr\xe4ngen immer mehr Farbr\xe4ume, und in deren Windschatten auch immer mehr\nFarbraummodelle f\xfcr den Zugriff darauf in unsere Browser: Display p3, LAB, LCH,\nokLAB und okLCH.\n\n[00:09:44] INTERPOLATION COLORSPACES\n\nAuch f\xfcr das Aussehen von Farbverl\xe4ufen spielt die Wahl des Farbmodells eine\ngro\xdfe Rolle. Wir reden dar\xfcber, dass okLAB und okLCH verbesserte Versionen der\nnicht-\u201eok\u201c-Versionen sind, bei denen verschiedene Parameter f\xfcr die menschliche\nWahrnehmung von Farben angepasst sind, wodurch verschiedene Farben mit gleicher\nim Programmcode eingestellter S\xe4ttigung und Helligkeit auch in der Praxis eine\nvergleichbare S\xe4ttigung und Helligkeit aufweisen.\n\n[00:14:22] RELATIVE COLORS\n\nDie CSS Color Spec f\xfchrt in Level 5 mit Hilfe der Relative Color Syntax die\nM\xf6glichkeit ein, Farben im Grunde genommen zu destrukturieren und neu\nzusammenzusetzen. Sehr praktisch f\xfcr Design-Systeme!\n\n[00:15:58] IST CSS EINE PROGRAMMIERSPRACHE?\n\nWeil wir sind, wie wir sind, schweifen wir an dieser Stelle ab und befassen uns\nmit der Frage, ob CSS denn nun eine Programmiersprache ist, oder nicht. Daf\xfcr\nspricht, dass es in CSS zunehmend Features gibt, die man eher von einer\nProgrammiersprache erwarten w\xfcrde, wie ineinander schachtelbare Funktionen,\nTrigonometrische Funktionen, gehackte oder echte toggle()-Funktionen. Sicher\nsind wir uns darin, dass CSS nicht trivial zu beherrschen ist und dass auch ein\nganz eigenes Gedankenmodell erfordert.\n\n[00:33:40] ACCENT-COLOR\n\naccent-color ist ein sehr billiges und nicht st\xf6rendes Werkzeug, um analog zu\ntypografischen Anpassungen Interfaces gleich ein bisschen netter zu machen. Es\nscheinen nur nicht ganz so viele Umfrageteilnehmer zu kennen.\n\n[00:35:44] INTERACTIONS\n\nIn der Umfrage haben Themen wie Scrollen, Swipen und Pinchen ein eigenes Kapitel\nnamens \u201eInteractions\u201c spendiert bekommen. Wir sind gro\xdfe Fans von CSS Scroll\nSnapping und wissen zu berichten, dass eine weitere Ausbaustufe mit so Dingen,\nwie der :snapped-Pseudoklasse oder neuen Snap-Events ansteht. Adam Argyle, der\ndaran federf\xfchrend arbeitet, hat auf dem CSS Day 2022 einen tollen Vortrag mit\nsehr beeindruckenden Demos \xfcber den Themenkomplex gehalten.\n\n\n\nWir erw\xe4hnen au\xdferdem lobend die Eigenschaft overscroll-behavior, die\nsogenanntes \u201eScroll-Chaining\u201c verhindert, also dass wenn man z.B. ein Overlay\nbis zum Schluss gescrollt hat und man dann weiterscrollt, das Dokument dahinter\nauf einmal anf\xe4ngt zu scrollen. Au\xdferdem l\xe4sst sich damit verhindern, dass beim\nScrollen ungewollt ein Gesten-Shortcut des Browsers aufgel\xf6st wird.\n\n[00:50:51] SCROLLBAR-GUTTER\n\nMit scrollbar-gutter k\xf6nnt Ihr bei fehlenden Scrollbars Platz f\xfcr ein sp\xe4teres\nErscheinen dieser freihalten. Sinnvoll ist das bei SPA und MPAs, bei denen man\nzwischen Ansichten hin und her navigiert, die mal viel Inhalt und mal wenig\nInhalt haben. Das Auftauchen und Verschwinden der Scrollbars f\xfchrt dann zu einem\nSpringen der Inhalte, was ihr eben mit scrollbar-gutter verhindern k\xf6nnt.\n\n[00:55:11] VARIABLE FONTS\n\nWir sind uns darin einig, dass wir die M\xf6glichkeiten moderner Schriftformate\ntoll finden. Schepp empfiehlt zu dem Thema einen super Vortrag von Ulrike Rausch\nauf der beyond tellerrand. Peter wiederum berichtet von seiner Entdeckung der\nCSS-Eigenschaft font-variant-numeric. Um herauszufinden, welche Features ein\nspezifischer Font unterst\xfctzt, empfehlen wie die Online-Tools FontDrop! und\nWakamai Fondue. Bei Einbinden von Fonts gibt es zuk\xfcnftig noch eine Reihe mehr\nM\xf6glichkeiten, an die F\xe4higkeiten des Browsers angepasste Schriftformate\neinzubinden, z.B. f\xfcr Color Fonts.\n\n[01:05:20] TEXT-WRAP\n\nMit text-wrap: balance l\xe4sst sich festlegen, dass wenn Text umgebrochen wird, er\ngleich so umgebrochen wird, dass sich zwischen beiden Zeilen eine ausgewogene\nZeilenl\xe4nge ergibt. Es werden also mehrere W\xf6rter in die n\xe4chste Zeile genommen\nund nicht nur das eine, das die Zeilenl\xe4nge gesprengt hat. Dieses Setting ist\ngut f\xfcr \xdcberschriften geeignet, auch weil es aus Performancegr\xfcnden nur bis zu\neiner Zeilenzahl von drei Zeilen unterst\xfctzt wird. Neu hinzu kommt text-wrap:\npretty, das in Flie\xdftexten verhindert, dass ein einzelnes Wort alleine in der\nletzten Zeile steht (\u201eorphan\u201c). Weil Text-Layout so unglaublich Komplex ist,\nverweisen wir nochmal auf die unglaublich interessante Igalia Chats Episode\n\u201eFirst Person Scrollers\u201c.\n\n[01:12:02] :FOCUS-VISIBLE\n\nUnd weil wir gerade dabei sind und es passt, verweisen wir in Sachen\n:focus-visible und dessen Komplexit\xe4t bei der Umsetzung auf die Igalia Chats\nEpisode \u201eThe history of :focus-visible and inert\u201c. Die\n:focus-visible-Pseudoklasse bietet Euch dei M\xf6glichkeit, Fokus-Outlines, auch\nFocus-Rings genannt, nur dann sichtbar werden zu lassen, wenn jemand die Seite\nmit einem Eingabeger\xe4t bedient, das diese erforderlich macht. Anders als die\nmeisten Steak-Halter von Webprojekten drau\xdfen in der Welt, findet Peter diese\nFokus-Anzeige super hilfreich.\n\n[01:16:07] OTHER\n\nDas Kapitel namens \u201eOther\u201c l\xe4sst uns auf CSS Houdini und seine vielen gro\xdfen\nPl\xe4ne kommen, die sich aber bislang nicht manifestiert haben, wie z.B. die CSS\nParser API oder Custom Selectors, mit denen Peter einige seiner Probleme im\nZusammenspiel mit Custom Elements l\xf6sen k\xf6nnte. Immerhin gibt es @property und\ndas finden wir sehr praktisch, auch wenn Peter sich daran st\xf6rt, dass Firefox es\nimmer noch nicht freigeschaltet hat. Da es aber Teil des InterOp 2023 Projektes\nist, m\xfcsste es eigentlich bis Ende diesen Jahres shippen.\n\n[01:23:08] TOOLS: PRE- & POST-PROCESSORS\n\nPeter erz\xe4hlt, dass er sein CSS durch keinerlei Mangel mehr dreht, seien es Pre-\noder Post-Prozessoren. Allerdings nutzt er gerne Parcel als Bundler und so w\xe4re\nes m\xf6glich, dass das noch irgendeine Form der Magie betreibt, die ihm entgeht.\nIrgendwie kommen wir dadurch auf @scope zu sprechen, das es m\xf6glich macht/machen\nwird, dass CSS Selektoren nur noch auf bestimmte Teilbereiche des DOM Baums\neinwirken. Damit wird man in Zukunft Style-Encapsulation l\xf6sen und alle anderen\nKr\xfccken werden hinf\xe4llig.\n\n[01:27:00] @LAYER\n\nVon @scope geht es zu @layer. Allerdings nicht ohne einen erneuten Abschweifer,\ndiesmal \xfcber SASS\u2018 @extend\u2013 und CSS-Kompressoren-Fallstricke. Beide haben mit\n@layer allerdings wenig am Hut. Mit @layer l\xe4sst das eigene CSS in verschieden\n\u201eStarke\u201c Gruppen einteilen, was es erm\xf6glicht, einer Library Default-Styles\nmitzugeben, die dessen Anwender ohne Spezifit\xe4tsverrenkungen ver\xe4ndern k\xf6nnen.\nPeter sieht es auch als hilfreiches Werkzeug, um Legacy-CSS nach und nach auf\neinen modernen Stand zu bringen. Allerdings w\xfcrden wir beide von einem breiten\nEinsatz eher abraten, denn anders als bei manch anderer Neuerung in CSS, l\xe4sst\nein Einsatz von @layer alte Browser Schiffbruch erleiden. \xc4hnlich wie es beim\nCSS Nesting auch der Fall ist.\n\n[01:37:12] CSS USAGE\n\nAls vorletztes werfen wir einen Blick auf die Auswertungen zum Thema \u201eCSS\nUsage\u201c. Hier zeigt sich, dass die meisten Antwortenden CSS im Kontext von Web\nApps / SPAs einsetzen. Aber es werden auch sehr viele Design-Systeme damit\nkonstruiert. Am wenigsten wird CSS im Bereich \u201eArt and Illustration\u201c eingesetzt,\nwas Peter zumindest in Sachen computergenerierter Kunst gut nachvollziehen kann.\nDenn es fehlt einfach an einer guten programmatischen API f\xfcr CSS. Das CSS\nObject Model sollte diese Rolle ja urspr\xfcnglich mal ausf\xfcllen, kann die\nErwartungen aber auch nicht erf\xfcllen. Aber auch die Alternative SVG hat ihre\nMacken, und so stehen wir im Grunde mit eher leeren H\xe4nden da.\n\n[01:40:10] BROWSER INCOMPATIBILITIES\n\nAbschlie\xdfend schauen wir noch auf die Liste an Features, die die Antwortenden\nsich noch nicht trauen zu verwenden. Ganz vorne dabei sind :has() und Container\nQueries, was zusammen mit dem in der Liste auftauchenden @property auf eine\ngewisse Problemb\xe4rigkeit des Firefox\u2018 hinweist.\n\n\n\nInsgesamt kommen wir aber beide zu dem Schluss, dass wir mit den aktuellen\nM\xf6glichkeiten von CSS und den Browsern sehr sehr sehr zufrieden sind! Und\noftmals ist es ja auch so, dass man manches Vorhaben vielleicht auch ohne\ndirekten Weg durch Missbrauch anderer, schon vorhandener CSS Features erreichen\nkann. Schepp f\xe4llt da zum Beispiel Roman Komarov ein, der mit CSS Scroll Driven\nAnimations als Steigb\xfcgelhalter zahlreiche seiner CSS-W\xfcnsche erf\xfcllen konnte.\nWir loben au\xdferdem die tolle Spec-Arbeit der CSS Working Group und auch die\ngro\xdfe Menge Tests, die in den letzten 10 Jahren f\xfcr all diese Features\ngeschrieben wurden. Und weil guter Dinge drei sind, empfiehlt Schepp nochmal\neine Igalia Chats Episode, n\xe4mlich die Folge \u201eThe Novel Engines: Ladybird\u201e, in\nder Andreas Kling dar\xfcber berichtet wie er eine komplett neue Browser-Engine\ngeschrieben hat und die Specs und Tests als Grund nennt, wie er das geschafft\nhat.\n\nGood times ahead!