З моменту появи адаптивного веб-дизайну розробники просили можливість стилізувати елементи DOM на основі їх фактичного розміру, а не розміру області перегляду браузера (за допомогою медіа-запитів ). Фактично, контейнерні запити (спочатку запити елементів) є, ймовірно, найбільш затребуваною функцією CSS, якої досі бракує в браузерах.
Вже є багато , багато , багато повідомлень, які точно пояснюють, чому запити контейнерів важко реалізувати в CSS і чому виробники браузерів не вагаються їх реалізовувати. Якщо ви хочете насолоджуватися цим зараз, трохи JavaScript може допомогти:
c51c33e1533e68c3f8fd24633700789f
Тоді вся справа виглядає так:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Точки зупинки , селектор та атрибути стилю можна використовувати для визначення різних точок зупину, автоматичного селектора та типу доданих класів. Якщо ви використовуєте сценарій, ви можете звернутись до новостворених класів наступним чином:
c51c33e1533e68c3f8fd24633700789f
Використання контейнерних запитів особливо корисно для елементів у накладеннях, спливаючих вікнах, бічних панелях або користувацьких елементах – навіть зараз, наприклад, зі сценарієм вище.