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

Thanks for your quick reply, that makes sense what you're saying and appreciate your help here.  

I am still however unable to get `@property` definitions working with a container name. Perhaps what I am witnessing is an issue in chrome with the combination of the two, or am i missing something?

I've extended your example to show you what I'm talking about: 

https://jsfiddle.net/qeLyczpj/

```html
<div id="container1">
  <div id="target1">Green</div>
</div>
<div id="container2">
  <div id="target2">Green</div>
</div>
```
```css
  @property --test {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
  }
  html {
    --test: calc(50px + 50px);
  }
  #container1 {
    container: container1 / inline-size;
  }
  #container2 {
    container: container2 / inline-size;
  }
  
  /* global works */
  @container style(--test: 100px) {
    #target1 {
      color: red;
    }
    #target2 {
      color: red;
    }
  }
  
  /* but not with container */
  @container target1 style(--test: 100px) {
    #target1 {
      color: green;
    }
  
  }
  @container target2 style(--test: calc(40px + 60px)) {
    #target2 p {
      color: green;
    }
  }

-- 
GitHub Notification of comment by jlukic
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7185#issuecomment-2549767096 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 22:22:10 UTC