Re: [csswg-drafts] [css-contain-3] Move style queries of standard properties to level 4 (#7185)

> Came here after reviewing the related MDN / Google materials on CSS Style Queries. It doesn't seem like any of the documentation mention that it does not resolve calculated values.
> 
> Amusingly you can match the exact calc value as a string
> 
> ```css
> .container {
>   container: test / inline-size;
>   --test: calc(1px + 1px);
> }
> @container test style(--test: 2px) {
>   /* in your dreams */
>   div {
>     border: 3px solid red;
>   }
> }
> @container test style(--test: calc(1px + 1px)) {
>   /* this works! */
>   div {
>     border: 3px solid purple;
>   }
> }
> ```
> 
> https://jsfiddle.net/20as4jgk/

The thing is that `--test` is not a registered custom property, so it is merely a string and calc() does not have a meaning in that context other than its string representation.

If you register the custom property as a length, you can both query calc() and the absolute value:
```html
<!DOCTYPE html>
<style>
  @property --test {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  #container1 {
    --test: calc(50px + 50px);
  }
  #container2 {
    --test: 100px;
  }
  @container style(--test: 100px) {
    #target1 {
      color: green;
    }
  }
  @container style(--test: calc(40px + 60px)) {
    #target2 {
      color: green;
    }
  }
</style>
<div id="container1">
  <div id="target1">Green</div>
</div>
<div id="container2">
  <div id="target2">Green</div>
</div>
```


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


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

Received on Tuesday, 17 December 2024 19:38:14 UTC