Toward Responsive Elements | CSS-Tricks

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.

Direct Link →

coolemur

# February 17, 2020

I like this idea!

I think this could be a bit shorter tho. Instead of this:

grid-template-columns: switch(
    (available-inline-size > 1024px) 1fr 4fr 1fr;
    (available-inline-size > 400px) 2fr 1fr;
    (available-inline-size > 100px) 1fr;
    default 1fr;
  );

Something like this:

grid-template-columns:  
    (> 1024px) 1fr 4fr 1fr,
    (> 400px) 2fr 1fr,
    (> 100px) 1fr, 
    1fr;

(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).

Comments