-
-
Save mirisuzanne/748169312f110d6246e092945673b16e to your computer and use it in GitHub Desktop.
| /* | |
| 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) { ... } |
@stubbornella I’m here to help however I can, absolutely. That said, I’m in a similar position as @scottkellum: I’m not working on any large-scale sites at the moment. But I’d be thrilled to work with this on whatever edge case-friendly sites I can offer.
@beep @scottkellum - I need at least a few big sites with A/B test infrastructure, but smaller sites are great too! I'd love to have you put it through it's paces during the origin trial (experiment). We'll have signups when the prototype gets near completion in 2021.
In this demo https://tobireif.com/demos/grid/ I use this element queries syntax and lib https://github.com/eqcss/eqcss/ by @tomhodgins .
In the source of my demo https://tobireif.com/demos/grid/view_demo_source/ you can see that I use the "ew" (element width) unit specified at https://github.com/eqcss/eqcss/ . An example:
@element .heading and (min-width: 277px) {
h1 {
font-size: calc(3.0ew + 110px);
}
}
This unit is quite useful.
Does the current proposal offer such a unit?
This gist was a very early draft.
- There is a more fleshed out proposal: https://github.com/oddbird/css-sandbox/blob/main/src/rwd/query/explainer.md
- And a CSS Working Group project board: https://github.com/w3c/csswg-drafts/projects/18
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.
Thanks for the info @mirisuzanne !
@stubbornella I would absolutely love to help out here! I should have some time next week to stress test this. I am not working on any large scale production sites right now but I’m happy to put it on a medium scale site and put it through its paces in a number of tests.