10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)

Es war wieder "State of CSS"-Time! Kennst du schon "break-before", "mix-blend-mode", "@scroll-timeline" und weißt wie Container Queries funktionieren? Wie steht’s mit "color-gamut", "perspective" oder Intrinsic Sizing mit z.B. "fit-content"? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die "17 CSS-Eigenschaften, die wir noch nicht kannten" mochte, wird diese Folge LIEBEN! ❤️

Wir haben dich gut unterhalten? Unterstütze uns mit einer Spende ♥

Feedback? Kommentar oder Mastodon.

Es war wieder "State of CSS"-Time! Kennst du schon "break-before", "mix-blend-mode", "@scroll-timeline" und weißt wie Container Queries funktionieren? Wie steht’s mit "color-gamut", "perspective" oder Intrinsic Sizing mit z.B. "fit-content"? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die "17 CSS-Eigenschaften, die wir noch nicht kannten" mochte, wird diese Folge LIEBEN! ❤️

Begrüßung – [00:00:53]

Retro

Constantin: WWSIV-Geburtstagsglitzer – [00:04:03]

„Geburtstagsstream! 2 Jahre #WWSIV!“ auf YouTube: Teil 1, Teil 2

Moritz: WWSIV ist immer und überall – [00:06:48]

Tagesthema: Noch mehr unbekannte CSS-Eigenschaften – [00:12:47]

Break rules in pages, regions und multicolumn – [00:14:48]

break-before: MDN / caniuse

break-inside: MDN / caniuse

break-after: MDN / caniuse / Demo-PDF / CodePen-Demo

Container Queries – [00:21:06]

MDN / caniuse

<custom-ident>

CodePen: Demo-Collection / Demo 1 / Demo 2 (nur in Chromium-Browsern mit gesetztem Flag!)

Folge 11: Jäger der verlorenen CSS-Features – Kapitel II

Folge 17: TIL: TTL (Tagged Template Literals)

mix-blend-mode – [00:31:14]

MDN / caniuse

background-blend-mode: MDN / caniuse

color-gamut – [00:36:37]

MDN / caniuse

Folge 21: 7 Technik-Offenbarungen im Wandel der Zeit

perspective – [00:39:32]

CSS Tricks

Intrinsic Sizing: min-content, max-content, fit-content – [00:46:35]

Intrinsic & Extrinsic Sizing: caniuse

block-size: MDN

writing-mode: Folge 28: 17 CSS-Eigenschaften, die wir noch nicht kannten

min-content: MDN / caniuse

max-content: MDN / caniuse

fit-content: MDN / caniuse

fint-content(): MDN / caniuse

color() – [00:51:22]

Draft / MDN / caniuse

@scroll-timeline – [00:56:55]

caniuse

Folge 11: Jäger der verlorenen CSS-Features – Kapitel II

GSAP mit ScrollTrigger plugin

Use-cases bei CSS-Tricks

The Future of CSS: Scroll-Linked Animations with @scroll-timeline: Part 1 / Part 2

CodePen-Demo (nur mit experimental web platform features flag)

color-scheme – [01:02:05]

Draft / MDN / caniuse

prefers-color-scheme: MDN / caniuse

Assembler CSS, Ant Design – [01:06:16]

Houdini @property – [01:21:54]

MDN / caniuse

CSS Masks, CSS Shapes (Folgen 11 und 21) – [01:24:24]

mask-image: Folge 11: Jäger der verlorenen CSS-Features – Kapitel II

CSS Shapes: Folge 21: 7 Technik-Offenbarungen im Wandel der Zeit

GeilTeil – [01:26:00]

Verabschiedung – [01:36:24]