Post

Nmn
@nmn.sh

This exact trick isn’t possible with if/else or container queries because it depends on both the container/viewport size AND the size of the element itself (100%) The original use case was to drop the border radius for any cards that because full-width. Many cards never become full width.

CSS by T. Afif
@css-only.dev

It would be more verbose with if/else so I don't think I will use it. In both cases, you will need to explain what it does. I don't think the if syntax is more self-explanatory.

Nmn
@nmn.sh

The original I made subtracted like 30-40px from to drop the border-radius a little early to account for the scroll bars.

Ana Tudor
@anatudor.bsky.social

Make the html a container frontendmasters.com/blog/super-s... html { container-type: inline-size } This will take into account vertical scrollbars IF any and subtract them out of the 100vw viewport width to get the 100cqi (container inline size) or the less cryptic 100cqw (container width) value.

frontendmasters.comSuper Simple Full-Bleed & Breakout StylesHaving a width-limited centered column of content is common and good, but what do you do when you need to break out? It's not hard these days, but it does depend on the situation.
Nmn
@nmn.sh

I wrote that code before container queries existed. And even today fb supports older browsers that don’t support them. But when I use this thing these days I reach for container queries too!