Last active
October 6, 2021 10:41
-
-
Save mirisuzanne/748169312f110d6246e092945673b16e to your computer and use it in GitHub Desktop.
Thoughts on Container Queries
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This is not meant to be a final CSSWG proposal, | |
| but reflects my immediate thoughts after reading | |
| [David Baron's](https://github.com/dbaron/container-queries-implementability) promising draft. | |
| This gist was created to demonstrate my idea for removing selectors from his query syntax. | |
| More of my thoughts & notes are online at css.oddbird.net/rwd/ | |
| */ | |
| main, | |
| aside { | |
| /* PROPOSAL: contain:size creates an implicit "container root" or "containment context" */ | |
| contain: size; | |
| } | |
| /* our modular object that requires container queries */ | |
| .media-object { | |
| display: grid; | |
| gap: 1em; | |
| } | |
| /* The dbarron proposal makes you select a root explicitly */ | |
| @container main (max-width: 45em) { | |
| /* media-objects only inside main, but not aside */ | |
| .media-object { | |
| grid-template: 'img content' auto / auto 1fr; | |
| } | |
| } | |
| /* PROPOSAL: The goal is *modularity*, so we want this to work in any context */ | |
| /* I'm suggesting that this syntax should work without a selector, */ | |
| /* inside any *implicit* "containment context" - the nearest ancestor with size containment */ | |
| /* (For the purpose of this step, the viewport should be considered an outer-most containment context) */ | |
| @container (max-width: 45em) { | |
| /* media-objects inside main or aside, or any other "contained" element */ | |
| .media-object { | |
| grid-template: 'img content' auto / auto 1fr; | |
| } | |
| } | |
| /* ❌ I was tempted to merge this into @media - */ | |
| /* but after some consideration I think this is more confusing than helpful. */ | |
| @media screen and container(max-width: 45em) and (orientation:portrait) { ... } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This gist was a very early draft.
Units weren't in the initial proposal, but they've already been approved by the CSSWG to be part of the spec (w3c/csswg-drafts#5888) once we figure out what to call them.