[csswg-drafts] [css-contain-3] What container features can be queried? (#5989)

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain-3] What container features can be queried? ==
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:

```css
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:

```css
/* 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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5989 using your GitHub account


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

Received on Saturday, 13 February 2021 01:06:14 UTC