Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Last active October 6, 2021 10:41
Show Gist options
  • Save mirisuzanne/748169312f110d6246e092945673b16e to your computer and use it in GitHub Desktop.
Save mirisuzanne/748169312f110d6246e092945673b16e to your computer and use it in GitHub Desktop.
Thoughts on Container Queries
/*
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) { ... }
@tobireif
Copy link

tobireif commented May 7, 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?

@mirisuzanne
Copy link
Author

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.

@tobireif
Copy link

Thanks for the info @mirisuzanne !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment