Re: [csswg-drafts] [css-properties-values-api] Extend `@property` at-rule to support globally settable values (#7866)

> I think you can do this today with `:has()` but the ergonomics might not be ideal. _At least it is possible to polyfill/downgrade_

@romainmenke `:has()` is helpful for achieving something like this. I had considered mentioning it in my original brief but didn't want to go too deep down that rabbit hole. For a simpler checkbox example like the one I used, `:has()` would suffice. This gets a bit more tricky once you start storing more complex values, especially dynamic ones.

Consider the below example:

```
html ━┓
      ┣━ head
      ┗━ body ━┓
               ┣━ span
               ┗━ form ━┓
                        ┗━ input[type="range"]#range
```

```css
@property --range-min {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
  global: true;
}
@property --range-max {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
  global: true;
}
span::before {
  content: "In the form below, select a value between " var(--range-min) " and " var(--range-max);
}
form > input[type="range"]#range {
  --range-min: attr(min number);
  --range-max: attr(max number);
}
```

Something more dynamic like this would not be _dynamically_ possible using only `:has()`.

This is just one more example, though I think we could probably come up with many more where this would enable developers to perform more powerful operations using CSS.

Good thinking on `env()`. After having read up a bit more on it, I'm not sure either is a _perfect_ fit for this, at least in their current implementations, since by definition, `var()` is meant for values defined per element and `env()` values are defined by the user-agent.

Personally, I think I still lean toward `var()` as it's most similar to how these would be used— almost identically. Even if we were to introduce a separate namespace for these such as `global()`, I think we would be doing a disservice to these variables if they lacked any of the helpful features baked into `var()` including `@property`.

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


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

Received on Tuesday, 11 October 2022 23:15:29 UTC