Responsive Components: a Solution to the Container Queries Problem

Extensive writeup by Philip Walton on how he tackles the Container Queries problem.

Instead of narrowly focusing on the specific CSS feature proposal we call “container queries”, I want to focus on the broader concept of building components that respond to their environment. And if you accept this larger framing, there are actually new web APIs that already let you achieve this.

That’s right, we don’t need to wait for container queries to start building responsive components. We can start building them now!

His result takes about the same approach as Elementary takes, but then using the more modern ResizeObserver.

Must say I’m leaning more towards Elementary though, as:

  • Elementary targets the responsive elements themselves, and not their parent element.
  • Elementary defines the breakpoints in the CSS itself and not the HTML (something Philip points out too).
  • Philip’s solutions relies on ResizeObserver which is only available in Chrome right now.

Responsive Components: a Solution to the Container Queries Problem →

Style Scoping with Element Queries using EQCSS

Tommy Hodgins on Style Scoping:

Style scoping is the idea that you can select an element anywhere in your document to serve as a point of reference as you write styles.

To achieve this he uses EQCSS, a JavaScript plugin to writing CSS Element Queries (which essentially are “scoped styles with a responsive condition”), and its specific $this selector:

Anywhere $this is present inside of a scoped style it refers to only the scoped element.

@element 'div' and (min-width: 500px) {
  $this { background: red; }
  /* When any div is >=500px, make that div red */

  div { background: lime }
  /* When any div is >=500px, make all divs on the page lime */

  $this div { background: gold }
  /* When any div is >=500px, make all divs inside the scope gold */

At the end of the article there are quite a few interesting demos to check out.

How Style Scoping Works with Element Queries →
EQCSS – A CSS Extension for Element Queries & More →