What's new in CSS land (JS Party #302)

Changelog Master Feed

Una Kravets, web platform ambassador & lead of the Google Chrome UI Developer Relations Team, joins Amal & Nick to take them CSS to school as they start this podcast in CSS kindergarten and end it with a Level-Up CSS Diploma. (LUCD?)

We explore all the amazing features which have recently landed in CSS — enabling super-charged user experiences with no JavaScript. Don’t forgot to check out all the epic links & demos in the show notes — and hold on to your butts, kids, this one is a ride!

Join the discussion

Changelog++ members support our work, get closer to the metal, and make the ads disappear. Join today!

Sponsors:

• Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
• Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
• Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster!

Featuring:

• Una Kravets – Website, GitHub, Mastodon, X
• Amal Hussein – GitHub, X
• Nick Nisi – Website, GitHub, Mastodon, X

Show Notes:

• What’s new in CSS UI 2023 (the blog post we referenced on the show)
• CSS Podcast - UNA and Adam’s AMAZZZZZZING Podcast - 🙌🏾❤️ Like and Subscribe ❤️🙌🏾
• Igalia
• Bocoup
• Follow Lea Verou and Chris Lilley for CSS Leveling up
• Releasing Color.js: A library that takes color seriously (Lea’s blog post)
• Releasing Color.js (Chris’ blog post)
• Contrast Ratio (a helpful tool to help find the right contract ratios)
• High Definition CSS Color Guide
• What is a color space?
• New color spaces!
• Proposal for “open-stylable” Shadow Roots (aka breaking shadow DOM encapsulation
• CSS Nesting
• Can I Use
• MDN Baseline - a unified view of stable web features
• What are Origin Trials?
• Origin Trials available via Chrome
• Origin Trials available via FireFox
• Origin Trials available via Edge
• “Accessibly blueberry muffin analogy” - Baking Accessibility In (Talk from Cordelia McGee-Tubb)
• “Accessibility is Delicious” - great blog post referencing Cordelia’s talk
• Trigonometric functions in CSS
• nth of syntax
• nth-of-child & nth-of-last-child Codepen demo
• Scoped CSS
• Scoped CSS Codepen demo
• Cascade Layers
• Cascade Layers Codepen demo
• Una’s wonderful YouTube video explaining CSS Cascade Layers
• Popover API
• Anchor positioning
• Scroll driven animations
• Scroll driven animations demo site (scroll-driven-animations.style)
• Container Queries
• Style Queries
• Linear Easing Function MDN
• Create complex animation curves in CSS with the linear() easing function
• Linear Easing Generator (a tool via Jake Archibald)
• View Transitions API
• View Transitions Guide
• View Transitions support in Svelte
• View Transitions support in Astro
• :has() API
• web.dev- Guidance to build modern web experiences that work on any browser
• developer.chrome.com - Simplifying the web to help you build, grow and innovate

Something missing or broken? PRs welcome!

Capitole

1. It's party time, y'all (00:00:00)

2. Welcoming Una back (00:00:56)

3. Quick intro to Una (00:03:02)

4. Una's background (00:07:27)

5. Choose your CSS adventure (00:08:27)

6. Start with color (00:10:06)

7. Foundational stuff (00:16:26)

8. Origin trials (00:20:42)

9. Scoping (00:25:29)

10. Cascade layers (00:28:18)

11. Ordering layers (00:30:02)

12. How !important works (00:33:41)

13. Components (00:37:24)

14. Why now? (00:42:29)

15. Anchor positioning (00:45:46)

16. Interactivity (00:47:43)

17. Container queries (00:52:18)

18. The :has selector (00:56:44)

19. Obligatory AI question (00:59:20)

20. Separating logic & style (01:01:26)

21. Nick's Tailwind tangent (01:08:21)

22. Closing time (01:12:52)

23. Outro (01:13:35)