Fin dall'avvento del responsive web design, gli sviluppatori hanno richiesto la possibilità di applicare stili agli elementi DOM in base alle loro dimensioni effettive anziché alle dimensioni della finestra del browser (utilizzando le media query ). In effetti, le container query (originariamente element query) sono probabilmente la funzionalità CSS più richiesta che i browser ancora non offrono .
Ci sono già molti , molti , molti post che spiegano esattamente perché le query sui contenitori sono difficili da implementare in CSS e perché i produttori di browser esitano a implementarle. Se vuoi divertirti ora, un po' di JavaScript può aiutarti:
c51c33e1533e68c3f8fd24633700789f
Il tutto quindi assomiglia a questo:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Gli attributi breakpoints , selector e style possono essere utilizzati per definire i vari breakpoint, il selettore automatico e il tipo di classi aggiunte. Se stai usando lo script, puoi indirizzare le classi appena generate come segue:
c51c33e1533e68c3f8fd24633700789f
L'utilizzo delle query contenitore è particolarmente utile per gli elementi in overlay, popup, barre laterali o elementi personalizzati - anche adesso, ad esempio, con lo script sopra.