Moin,
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>
… funktioniert auch nur, weil Browser
header
außerhalb desbody
akzeptierenstyle
innerhalb desbody
interpretieren
😉
Viele Grüße
Robert