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

Heydon's watched-box is an exceptional tool for simulating container queries. This custom element cleverly uses class names, applied based on size breakpoints determined by ResizeObserver, to mimic container query behavior. It offers a refined approach compared to earlier methods.

I'd confidently use watched-box in production due to its lightweight nature, lack of dependencies, and straightforward implementation.

For development and testing, Zach's resize-asaurus web component provides a valuable addition. It encapsulates elements within a resizable container, displaying the current width. This eliminates the need to resize the entire browser window for testing; individual elements become directly resizable.

Combining these components:

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

Allows CSS styling based on breakpoints:

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

While this CSS isn't the final container query syntax, it effectively achieves the same result with clear, generated class names.

(Example and live demo links would be included here)

The above is the detailed content of Playing With (Fake) Container Queries With watched-box & resizeasaurus. For more information, please follow other related articles on the PHP Chinese website!