What's new in CSS land

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!

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!

Leave us a comment

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 – Mastodon, Twitter, GitHub, WebsiteAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, Website

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!