Webmasters Gallery

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 as well on different ideas, but this seems worth sharing to me 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 to Article — Permalink

The post Toward Responsive Elements appeared first on CSS-Tricks.