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
- Download and/or update Chrome Canary
- Go to chrome://flags
- Search and enable “CSS Container Queries”
- Restart the browser
19:27 - Demos
Links
Tweet us your tasty treats!
