Vai offline con l'app Player FM !
Hasty Treat - Container Queries Are Here
Manage episode 290324677 series 1469447
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes07: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
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
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
- Need Chrome Canary + Flag
- https://codepen.io/collection/XQrgJo
- https://codepen.io/una/pen/LYbvKpK?editors=1100
- Miriam Suzanne
- Susy
- Miriam’s CSS Sandbox
- https://css.oddbird.net/rwd/query/explainer/
- Canary
- @addyosmani
- The CSS Podcast
- @jon_neal
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
760 episodi
Manage episode 290324677 series 1469447
In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them.
Sanity - SponsorSanity.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 - SponsorLogRocket 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 Notes07: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
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
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
- Need Chrome Canary + Flag
- https://codepen.io/collection/XQrgJo
- https://codepen.io/una/pen/LYbvKpK?editors=1100
- Miriam Suzanne
- Susy
- Miriam’s CSS Sandbox
- https://css.oddbird.net/rwd/query/explainer/
- Canary
- @addyosmani
- The CSS Podcast
- @jon_neal
- Scott’s Instagram
- LevelUpTutorials Instagram
- Wes’ Instagram
- Wes’ Twitter
- Wes’ Facebook
- Scott’s Twitter
- Make sure to include @SyntaxFM in your tweets
760 episodi
ทุกตอน
×Benvenuto su Player FM!
Player FM ricerca sul web podcast di alta qualità che tu possa goderti adesso. È la migliore app di podcast e funziona su Android, iPhone e web. Registrati per sincronizzare le iscrizioni su tutti i tuoi dispositivi.