Da quando esiste un web design reattivo, gli sviluppatori hanno chiesto la possibilità di progettare elementi DOM in base alla loro dimensione effettiva e non alla dimensione del viewport nel browser (con l'aiuto delle query multimediali ). In effetti, le query del contenitore (inizialmente le query degli elementi) sono probabilmente la funzione CSS più richiesta che i browser ancora non hanno .
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'uso delle query del contenitore è particolarmente utile per gli elementi in sovrapposizioni, popup, barre laterali o elementi personalizzati, anche ora, ad esempio, con lo script sopra.