Thoughts on Container Queries

cq.css

/* 
  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) { ... }

Thanks for the info @mirisuzanne !