Adam Argyle Presents CSS Features for 2023 and beyond!

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 or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Can you tell us more about yourself?
2. Last time we talked was December 2021, how is Open Props doing?
3. What will you be doing for Google I/O this year?
4. Next Gen Color?
5. Tell us about gradient.style

Links

• Card Stacks
• Nerdy.dev
• 6 CSS snippets every front-end developer should know in 2023

At Container Query

@container is a new css selector

.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 is the perfect way to match system scroll UX while providing meaningful stopping points.

.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

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

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

Easy Circle

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

Control variants with @layer

You probably have seen this if you are using TailwindCSS

/* 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 about changing left and right padding or margin for international writing modes and document directions again. Adjust your styles from physical properties to logical ones like padding-inline, margin-inline, inset-inline, and now the browser will do the adjusting work.

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 (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 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!) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Video Chapters & Timestamps

Jump directly to any segment of Adam Argyle Presents CSS Features for 2023 and beyond! on YouTube using the timestamped chapters below:

• 00:00: PM (EDT)
• 00:00: Introduction
• 00:00: Welcome Adam
• 00:00: Increase in CSS Shipping
• 00:00: Open Props Update
• 00:00: Using Has
• 00:00: Pollyfill
• 00:00: Storyblok
• 00:00: Container Queries
• 00:00: Scroll Snap
• 00:00: Grid Pile35:45 Quick Circle
• 00:00: @layer
• 00:00: Logical Properties
• 00:00: Adam’s Pick - Gradient.style
• 00:00: Brittney’s Picks
• 00:00: Alex’s Picks

Resources, Links & Official Documentation

• Watch on YouTube: Adam Argyle Presents CSS Features for 2023 and beyond! Full Video (plus Subscribe to CodingCat.dev)
• storyblok.com: 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)
• Show Pick: SST (picked by Alex Patterson)
• Show Pick: Svelte Lab (picked by Brittney Postma)
• Show Pick: Elk Zone (picked by Brittney Postma)
• Show Pick: Intrinsic CSS with Container Queries and Units with Miriam Suzanne (picked by Brittney Postma)
• Adam Argyle Guest Profile & Episodes on CodingCat.dev
• Adam Argyle on GitHub
• Episode Sponsor: Storyblok
• MDN CSS Reference: Modern layout, Grid, Flexbox, animations, and cascade layers
• Storyblok Headless CMS Documentation: Component-based headless CMS and visual editor APIs

Related CodingCat.dev Tutorials & Podcast Episodes

• 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: We sit down to learn more about Adam Argyle and his new project Open Props.
• 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 (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! on the CodingCat.dev YouTube channel. For a deeper dive into CSS, check out our related guide: Creating a Standardized Design System for the Web.