> Canonical URL: https://codingcat.dev/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond

# Adam Argyle Presents CSS Features for 2023 and beyond!

🎧 Podcast Episode · S3E14May 31, 2023

# Adam Argyle Presents CSS Features for 2023 and beyond!

![](https://cdn.sanity.io/images/hfh83o0w/production/31db41f81b50703c568a970a26ac96659a869f21-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/images/hfh83o0w/production/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Adam Argyle](https://cdn.sanity.io/images/hfh83o0w/production/d099a598f8869fd68695d3ca430da0c6cf6519c9-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Adam Argyle](/guest/adam-argyle)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/2bhJfSymEtb9KHpSVVPOVf)[Apple](https://podcasts.apple.com/us/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond/id1491655542?i=1000615104091)[YouTube](https://youtu.be/RxVJ2Oj1IWk)[Pocket Casts](https://pca.st/episode/45795417-2608-4c38-bad3-db92966e256f)[Castbox](https://castbox.fm/episode/id2508485-id600148228)[Castro](https://castro.fm/episode/7mJ2ej)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/1564a576c0c19e1b857c9bfba3cfb6364e7af223-2400x1350.jpg?w=1920&q=82&fit=max&auto=format)Partner & Sponsor

### Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Adam Argyle Presents CSS Features for 2023 and b…✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Adam Argyle Presents CSS Features for 2023 and beyond!: start with Adam Argyle, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**Adam Argyle Presents CSS Features for 2023 and beyond! ** is a CodingCat.dev podcast episode featuring Adam Argyle alongside Alex Patterson and Brittney Postma focused on CSS, Storyblok. Adam helps reveal some CSS features that will elevate your code and help you push forward. Watch the full video breakdown on [**YouTube**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk) or explore the architectural notes, chapters, and official documentation links below.

## Questions

- Can you tell us more about yourself?
- Last time we talked was December 2021, how is [Open Props](https://open-props.style/) doing?
- What will you be doing for Google I/O this year?
- Next Gen Color?
- Tell us about [gradient.style](http://gradient.style)

## Links

- [Card Stacks](https://gui-challenges.web.app/card-stack/dist/)
- [Nerdy.dev](https://nerdy.dev/)
- [6 CSS snippets every front-end developer should know in 2023](https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/)

### At Container Query

`@container` is a new css selector

Copied! 🐾

```
.panel {
	container: layers-panel / inline-size;
}

.card {
	padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
	.card {
		padding: 2rem;
	}
}
```

## Scroll Snap

Well orchestrated scroll experiences set your experience apart from the rest, and [scroll snap](https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type) is the perfect way to match system scroll UX while providing meaningful stopping points.

Copied! 🐾

```
.snaps {
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.snap-target {
	scroll-snap-align: center;
}

.snap-force-stop {
	scroll-snap-stop: always;
}
```

## Grid Pile

[Grid Pile](https://web.dev/shows/gui-challenges/m4DKhRJeYx4/)

Copied! 🐾

```
.pile {
	display: grid;
	place-content: center;
}

.pile > * {
	grid-area: 1/1;
}
```

## Easy Circle

Copied! 🐾

```
.circle {
	inline-size: 25ch;
	aspect-ratio: 1;
	border-radius: 50%;
}
```

## Control variants with @layer

You probably have seen this if you are using TailwindCSS

Copied! 🐾

```
/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}
```

## Memorize less and reach more with logical properties

Memorize this one new box model and [never have to worry](https://css-tricks.com/late-to-logical/) about changing left and right padding or margin for international [writing modes](https://developer.mozilla.org/docs/Web/CSS/writing-mode) and [document directions](https://developer.mozilla.org/docs/Web/CSS/direction) again. Adjust your styles from physical properties to logical ones like [padding-inline](https://developer.mozilla.org/docs/Web/CSS/padding-inline), [margin-inline](https://developer.mozilla.org/docs/Web/CSS/margin-inline), [inset-inline](https://developer.mozilla.org/docs/Web/CSS/inset-inline), and now the browser will do the adjusting work.

Copied! 🐾

```
button {
	padding-inline: 2ch;
	padding-block: 1ch;
}

article > p {
	text-align: start;
	margin-block: 2ch;
}

.something::before {
	inset-inline: auto 0;
}
```

## Technical Overview: Adam Argyle Presents CSS Features for 2023 and beyond!

Adam Argyle Presents CSS Features for 2023 and beyond!: Adam helps reveal some CSS features that will elevate your code and help you push forward. https://codingcat.dev/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers &

When applying the concepts from **Adam Argyle Presents CSS Features for 2023 and beyond!**  in a production codebase, teams working with CSS, Storyblok should align their implementation with the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

### Key Engineering Takeaways

- **Core Topic Focus: ** Practical strategies for CSS, Storyblok covered in "Adam Argyle Presents CSS Features for 2023 and beyond!" (Adam helps reveal some CSS features that will elevate your code and help you push forward.).
- **Production Implementation: ** Combine the architectural patterns demonstrated in this podcast with the official [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS) for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: ** Follow along with the live coding demos and discussion on [YouTube (Adam Argyle Presents CSS Features for 2023 and beyond!)](https://www.youtube.com/watch?v=RxVJ2Oj1IWk) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Adam Argyle Presents CSS Features for 2023 and beyond!**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): PM (EDT)
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Introduction
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Welcome Adam
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Increase in CSS Shipping
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Open Props Update
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Using Has
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Pollyfill
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Storyblok
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Container Queries
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Scroll Snap
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Grid Pile35:45 Quick Circle
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): @layer
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Logical Properties
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Adam’s Pick - Gradient.style
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Brittney’s Picks
- [**00:00**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk&t=0s): Alex’s Picks

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Adam Argyle Presents CSS Features for 2023 and beyond! Full Video](https://www.youtube.com/watch?v=RxVJ2Oj1IWk) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **storyblok.com: ** [https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- **Show Pick: ** [gradient.style (picked by Adam Argyle)](https://gradient.style/)
- **Show Pick: ** [SST (picked by Alex Patterson)](https://sst.dev/)
- **Show Pick: ** [Svelte Lab (picked by Brittney Postma)](https://www.sveltelab.dev/)
- **Show Pick: ** [Elk Zone (picked by Brittney Postma)](https://elk.zone/home)
- **Show Pick: ** [Intrinsic CSS with Container Queries and Units with Miriam Suzanne (picked by Brittney Postma)](https://www.youtube.com/watch?v=uumZV98zHt8)
- [**Adam Argyle Guest Profile & Episodes on CodingCat.dev**](/guest/adam-argyle)
- [**Adam Argyle on GitHub**](https://github.com/argyleink)
- [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers
- [**Storyblok Headless CMS Documentation:**](https://www.storyblok.com/docs?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast) Component-based headless CMS and visual editor APIs

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Creating a Standardized Design System for the Web**](/podcast/2-31-creating-a-standardized-design-system-for-the-web): Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors.
- [**Open Props - an Open Source CSS Props Library**](/podcast/2-6-open-props-an-open-source-css-props-library): We sit down to learn more about Adam Argyle and his new project Open Props.
- [**Using CSS in JS with Stitches**](/podcast/1-29-using-css-in-js-with-stitches): We sit down with Pedro Duarte to talk all about using CSS in JavaScript and why Modulz created Stitches.

## Frequently Asked Questions (FAQ)

### What are the main takeaways from Adam Argyle Presents CSS Features for 2023 and beyond!?

Adam helps reveal some CSS features that will elevate your code and help you push forward. Adam Argyle Presents CSS Features for 2023 and beyond!: Adam helps reveal some CSS features that will elevate your code and help you push forward. https://codingcat.dev/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & Throughout this podcast, Adam Argyle breaks down real-world implementation details for CSS, Storyblok so developers can apply these patterns directly in production.

### How do you implement CSS best practices in production?

When adopting CSS and Storyblok in a production stack, start by validating your configuration against the [**MDN CSS Reference**](https://developer.mozilla.org/en-US/docs/Web/CSS) (Modern layout, Grid, Flexbox, animations, and cascade layers). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

### Where can I watch the full Adam Argyle Presents CSS Features for 2023 and beyond! walkthrough and find related code resources?

You can watch the complete video session for [**Adam Argyle Presents CSS Features for 2023 and beyond!**](https://www.youtube.com/watch?v=RxVJ2Oj1IWk) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into CSS, check out our related guide: [**Creating a Standardized Design System for the Web**](/podcast/2-31-creating-a-standardized-design-system-for-the-web).

## ✏️ Episode Summary

Adam Argyle Presents CSS Features for 2023 and beyond!: Adam helps reveal some CSS features that will elevate your code and help you push forward.

https://codingcat.dev/podcast/3-14-adam-argyle-presents-css-features-for-2023-and-beyond

Sponsors:

Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers &

## episode picks.

### 🐾 Adam Argyle

- [gradient.style](https://gradient.style/)

### 🐾 Alex Patterson

- [SST](https://sst.dev/)

### 🐾 Brittney Postma

- [Svelte Lab](https://www.sveltelab.dev/)
- [Elk Zone](https://elk.zone/home)
- [Intrinsic CSS with Container Queries and Units with Miriam Suzanne](https://www.youtube.com/watch?v=uumZV98zHt8)

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/images/hfh83o0w/production/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/images/hfh83o0w/production/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/images/hfh83o0w/production/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!

[![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/images/hfh83o0w/production/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)