Die alljährliche Umfrage zum State of CSS haben Vanessa und Schepp herangezogen, um über die dort aufgeführten brandneuen oder auch nicht mehr so neuen, aber dennoch interessanten CSS Features zu sprechen. Dies ist Teil eins von zwei Teilen.
gap
Property for Flexboxgap
, welches neben CSS Flexbox auch von CSS Grid und (außer in Safari) CSS Multicolumn unterstützt wird, super praktisch ist.content-visibility
content-visibility
ist das anders. Das lässt sich trotz geringem Browser-Support super in Form von „Progressive Enhancement“ einbauen. Letztlich ist das nichts anderes als Lazy Rendering von Elementen.@container
@supports
ja gut herausbekommen kann.backdrop-filter
fit-content
, min-content
und max-content
, die man in width
und height
einsetzen kann und die ein Element abhängig von seinem Inhalt dimensionieren, ähnlich wie CSS Flexbox‘ flex-basis
oder CSS Grids fit-content()
-Funktion. Use-Cases gibt es aber eher wenige.accent-color
accent-color
, das zum unkomplizierten „Themen“ von Browser-GUI aka „Replaced Elements“ genutzt werden kann. In manch einem Projekt reicht das schon, um die beteiligten Designer*innen glücklich zu machen, ohne dass man gleich Inputs & Co alle in neu (und barrierevoll) nachbauen muss.The currentColor keyword should have retained the dash, current-color, as originally specified. Likewise all other color multi-word keyword names.
Tatsächlich wird der Fehler des Camelcasens dieses Keywords nun in 2022 endlich korrigiert, allerdings nicht mit einem Bindestrich, sondern durch komplettes Lowercasen des Wortes. Das hat den Hintergrund, dass CSS größtenteils case-insensitive ist und die Änderung so rückwärtskompatibel bleibt.
line-clamp
line-clamp
, mit dem man Texte nach so und so viel Zeilen abschneiden kann, mit gemischten Gefühlen. Einerseits erscheint es uns wie etwas unbeholfenes Interface-Design, bei dem störender Inhalt weichen soll. Andererseits finden wir schade, dass wir vom Browser keine Rückmeldung, z.B. in Form einer Pseudoklasse haben, wenn Text tatsächlich abgeschnitten wurde. So können wir gestalterisch nicht darauf eingehen und einen Hinweis auf mehr Text einblenden.font-display
font-display
stammt aus dem Bemühen, die verschiedenen Verhalten von Browsern beim Anzeigen von Schriften zu vereinheitlichen bzw. einstellbar zu machen. font-display: swap
ist hier meist die Einstellung, die man haben möchte.