Re: [csswg-drafts] [css-values] enable the use of counter() inside calc() (#1026)

> Chrome intends to ship `sibling-index()` in the next stable version (138)!
> 
> https://groups.google.com/a/chromium.org/g/blink-dev/c/opsqx1cBPyc/m/pJaRwh7UAAAJ


The feature is still some ways of reaching its full potential. Whenever the style queries start processing the values of custom properties, we could have something like this with the new ternary operator `if()`:

```html

with the following structure:

<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

```

```css

body {

   div {
      --number:sibling-index();
      --min: 5;
      --max: 7;
      --value: clamp(0, min(
                  calc((var(--number) - var(--min)) * 1000),
                  calc((var(--max) - var(--number)) * 1000)
               ), 1);

      background:if(style(--value: 1): blue; else: red);
      
   }

}
```

And you could style ranges of pages "relatively" easily.

This doesn't work because right now style() queries do not compute the custom property, just evaluate the value as a string, so they evaluate the clamp as a string vs the integer as a string.

I hope this is changed in the future.


-- 
GitHub Notification of comment by 5e-Cleric
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1026#issuecomment-2932691756 using your GitHub account


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

Received on Monday, 2 June 2025 22:14:08 UTC