PLAY PODCASTS
Hasty Treat - Container Queries Are Here

Hasty Treat - Container Queries Are Here

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them. Sanity - Sponsor is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and...

Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

April 19, 202124m 23s

Audio is streamed directly from the publisher (traffic.megaphone.fm) as published in their RSS feed. Play Podcasts does not host this file. Rights-holders can request removal through the copyright & takedown page.

Original episode page

Show Notes

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.

Sanity - Sponsor

Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

07:22 - Why?

  • Container queries are media queries for components (e.g. they are based on the element’s size, not the browser).
  • This is in line with how we write components.
  • It will change the way we write CSS.

08:49 - The Syntax

  • Containers need to be defined as containers via containment context
.container { contain: size layout; }

New contain value:

.inline-container { contain: inline-size; }

This is the same as the logical properties. Assuming you read LTR, or RTL:

  • size - width and height
  • inline-size = width
  • block-size = height
/* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } }

18:49 - How to try them today

  1. Download and/or update Chrome Canary
  2. Go to chrome://flags
  3. Search and enable “CSS Container Queries”
  4. Restart the browser

19:27 - Demos

Links Tweet us your tasty treats!
← All episodes of Syntax - Tasty Web Development Treats