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 ❤️🙌🏾IgaliaBocoupFollow Lea Verou and Chris Lilley for CSS Leveling upReleasing 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 GuideWhat is a color space?New color spaces!Proposal for “open-stylable” Shadow Roots (aka breaking shadow DOM encapsulationCSS NestingCan I UseMDN Baseline - a unified view of stable web featuresWhat are Origin Trials?Origin Trials available via ChromeOrigin Trials available via FireFoxOrigin 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 talkTrigonometric functions in CSSnth of syntaxnth-of-child & nth-of-last-child Codepen demoScoped CSSScoped CSS Codepen demoCascade LayersCascade Layers Codepen demoUna’s wonderful YouTube video explaining CSS Cascade LayersPopover APIAnchor positioningScroll driven animationsScroll driven animations demo site (scroll-driven-animations.style)Container QueriesStyle QueriesLinear Easing Function MDNCreate complex animation curves in CSS with the linear() easing functionLinear Easing Generator (a tool via Jake Archibald)View Transitions APIView Transitions GuideView Transitions support in SvelteView Transitions support in Astro:has() APIweb.dev- Guidance to build modern web experiences that work on any browserdeveloper.chrome.com - Simplifying the web to help you build, grow and innovateSomething missing or broken? PRs welcome!