Od czasu pojawienia się responsywnego projektowania stron internetowych, programiści domagali się możliwości stylizowania elementów DOM na podstawie ich rzeczywistego rozmiaru, a nie rozmiaru pola widzenia przeglądarki (za pomocą zapytań o media ). W rzeczywistości zapytania o kontenery (pierwotnie zapytania o elementy) są prawdopodobnie najczęściej żądaną funkcją CSS, której nadal brakuje w przeglądarkach.
Istnieje już wiele , wiele , wiele postów, które dokładnie wyjaśniają, dlaczego zapytania kontenerowe są trudne do zaimplementowania w CSS i dlaczego producenci przeglądarek niechętnie je wdrażają. Jeśli chcesz się nim teraz cieszyć, może pomóc trochę JavaScript:
c51c33e1533e68c3f8fd24633700789f
Całość wygląda wtedy tak:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Atrybuty punktów przerwania , selektora i stylu mogą być używane do definiowania różnych punktów przerwania, automatycznego selektora i typu dodawanych klas. Jeśli używasz skryptu, możesz zaadresować nowo wygenerowane klasy w następujący sposób:
c51c33e1533e68c3f8fd24633700789f
Korzystanie z zapytań kontenerowych jest szczególnie opłacalne w przypadku elementów w nakładkach, wyskakujących okienkach, paskach bocznych lub elementach niestandardowych - nawet teraz, na przykład za pomocą powyższego skryptu.