-
You can play with an early prototype of container queries in today's Chrome Canary updates! 🥳 1. Do the update 2. Go to chrome://flags 3. Search & enable "CSS Container Queries" 4. Restart the browser Explainer: css.oddbird.net/rwd/query/explainer/ Demos: codepen.io/collection/XQrgJo Thread: 🧵On twitter.com
♻️ 68 Retweets ❤️ 199 Favorites Mood 0
-
Create inline containers (for now) with:Permalink On twitter.com
contain: layout inline-sizeWhen an element is contained like that, the inline-size (usually width) must be defined by context, rather than content. That's usually how we do layout anyway. (contain: layout sizefor 2D containers) -
Container queries look just like media queries, but with a different name: container (min-width: 30em) { blockquote { /* styles to apply above 30em */ } } See shipslinky's really great blockquote demo: codepen.io/dvdherron/pen/YzpywrZ Each quote responds to its own container!Permalink On twitter.com
-
If you play with it, I'd love to see what you build! Remember, this is a combination of several experimental features – a real early, rough draft for people to play with and provide feedback. There are a whole load of caveats and stress cases that still need to be addressed.Permalink On twitter.com
-
NOTE: In my original explainer I used some new query syntax that is not supported in the prototype. You may not be able to copy/paste demos from the explainer & expect them to work as is. Primarily… NOT YET:Permalink On twitter.com
(inline-size > 30em)FOR NOW:(min-width: 30em)