[csswg-drafts] [css-contain-3] Can we allow custom properties in dimensional container queries? (#8088)

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

== [css-contain-3] Can we allow custom properties in dimensional container queries? ==
Currently, dimensional queries allow relative units and resolve those units on the container:

```css
html {
  container: root / inline-size; 
  font-size: 32px;
}

/* 32px em size, equivalent to (inline-size > 960px) */
@container root (inline-size > 30em) { ... }
```

Style queries (according to the spec) currently compare computed values - which means they also resolve custom properties in the query condition (again, using the container as context for the resolution): 

```css
/* true in a theme container using the background color defined in var(--bg-dark) */
@container theme style(background-color: var(--bg-dark)) { … }
```

It would be great if we're able to do something similar for dimensional queries:

```css
@container (inline-size > var(--small-container)) { … }
```

This has been a highly-requested feature in media queries, but it seems like container queries should actually make it possible - since we have an element that we can use as context for resolving the custom property. What would it take for that to be implementable? Would we need to know in advance that the variable has the right type, e.g. using `@property` to define it as a `<number>`?

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


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

Received on Wednesday, 16 November 2022 23:34:46 UTC