[css-contain] How does @container resolve when no ancestor containers have been defined? (original) (raw)

Conditions in the @container rule currently query the nearest ancestor with appropriate containment for each element selected inside the conditional block. If there are no ancestors with appropriate containment, we could simply consider it a false condition.

On the other hand, we might be able to fallback to a query of the viewport or :root element. That fallback would behave similar to a media-query, though possibly with advantages (like access to the actual root font-size, rather than the browser default). On first glance, that seems like the best option. It means that container queries always have an implicit container, and always respond to the best of their ability. But in some cases it sets up a false assumption that the viewport size has anything at all useful to provide, or can be substituted directly in a useful way.

I expect authors to run into issues either way, but:

• If we do not provide an implicit fallback, authors can always add root containment to create their own
• If we do provide an implicit fallback, authors don't have any way to avoid it without creating more nested containers

Based on that, I might be leaning towards no implicit fallback root.