De la apariția designului web responsiv, dezvoltatorii au cerut posibilitatea de a stiliza elementele DOM în funcție de dimensiunea lor reală, mai degrabă decât de dimensiunea viewport-ului browserului (folosind interogări media ). De fapt, interogările container (inițial interogări de elemente) sunt probabil cea mai solicitată caracteristică CSS care încă nu este disponibilă browserelor.
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 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.