Wie soll ich die Frage, die Unklarheit, von der ich geschrieben habe, widerlegen?
Aber:
<html>
<header>
<style>
p { background: yellow; max-width: 40em; }
.chef {
container-type: inline-size;
font-size: 1.75em;
}
.stpd { color: lightgreen; }
@container (width > 1em) {
span {
padding-inline: 1cm;
border: 10px solid blue;
}
}
.accident {
container-type: inline-size;
background-color: red;
}
</style>
</header>
<body>
<p class="chef">CHEF<span>chef</span> 1</p>
<p>SOMEBODY<span>somebody</span> 2</p>
<p class="stpd">ABC<span>abc</span>…</p>
<p class="accident">ABC<span>abc</span>…</p>
</body>
</html>
zeigt immerhin, daß alle Container-Kinder (aber auch nur diese) von dem betroffen sind, was innerhalb von @container
verlost wird. Das kann unerwünscht sein (und, da die Effekte ja von Bedingungen abhängen, durchaus auch mal überraschend, länger unerkannt bleiben). Und der Browser wird, wenn es so wie im Beispiel gezeigt gemacht wird, alle Container daraufhin untersuchen, ob da nicht ein passendes nav drin steckt. Um dann nur dieses umzugestalten.
Es wird ja auch (ggf.) schnell komplizierter. Wenn man z. B. bei den Styles noch ein .y { container-type: size; … }
und im HTML dann noch ein <div class="y"> wor drum herum einbaut …
Mein Fazit: das Verhalten ist durchaus eingängig, aber die potentiellen Nebenwirkungen sind nicht unbedingt offensichtlich.