Re: [csswg-drafts] [css-contain] How does @container resolve when no ancestor containers have been defined? (#6178)

I took [this question to Twitter yesterday](https://twitter.com/MiriSuzanne/status/1387535566535725057), and the conversations have been interesting. A few things to note:

- There is a common first-instinct to expect a root/viewport as a fallback. It is, in many ways, the outermost container on a page, and reasonable to think about it that way.
- As people dig in, there are some clear problems with responding to the root/viewport, which will likely return much larger dimensions than are actually available to a given component. If authors take a mobile-first, progressive-enhancement approach to their queries, the "small-screen" default (without queries) will be a "safer" fallback in many cases. We can see this in the [codepen demo by @dvdherron](https://codepen.io/dvdherron/pen/YzpywrZ), by changing the selector on the first block of CSS to `html`, or removing it entirely). In this case the default without queries behaves better than a root fallback. It seems like there are many cases where a root fallback could make things worse. 
  ![three blockquotes responding to different sized containers - small, medium, and large](https://user-images.githubusercontent.com/104161/116590123-a20c8b00-a8da-11eb-8cb7-bf6aa7b14a84.jpg)
  ![the same quotes in the same containers, but all using the largest version based on viewport size, so the quote in the smallest container is very squished](https://user-images.githubusercontent.com/104161/116590119-a0db5e00-a8da-11eb-9a64-82e789d0511b.jpg)
  ![all three quotes using the smallest layout, so there is sometimes extra space, but none of them are clearly broken](https://user-images.githubusercontent.com/104161/116590111-a042c780-a8da-11eb-8634-1216c16d08aa.jpg)
- Still, many people have other reasons that they want to set containment on the root. While media-queries rely on "viewport" values (default browser em size, etc), a root container query may be responsive to actual font size (using ems in the query), or [other properties and states](https://github.com/w3c/csswg-drafts/issues/5989) of the root element. 

I don't think either approach will "just work" as a fallback in all situations, but my conclusion here is:

- We should allow root containment, but
- We should leave it up to authors to apply as they see fit

-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6178#issuecomment-829447077 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 29 April 2021 17:21:45 UTC