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