Hot news from Brian Kardell, regarding what we’ve been referring to as “container queries,” the most hotly requested feature in CSS:
There does seem to be some general agreement on at least one part of what I am going to call instead “Responsive Design for Components” and that is that flipping the problem on its head is better.
The flipping here sounds like instead of doing it as media query, we do it at the property level.
.foo {
display: grid;
grid-template-columns: switch(
(available-inline-size > 1024px) 1fr 4fr 1fr;
(available-inline-size > 400px) 2fr 1fr;
(available-inline-size > 100px) 1fr;
default 1fr;
);
}
I think this is still in the ideation phase, and other people are ideating on different ideas. But this is worth sharing as it sounds like it has traction and is doable because it isn’t plagued with well that’s just not how browsers work that came up a lot with container queries.
Brian also talks about “lightspeed progress” lately, for example:
Consider that we shifted the stalemate conversation and
ResizeObserver
was envisioned, incubated, speced, tested, agreed upon, iterated on (we got things wrong!) and implemented in all browsers in about 2 years
Two years is smokin’ in standards.
I like this idea!
I think this could be a bit shorter tho. Instead of this:
Something like this:
(This could be just additional shorthand for people who don’t need self-explaining code in trivial situations).
And (> width) part could also include height of viewport (> width, > height).