[css-contain] future compatibility concerns with style queries

romainmenke commented 1 year ago

Style queries with custom properties encourage CSS authors to invent keywords to make states expressive.

@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 :

<!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

If anyone actually writes CSS like this and the made up revert-stylesheet is added to CSS then this example would break.

I think it would be prudent to limit the allowed values.

romainmenke commented 1 year ago

Restricting to known idents isn't ideal because that also has compat issues.

Then your style queries would only work in browsers where the ident has meaning.
Older browsers without support for a given ident (e.g. balance) wouldn't match the query.

Restricting to dashed idents only is also not ideal. Then the custom property lose some of it's functionality.

Now you can mix style queries and assignment to a property with the same custom property.

Maybe the current approach is best and we just have to live with the possibility that future additions to CSS wide keywords will break sites?

Loirooriol commented 1 year ago

But this concern seems unrelated to style queries.

If you are setting --toggle: revert-stylesheet, and then we turn that into a css-wide keyword, then --toggle will be reverted or whatever instead of being set to the keyword. So var(--toggle) will probably break.

romainmenke commented 1 year ago

I think style queries are the first feature that surface this issue?

Before you could indeed do --toggle: revert-stylesheet but it wasn't usable for anything. Or at least not for something that will be (ab)used this heavily :)

w3c / csswg-drafts

[css-contain] future compatibility concerns with style queries #9144