Text-Wrap Balance

Das ist ein sehr langer Text der eigentlich umbrechen sollte!! Ohne Text-Wrap

Das ist ein sehr langer Text der eigentlich umbrechen sollte!! Mit Text-Wrap

:has()

div has p

div has no p

:where

User agent styles

Author styles (color: orange; by :is(a.writer) selector, :where has specificity 0 and does not apply color: red;)

Writer styles (color: green; by a.writer selector), :where has specificity 0 and does not apply color: red;

Container-Queries

Card title

Card content

New Colors lab() and lch()

The lab() functional notation expresses a given color in the CIE L*a*b* color space. LAB can be useful in color manipulation and transformation tasks.

The LCH color model stands for Lightness, Chroma, and Hue.

Subgrid usage

Main grid container
grid item and subgrid container
subgrid item

:empty pseudo-class

Element with no content:

Element with comment:

Element with nested empty element:

@media(hover)

Try hovering over me! If the background becomes black your device supports hovering

Your device supports hover

:focus-visible






aspect-ratio not only on images

I'm a 16/9 aspect-ratio baby

:modal and ::backdrop pseudo-class

The background shown outside of this dialog is a backdrop.

The modal itself is using the new 100dvh view port unit

100dvh adapts itself to be either the large or small viewport size.

Logical properties

CSS is really good

Accent-color property