Revision 590: State of CSS, Teil 2 von 2

Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse

veröffentlicht, und wie es sich für einen anständigen Frontend-Podcast gehört,

tun auch wir unsere Gedanken dazu kund. Schepp und Peter führen in diesem

zweiten Teil zu Ende, was sie zwei Wochen zuvor mit Vanessa begonnen haben.

UNSER SPONSOR

Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie

wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die

Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und

Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,

benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server

selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs

kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen

Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade

beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine

Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet

bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.

Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein

erstes Projekt!

SCHAUNOTIZEN

[00:03:36] DIE COLOR()-FUNCTION

Die color()-Function soll in Zukunft all die einzelnen Farbräumen und

Farbraummodellen gewidmeten CSS-Funktionen wie rgb() oder hsl() ersetzen. Denn

es drängen immer mehr Farbräume, und in deren Windschatten auch immer mehr

Farbraummodelle für den Zugriff darauf in unsere Browser: Display p3, LAB, LCH,

okLAB und okLCH.

[00:09:44] INTERPOLATION COLORSPACES

Auch für das Aussehen von Farbverläufen spielt die Wahl des Farbmodells eine

große Rolle. Wir reden darüber, dass okLAB und okLCH verbesserte Versionen der

nicht-„ok“-Versionen sind, bei denen verschiedene Parameter für die menschliche

Wahrnehmung von Farben angepasst sind, wodurch verschiedene Farben mit gleicher

im Programmcode eingestellter Sättigung und Helligkeit auch in der Praxis eine

vergleichbare Sättigung und Helligkeit aufweisen.

[00:14:22] RELATIVE COLORS

Die CSS Color Spec führt in Level 5 mit Hilfe der Relative Color Syntax die

Möglichkeit ein, Farben im Grunde genommen zu destrukturieren und neu

zusammenzusetzen. Sehr praktisch für Design-Systeme!

[00:15:58] IST CSS EINE PROGRAMMIERSPRACHE?

Weil wir sind, wie wir sind, schweifen wir an dieser Stelle ab und befassen uns

mit der Frage, ob CSS denn nun eine Programmiersprache ist, oder nicht. Dafür

spricht, dass es in CSS zunehmend Features gibt, die man eher von einer

Programmiersprache erwarten würde, wie ineinander schachtelbare Funktionen,

Trigonometrische Funktionen, gehackte oder echte toggle()-Funktionen. Sicher

sind wir uns darin, dass CSS nicht trivial zu beherrschen ist und dass auch ein

ganz eigenes Gedankenmodell erfordert.

[00:33:40] ACCENT-COLOR

accent-color ist ein sehr billiges und nicht störendes Werkzeug, um analog zu

typografischen Anpassungen Interfaces gleich ein bisschen netter zu machen. Es

scheinen nur nicht ganz so viele Umfrageteilnehmer zu kennen.

[00:35:44] INTERACTIONS

In der Umfrage haben Themen wie Scrollen, Swipen und Pinchen ein eigenes Kapitel

namens „Interactions“ spendiert bekommen. Wir sind große Fans von CSS Scroll

Snapping und wissen zu berichten, dass eine weitere Ausbaustufe mit so Dingen,

wie der :snapped-Pseudoklasse oder neuen Snap-Events ansteht. Adam Argyle, der

daran federführend arbeitet, hat auf dem CSS Day 2022 einen tollen Vortrag mit

sehr beeindruckenden Demos über den Themenkomplex gehalten.

Wir erwähnen außerdem lobend die Eigenschaft overscroll-behavior, die

sogenanntes „Scroll-Chaining“ verhindert, also dass wenn man z.B. ein Overlay

bis zum Schluss gescrollt hat und man dann weiterscrollt, das Dokument dahinter

auf einmal anfängt zu scrollen. Außerdem lässt sich damit verhindern, dass beim

Scrollen ungewollt ein Gesten-Shortcut des Browsers aufgelöst wird.

[00:50:51] SCROLLBAR-GUTTER

Mit scrollbar-gutter könnt Ihr bei fehlenden Scrollbars Platz für ein späteres

Erscheinen dieser freihalten. Sinnvoll ist das bei SPA und MPAs, bei denen man

zwischen Ansichten hin und her navigiert, die mal viel Inhalt und mal wenig

Inhalt haben. Das Auftauchen und Verschwinden der Scrollbars führt dann zu einem

Springen der Inhalte, was ihr eben mit scrollbar-gutter verhindern könnt.

[00:55:11] VARIABLE FONTS

Wir sind uns darin einig, dass wir die Möglichkeiten moderner Schriftformate

toll finden. Schepp empfiehlt zu dem Thema einen super Vortrag von Ulrike Rausch

auf der beyond tellerrand. Peter wiederum berichtet von seiner Entdeckung der

CSS-Eigenschaft font-variant-numeric. Um herauszufinden, welche Features ein

spezifischer Font unterstützt, empfehlen wie die Online-Tools FontDrop! und

Wakamai Fondue. Bei Einbinden von Fonts gibt es zukünftig noch eine Reihe mehr

Möglichkeiten, an die Fähigkeiten des Browsers angepasste Schriftformate

einzubinden, z.B. für Color Fonts.

[01:05:20] TEXT-WRAP

Mit text-wrap: balance lässt sich festlegen, dass wenn Text umgebrochen wird, er

gleich so umgebrochen wird, dass sich zwischen beiden Zeilen eine ausgewogene

Zeilenlänge ergibt. Es werden also mehrere Wörter in die nächste Zeile genommen

und nicht nur das eine, das die Zeilenlänge gesprengt hat. Dieses Setting ist

gut für Überschriften geeignet, auch weil es aus Performancegründen nur bis zu

einer Zeilenzahl von drei Zeilen unterstützt wird. Neu hinzu kommt text-wrap:

pretty, das in Fließtexten verhindert, dass ein einzelnes Wort alleine in der

letzten Zeile steht („orphan“). Weil Text-Layout so unglaublich Komplex ist,

verweisen wir nochmal auf die unglaublich interessante Igalia Chats Episode

„First Person Scrollers“.

[01:12:02] :FOCUS-VISIBLE

Und weil wir gerade dabei sind und es passt, verweisen wir in Sachen

:focus-visible und dessen Komplexität bei der Umsetzung auf die Igalia Chats

Episode „The history of :focus-visible and inert“. Die

:focus-visible-Pseudoklasse bietet Euch dei Möglichkeit, Fokus-Outlines, auch

Focus-Rings genannt, nur dann sichtbar werden zu lassen, wenn jemand die Seite

mit einem Eingabegerät bedient, das diese erforderlich macht. Anders als die

meisten Steak-Halter von Webprojekten draußen in der Welt, findet Peter diese

Fokus-Anzeige super hilfreich.

[01:16:07] OTHER

Das Kapitel namens „Other“ lässt uns auf CSS Houdini und seine vielen großen

Pläne kommen, die sich aber bislang nicht manifestiert haben, wie z.B. die CSS

Parser API oder Custom Selectors, mit denen Peter einige seiner Probleme im

Zusammenspiel mit Custom Elements lösen könnte. Immerhin gibt es @property und

das finden wir sehr praktisch, auch wenn Peter sich daran stört, dass Firefox es

immer noch nicht freigeschaltet hat. Da es aber Teil des InterOp 2023 Projektes

ist, müsste es eigentlich bis Ende diesen Jahres shippen.

[01:23:08] TOOLS: PRE- & POST-PROCESSORS

Peter erzählt, dass er sein CSS durch keinerlei Mangel mehr dreht, seien es Pre-

oder Post-Prozessoren. Allerdings nutzt er gerne Parcel als Bundler und so wäre

es möglich, dass das noch irgendeine Form der Magie betreibt, die ihm entgeht.

Irgendwie kommen wir dadurch auf @scope zu sprechen, das es möglich macht/machen

wird, dass CSS Selektoren nur noch auf bestimmte Teilbereiche des DOM Baums

einwirken. Damit wird man in Zukunft Style-Encapsulation lösen und alle anderen

Krücken werden hinfällig.

[01:27:00] @LAYER

Von @scope geht es zu @layer. Allerdings nicht ohne einen erneuten Abschweifer,

diesmal über SASS‘ @extend– und CSS-Kompressoren-Fallstricke. Beide haben mit

@layer allerdings wenig am Hut. Mit @layer lässt das eigene CSS in verschieden

„Starke“ Gruppen einteilen, was es ermöglicht, einer Library Default-Styles

mitzugeben, die dessen Anwender ohne Spezifitätsverrenkungen verändern können.

Peter sieht es auch als hilfreiches Werkzeug, um Legacy-CSS nach und nach auf

einen modernen Stand zu bringen. Allerdings würden wir beide von einem breiten

Einsatz eher abraten, denn anders als bei manch anderer Neuerung in CSS, lässt

ein Einsatz von @layer alte Browser Schiffbruch erleiden. Ähnlich wie es beim

CSS Nesting auch der Fall ist.

[01:37:12] CSS USAGE

Als vorletztes werfen wir einen Blick auf die Auswertungen zum Thema „CSS

Usage“. Hier zeigt sich, dass die meisten Antwortenden CSS im Kontext von Web

Apps / SPAs einsetzen. Aber es werden auch sehr viele Design-Systeme damit

konstruiert. Am wenigsten wird CSS im Bereich „Art and Illustration“ eingesetzt,

was Peter zumindest in Sachen computergenerierter Kunst gut nachvollziehen kann.

Denn es fehlt einfach an einer guten programmatischen API für CSS. Das CSS

Object Model sollte diese Rolle ja ursprünglich mal ausfüllen, kann die

Erwartungen aber auch nicht erfüllen. Aber auch die Alternative SVG hat ihre

Macken, und so stehen wir im Grunde mit eher leeren Händen da.

[01:40:10] BROWSER INCOMPATIBILITIES

Abschließend schauen wir noch auf die Liste an Features, die die Antwortenden

sich noch nicht trauen zu verwenden. Ganz vorne dabei sind :has() und Container

Queries, was zusammen mit dem in der Liste auftauchenden @property auf eine

gewisse Problembärigkeit des Firefox‘ hinweist.

Insgesamt kommen wir aber beide zu dem Schluss, dass wir mit den aktuellen

Möglichkeiten von CSS und den Browsern sehr sehr sehr zufrieden sind! Und

oftmals ist es ja auch so, dass man manches Vorhaben vielleicht auch ohne

direkten Weg durch Missbrauch anderer, schon vorhandener CSS Features erreichen

kann. Schepp fällt da zum Beispiel Roman Komarov ein, der mit CSS Scroll Driven

Animations als Steigbügelhalter zahlreiche seiner CSS-Wünsche erfüllen konnte.

Wir loben außerdem die tolle Spec-Arbeit der CSS Working Group und auch die

große Menge Tests, die in den letzten 10 Jahren für all diese Features

geschrieben wurden. Und weil guter Dinge drei sind, empfiehlt Schepp nochmal

eine Igalia Chats Episode, nämlich die Folge „The Novel Engines: Ladybird„, in

der Andreas Kling darüber berichtet wie er eine komplett neue Browser-Engine

geschrieben hat und die Specs und Tests als Grund nennt, wie er das geschafft

hat.

Good times ahead!