[csswg-drafts] [css-contain] compatibility concerns with style queries (#9144)

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

== [css-contain] compatibility concerns with style queries ==
Style queries with custom properties encourage CSS authors to invent keywords to make states expressive.

```css
@container style(--enable-feature: true) {
  /* ... */
}
```

`true` is not a known value and it only works because the current syntax and feature is very forgiving. It is just an ident token that doesn't have any meaning today.

My concern is that the tendency to pick short expressive names will eventually clash with a future CSS wide keyword. This will complicate the introduction of any future CSS wide keywords.

A contrived example :

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>

 <style>
  @container style(--toggle: revert) {
   p {
    color: green;
   }
  }

  @container style(--toggle: revert-stylesheet) {
   p {
    color: green;
   }
  }
 </style>
</head>
<body>
 <div class="container">
  <div class="child" style="--toggle: revert">
   <p>Child 1</p>
  </div>

  <div class="child" style="--toggle: revert-stylesheet">
   <p>Child 2</p>
  </div>
 </div>
</body>
</html>
```

Results in :

- the style query with the made up keyword works as intended
- the style query with the css wide keyword does not work

<img width="153" alt="Screenshot 2023-08-02 at 22 31 53" src="https://github.com/w3c/csswg-drafts/assets/11521496/11c0f22a-1ffc-476c-b53f-17427d2f0a7b">

-----

I think it would be prudent to limit the allowed values to avoid to many issues in the future.

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


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

Received on Wednesday, 2 August 2023 20:32:31 UTC