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

Sorry that fiddle was typo town USA, apologies for what was entirely my error. 

I think what is causing my confusion is that my real world use case is actually **subtly different and doesnt seem to work** since the value uses a mixture of unit types `%` with `px`.

I'm trying to use style queries for a calc that would "flip" when a dynamic breakpoint is met, this was suppose to be a workaround for `@media` declarations lack of css custom property support.

Something like
```css
:root {
  --card-stackable-breakpoint: 700px; /* user can override this */
  --card-stackable-comparator: max(calc(100% - var(--card-stackable-breakpoint)), 0px);
} 
@container component style(--card-stackable-comparator: 0px) {
  //  stack cards
}
```

You can see when the `%` value is introduced even if it is `0%` it seems to no longer work as in this jsfiddle https://jsfiddle.net/cm102pq5/2/

Let me know if you have any thoughts, or any oversights I seem to be making.

----

This is being used in a new web component framework I'm working on for the rewrite of Semantic UI. You can see examples like this [card search](https://next.semantic-ui.com/examples/card-search) would be a good target showcasing this approach. (The docs are only half written so please ignore)

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


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

Received on Wednesday, 18 December 2024 20:58:54 UTC