645: Mouthblogging CSS in 2024
Episode
56 min
Read time
2 min
Topics
Psychology & Behavior, Philosophy & Wisdom, Science & Discovery
AI-Generated Summary
Key Takeaways
- ✓Field-sizing property: Set field-sizing content on textarea, select, and input elements to auto-resize based on content without JavaScript. Works across any font, size, language, or writing mode, replacing complex grid-based workarounds that required invisible divs and JavaScript propagation.
- ✓Height auto animations: Use interpolate-size allow-keywords or calc-size function to animate elements to auto height after a decade of impossible workarounds. Requires CSS opt-in because existing non-working code would break if suddenly functional. Currently Chrome and Safari only, Firefox pending.
- ✓Anchor positioning: Position elements relative to other elements using anchor names and position properties. Includes fallback positioning when space runs out. Polyfill available from Oddbird for Safari and Firefox. Requires understanding view transition names and blocking behavior for consistent cross-page transitions.
- ✓Light-dark function: Declare light and dark color values in single declaration using light-dark function. Requires setting color-scheme property to light dark on root element. Eliminates need for separate dark theme classes, though Safari implementation currently has contrast issues with default hyperlink colors.
What It Covers
Chris Coyier and Dave Rupert review CSS wrapped 2024 from Chrome DevRel, covering major CSS features that shipped including field-sizing, height auto animations, anchor positioning, view transitions, and scroll-driven animations.
Key Questions Answered
- •Field-sizing property: Set field-sizing content on textarea, select, and input elements to auto-resize based on content without JavaScript. Works across any font, size, language, or writing mode, replacing complex grid-based workarounds that required invisible divs and JavaScript propagation.
- •Height auto animations: Use interpolate-size allow-keywords or calc-size function to animate elements to auto height after a decade of impossible workarounds. Requires CSS opt-in because existing non-working code would break if suddenly functional. Currently Chrome and Safari only, Firefox pending.
- •Anchor positioning: Position elements relative to other elements using anchor names and position properties. Includes fallback positioning when space runs out. Polyfill available from Oddbird for Safari and Firefox. Requires understanding view transition names and blocking behavior for consistent cross-page transitions.
- •Light-dark function: Declare light and dark color values in single declaration using light-dark function. Requires setting color-scheme property to light dark on root element. Eliminates need for separate dark theme classes, though Safari implementation currently has contrast issues with default hyperlink colors.
Notable Moment
The hosts realize CSS has achieved nearly all the major features developers requested in 2014, including container queries, parent selectors with has, display animations, and height auto transitions, questioning what major features remain to be built.
Episode Transcript
Hey there. It's up with me. You're listening to another episode of the Shop Talk Show. I'm Dave in the shed. Rupert of miss Chris in the office. Coyer. Hey, Chris. How are you doing? Fantastic. Thanks for having me, Dave. Last week, we did, we did, like, HTML edition because it was it was it was not every year can you do that, really. Like, there's just not that much that changes in HTML year to year, and there was, like, enough to talk about and kinda fill an episode for, and we did it. And then in between the time of recording that and this, Google or the, like, the DevRels over there put out CSS wrapped 2024, which is they've been doing year to year. So I thought we could do we could just do back to back episodes. We just did HTML. Let's do CSS now. Let's do it. Dave's idea. Well, I it's well, Dave's idea, but Adam Argyle did all the work, I think. Well, Chrome DevRel team here did all the work. But Yeah. It looks like it's Bramas and Rachel and Barry Pollard and Una Kravitz. They got the the team at the bottom. The whole squad. Okay. Yeah. But it's but it's very, like, it's a very good site that really sort of shows, you know, everything that's come out. So it's really easy and digestible to be like, oh, yeah. This did happen. So Mhmm. Pretty cool. It's hosted on our favorite website in the world too. If if everybody should go to chrome.dev. It's just an unordered list of links. Yep. The whole thing is and clearly, somebody over there has, like, handed them some power. They're like, here, y'all. If you need a website, here is your website. If you do a thing, just add it to the bottom of the list or the top in this case. I love, we're talking trillion dollar company here or whatever, and, it's like a u l. It's good. Chrome does. No. It is good. I actually don't mind it because it's easy to find stuff, you know. Don't overthink it. Just make a list. It's kinda like, like that CNN lite where it's like that's better than the actual CNN, you know. Yeah. Yeah. Where it's like, oh, this is a good one. About, like, text based email sometimes too. When you, like, just you need to say something to some people, so you just say it with some words and send it rather than wrap it in an HTML table and put a header. That's crazy, dude. Yeah. You know Unsplash? No Unspot? You're just sending emails without Unsplash? Wow. Brave. Brave. Well, it's a beautiful website in itself, of course, and I'm sure, you know, they put in stuff. The site was begging for, like, scroll driven animations, so you can kinda see that going on as you scroll down immediately. Yes, sir. And the, like, pixel font …
Get the full transcript (10,377 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 53-minute episode.
Get Shop Talk Show summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Shop Talk Show
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
Sep 7 · 58 min
The Ezra Klein Show
Will Iran Break Trumpism?
Mar 27
More from Shop Talk Show
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
Aug 31 · 60 min
The Proof
The dietary guidelines great debate | Dr Christoper Gardner and Dr Ty Beal
Mar 16
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
More from Shop Talk Show
We summarize every new episode. Want them in your inbox?
731: Terminal UX, Running Multiple Services, Don’t Settle for an App
730: A/B Testing with Charts, Music Recommendations, & Web Permissions
729: After Dark Edition! Microlighter, Tri-state Drama, and Editing Video Quickly
728: BIMI, Good Favicon Practice, and CSS @Layer Exploration
727: Front-End Complexity, AI Co-Authorship, and New CSS Navigation Patterns
Similar Episodes
Related episodes from other podcasts
The Ezra Klein Show
Mar 27
Will Iran Break Trumpism?
The Proof
Mar 16
The dietary guidelines great debate | Dr Christoper Gardner and Dr Ty Beal
Practical AI
Jan 9
2025 was the year of agents, what's coming in 2026?
The EntreLeadership Podcast
Dec 29
The Best Calls of 2025
The Diary of a CEO
Dec 29
Chris Williamson: If You Don't Fix This Now, 2026 Is Already Over!
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
You're clearly into Shop Talk Show.
Every Monday, we deliver AI summaries of the latest episodes from Shop Talk Show and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime