Odkąd pojawiło się responsywne projektowanie stron internetowych, programiści pytali o możliwość projektowania elementów DOM na podstawie ich rzeczywistego rozmiaru, a nie rozmiaru widoku w przeglądarce (za pomocą zapytań o media ). W rzeczywistości zapytania kontenerowe (początkowo zapytania elementowe) są prawdopodobnie najbardziej pożądaną funkcją CSS, której przeglądarki wciąż nie mają .
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
Użycie zapytań kontenerowych jest szczególnie opłacalne dla elementów w nakładkach, popupach, sidebarach lub elementach niestandardowych - nawet teraz, na przykład z powyższym skryptem.