Le style queries sono finalmente cross‑browser: usale per far decidere al contesto come deve comportarsi un componente, senza moltiplicare classi e breakpoint duplicati.
Le CSS style queries sono una di quelle feature che, una volta entrate in produzione, cambiano il modo in cui imposti varianti e temi nei componenti. A prima vista possono ricordare un “modifier” (tipo .card--primary, .card--compact), ma in realtà il salto è più interessante: è il contesto a dichiarare l’intenzione e i componenti si adattano automaticamente.
In pratica: invece di aggiungere classi in giro, puoi far sì che un contenitore “dica”: “qui il tema è primary” oppure “qui le card devono essere compatte”, e ogni card dentro quel contesto reagirà.
Cos’è una style query (in breve)
Una style query è un @container style(...) { ... } che verifica valori di proprietà CSS nel contesto (spesso custom properties).
