Советы DevTools: как проверять запросы CSS-контейнера
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Запросы контейнеров CSS — это новая функция CSS, которая очень нравится веб-разработчикам. Это может спровоцировать революцию в веб-дизайне — от адаптивного дизайна на основе страниц к адаптивному дизайну на основе контейнеров.
Chrome DevTools поможет вам внедрить новые шаблоны проектирования макетов и оставаться в курсе последних тенденций. Благодаря поддержке этой функции CSS вы теперь можете проверять и отлаживать запросы к контейнерам в DevTools.
В видео выше представлен обзор запросов контейнеров, их синтаксиса и способов их проверки в DevTools.
Теперь вы можете обнаружить элементы контейнера и их потомков с помощью соответствующего значка, который включает наложение пунктирной линии.
Проверьте правила @container , применяемые к потомкам, когда контейнеры удовлетворяют условиям запроса.
Дополнительные сведения о поддержке контейнерных запросов в DevTools см. в разделе Проверка и отладка запросов контейнера CSS .
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2022-06-30 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2022-06-30 UTC."],[],[]]
