Scott Jehl’s experimental take on a container/element query aimed at letting us set responsive styles for our elements based on their immediate context rather than that of the viewport.
I made a quick and minimal take on approximating Container/Element Queries using a web component and basic CSS selectors.
The idea is that for any given instance of the <c-q> custom element / web component you would define a scoped custom property which sets the pixel min-widths you’re interested in, like so:
c-q {
--breakpoints: "400 600 800";
background: black;
}Zero to many of those numeric min-width values will appear in the element’s data-min-width HTML attribute based on which (if any) of them the element’s width is equal to or greater than.
You can style the element based on their presence using the ~= attribute selector, like this:
c-q[data-min-width~="400"] {
background: green;
}
c-q[data-min-width~="600"] {
background: blue;
}See also Scott’s tweet announcing this which contains some interesting contributions including Heydon’s watched-box.
All of the various JavaScript approaches/experiments are summarised in CSS-Tricks’s article Minimal Takes on Faking Container Queries.
(via @scottjehl)