Revision 633: State of CSS 2024, Teil 1/3
Neues Jahr, neue State of CSS-Umfrage! Wir ziehen sie mittlerweile zum vierten Mal in Folge heran, um über die neusten Errungenschaften bei der Gestaltung von Web-Oberflächen zu sprechen. Und weil das ziemlich viel ist, teilen wir das ganze wie zuletzt auch in mehrere Teile und arbeiten uns Stück für Stück durch die einzelnen Kapitel der Umfrage. Dies ist Teil eins.
Schaunotizen
- [00:02:20] Layout
- Wir beginnen mit der Frage, wann man Flex und wann Grid einsetzt und uns kommt dabei ein Vortrag von Kevin Powell in den Sinn, in dem er genau das bespricht. Sodann geht es um Subgrids und wie diese schon von Anfang an für die Grid-Spec in Planung waren, dank des unermüdlichen Einsatzes von Rachel Andrew. Als Ressourcen, um Grid spielerisch zu lernen, empfehlen wir…
Und um *wirklich* zu verstehen, was bei Flex und Grid hinter den Kulissen abgeht, empfehlen wir den ziemlich „deepen“ Talk „Demystify Modern CSS Layouts with DevTools“ von Hui Jing Chen.
Dann sprechen wir kurz über das sehr praktische
margin-trim, um im Anschluss zunächst über Anchor Positioning und schließlich über Style Queries und State Queries zu sprechen. - [00:44:00] Shapes & Graphics
- Dieses Kapitel ist eine wilde gemischte Tüte. Wir sprechen zunächst über die gar nicht mehr so neuen Blend Modes und Backdrop-Filter, allerdings führt uns das zum Thema des „Forced Colors Mode“ und wie man dort manche Überraschung erlebt.
Als nächstes widmen wir uns den neuen Linear-Easing-Functions, welche uns bei Transitions und Animations völlig neue Möglichkeiten eröffnen und gleichzeitig ein ziemlich cooler „Hack“ sind.
Schließlich sprechen wir über Intrinsic-Sizes in Form von
min-content,max-content,fit-content. - [01:05:04] Colors
- Das letzte Kapitel, über das wir in Teil eins sprechen, dreht sich um all die Neuerungen im Bereich Farben. Das sind einerseits neue Funktionen, wie die
color()-Funktion, die das Adressieren von Farbräumen und -modellen vereinheitlicht.Anschließend sprechen wir kurz über
accent-color, mit dem man den Look von Formularelementen schnell und unkompliziert der eigenen Farbwelt näher bringt.Wir reden über Wide Gamut Colors, also Farben, die einem umfangreicheren Farbraum entstammen, als ihn das altehrwürdige sRGB bietet. Man höre dazu auch unsere Folge Revision 623: Farben und Farbräume.
Zu guter Letzt sprechen wir über die Relative Color Syntax, die eine neue Syntax für Farbangaben darstellt, mit der man Varianten bestehender Farben erzeugen kann. Damit eignet sie sich besonders gut, um mit ihr Design Systeme automatisiert auf Basis von Grundfarben zu erzeugen.
Links
- Windy
- Browser-Erweiterung, mit der man jede Webseite nach TailwindCSS transformieren kann.
- CSS Café
- Ein mehrmals im Jahr tagendes, von Schepp mitveranstaltetes Online-Meetup zum Thema CSS