[css-contain-3] What container features can be queried? · Issue #5989 · w3c/csswg-drafts (original) (raw)

This relates to #5796, adding Container Queries to Contain Level 3.

Since container queries resolve against a contained ancestor element, rather than the viewport, we've discussed the ability to use actual/computed font sizes when resolving container dimensions in font-relative units:

html { font-size: 24px; contain: size layout; }

/* resolves against browser default font size - often 16px / @media (width > 30em) { / applies above 480px viewport */ }

/* resolves against container font size - in this case 24px / @container (width > 30em) { / applies above 720px container */ }

Would we be able to query other computed values on the container? A few quick examples:

/* custom properties */ @container (var(--color-mode) = dark) { a { color: plum; } }

/* background-color */ @container (background-color = black) { h2 { color: white; } }

/* background-color */ @container (font-style = italic) { em { font-style: normal; } }

Some of the use-cases here might overlap with #5624.

If they are possible, would these queries require the same size/layout/style containment that we need for dimensional queries?