[css-contain] future compatibility concerns with style queries #9144
Description
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.