Skip to main content
Shop Talk Show

645: Mouthblogging CSS in 2024

56 min episode · 2 min read

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.

Know someone who'd find this useful?

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.

Browse all Shop Talk Show transcripts →

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 — Free

Keep Reading

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?

Similar Episodes

Related episodes from other podcasts

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 Digest

No credit card · Unsubscribe anytime