Post

What’s the handiest use case for container queries you’ve seen around, the one that would 😮 a JS devs audience?

I think the handiest use-cases are pretty normal, and won't surprise any audience. It's the same use-case as at-media, but anywhere in the page. @mxb.dev has an excellent demo for that: codepen.io/mxbck/pen/XW... or @ishadeed.com's ishadeed.com/article/mode...

There's also a lot people can do with cq* units, like @scottkellum.com's component-responsive typography: codepen.io/miriamsuzann... But the most 😮 uses will come with style queries & scroll-state queries, which are still not cross-browser.

Why isn’t border-box the default box-sizing value?

I wasn't there with Håkon & Bert 😅 but… If we're just trying to establish a container for text, content-box makes the most sense! I want a line length of 30em, I set the width to 30em. padding doesn't mess it up. That only becomes an issue once layout gets more complicated.

A question I had yesterday was: What is the “flat tree”? I also wrote a blog post on how you could use Container Style Queries to expose internal states frehner.me/blog/contain...

The DOM is a tree of nested elements. But shadow-DOM creates alternate universe trees. Consider details/summary: - in the light tree, details element contains a summary & anything else we put in there - in the shadow tree, it contains a summary & a (hidden to us) content block with a slot inside

Our selectors work on one tree or the other. Light styles `details > p` will select a p we put into details. But `:host > p` from the shadow styles won't. The "flat tree" is light+shadow smushed back together. Props inherit from details into the shadow content block back out to our slotted p.

Mmm, don’t have any questions but I would be happy to get the ticket 😅

How do developers handle accessibility concerns, like ensuring proper keyboard navigation and screen reader support, when using advanced CSS layout techniques for non-standard UI patterns?