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

Wo wir sind ist vorne.

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

Feedback? Kommentar oder Twitter.

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]

1. 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
2. Container Queries – [00:21:06]
   • MDN / caniuse
   • 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)
3. mix-blend-mode – [00:31:14]
   • MDN / caniuse
   • background-blend-mode: MDN / caniuse
4. color-gamut – [00:36:37]
   • MDN / caniuse
   • Folge 21: 7 Technik-Offenbarungen im Wandel der Zeit
5. perspective – [00:39:32]
   • CSS Tricks
6. 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
7. color() – [00:51:22]
   • Draft / MDN / caniuse
8. @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)
9. color-scheme – [01:02:05]
   • Draft / MDN / caniuse
   • prefers-color-scheme: MDN / caniuse
10. Assembler CSS, Ant Design – [01:06:16]
11. Houdini @property – [01:21:54]
    • MDN / caniuse
12. 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]

Kapitel

1. Intro (00:00:04)

2. Begrüßung (00:00:53)

3. Retro Constantin: WWSIV-Geburtstagsglitzer (00:04:03)

4. Moritz: WWSIV ist immer und überall (00:06:48)

5. Tagesthema: Noch mehr unbekannte CSS-Eigenschaften (00:12:47)

6. 1. Break rules in pages, regions und multicolumn (00:14:48)

7. 2. Container Queries (00:21:06)

8. 3. mix-blend-mode (00:31:14)

9. 4. color-gamut (00:36:37)

10. 5. perspective (00:39:32)

11. 6. Intrinsic Sizing: min-content, max-content, fit-content (00:46:35)

12. 7. color() (00:51:22)

13. 8. @scroll-timeline (00:56:55)

14. 9. color-scheme (01:02:05)

15. 10. Assembler CSS, Ant Design (01:06:16)

16. 11. Houdini @property (01:21:54)

17. 12. CSS Masks, CSS Shapes (Folgen 11 und 21) (01:24:24)

18. GeilTeil: GitHub Copilot (01:26:00)

19. Verabschiedung (01:36:24)