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.
- 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
ResizeObserverand 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.
Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.