Playing With (Fake) Container Queries With watched-box & resizeasaurus

Fake Container Queries: Combining watched-box and resize-asaurus

Heydon Pickering’s <watched-box> custom element offers a pragmatic take on container queries: it observes an element with ResizeObserver and toggles class names based on defined size breakpoints. The approach is lightweight, dependency-free, and straightforward—qualities that make it viable for production use, and arguably a cleaner take on the technique Philip Walton outlined some years back.

For development and testing, the <resize-asaurus> web component from Zach Leatherman is a useful companion. It wraps any given element in a CSS-resizable container and displays the current width, removing the need to resize the entire browser window to check a component’s behavior at different sizes.

Wrapping the two together looks like this:

<resize-asaurus>
  <watched-box widthBreaks="320px, 600px">
    <div class="card">
      ... 
    </div>
  </watched-box>
</resize-asaurus>

Style rules can then target breakpoints directly:

.card {
   .w-gt-320px & { }
   .w-gt-600px & { } 
}

That syntax is unlikely to match whatever the eventual official container queries specification lands on, but the generated class names are clear and the behavior is functionally equivalent—enough for real work today.

Live demo available.