Minimal Takes on Faking Container Queries
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
web component that leveragesResizeObserver. Watch sizing, apply classes for styling hooks. (See combination with resizeasaurus.) - Scott Jehl made a
web component that leveragesResizeObserver. 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.
The post Minimal Takes on Faking Container Queries appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.
