[csswg-drafts] [css-values-5] container queries in if-test (#12069)

• From: Andrew Hudson via GitHub <sysbot+gh@w3.org>
• Date: Fri, 11 Apr 2025 13:33:18 +0000
• To: public-css-archive@w3.org
• Message-ID: <issues.opened-2988695605-1744378396-sysbot+gh@w3.org>

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

== [css-values-5] container queries in if-test ==
Spec: https://drafts.csswg.org/css-values-5/#if-notation

Looking at the spec I can see that style queries and media queries are supported but not container size queries. 

I would like to be able to style based on the dimensions of the container:

```css
background-color: if(
    container(width > 1000px): green;
    container(width > 800px): orange;
    container(width > 600px): red;
    else: rebeccapurple;
);
```

this would eliminate a bunch of styles:

```css
background-color: rebeccapurple;

@container (width > 600px) {
    background-color: red;
}

@container (width > 800px) {
    background-color: orange;
}

@container (width > 1000px) {
    background-color: green;
}
```

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


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

Received on Friday, 11 April 2025 13:33:19 UTC