Minimal Takes on Faking Container Queries

container-queries.png
Minimal Takes on Faking Container Queries 3

It’s sounding more and more likely that we’re actually going to get real container queries. Google is prototyping a syntax idea from David Baron and refined by Miriam Suzanne. Apparently, there has already been some prototyping done for a switch() syntax which is like container queries on values. Even now, there is stuff like the Raven technique which can do container query-esque values. This stuff will shake out over time.

If you need solutions today, most of them involve JavaScript watching what is going on (i.e. the container width) and then giving you some kind of styling hooks (e.g. classes). Here’s a quick review of the “minimal takes” landscape:

  • Philip Walton shows how to homegrow that with ResizeObserver. Watch sizing, apply classes for styling hooks.
  • Heydon Pickering has a <watched-box> web component that leverages ResizeObserver. Watch sizing, apply classes for styling hooks. (See combination with resizeasaurus.)
  • Scott Jehl made a <c-q> web component that leverages ResizeObserver. Watch sizing, apply data attributes for styling hooks.
  • Eric Portis made conditional-classes which leverages ResizeObserver and a clever (and valid) syntax involving CSS custom properties that end ups applying classes for styling hooks.

There is also Tommy Hodgins’ EQCSS, which does container queries (and other stuff) by looking through your CSS for the invented syntax that does these fancy things. I wouldn’t really call it minimalist, and it slightly creeps me out to ship invalid CSS syntax, but it does look robust.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »