De când a existat un design web receptiv, dezvoltatorii au întrebat despre posibilitatea de a proiecta elemente DOM în funcție de dimensiunea lor reală și nu de dimensiunea ferestrei de vizualizare din browser (cu ajutorul interogărilor media ). De fapt, interogările de containere (inițial interogări de element) sunt probabil cea mai solicitată funcție CSS pe care browserele încă nu o au .
Există deja multe , multe , multe postări care explică exact de ce interogările de containere sunt dificil de implementat în CSS și de ce producătorii de browsere ezită să le implementeze. Dacă doriți să vă bucurați de el acum, un pic de JavaScript vă poate ajuta:
c51c33e1533e68c3f8fd24633700789f
Totul arată atunci așa:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Punctele de întrerupere , selectorul și atributele de stil pot fi utilizate pentru a defini diferitele puncte de întrerupere, selectorul automat și tipul de clase adăugate. Dacă utilizați scriptul, vă puteți adresa claselor nou generate după cum urmează:
c51c33e1533e68c3f8fd24633700789f
Utilizarea interogărilor de container este deosebit de utilă pentru elementele din suprapuneri, ferestre pop-up, bare laterale sau elemente personalizate - chiar și acum, de exemplu, cu scriptul de mai sus.