Советы DevTools: как проверять запросы CSS-контейнера
bookmark_borderbookmark
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Sofia Emelianova
Запросы контейнеров CSS — это новая функция CSS, которая очень нравится веб-разработчикам. Это может спровоцировать революцию в веб-дизайне — от адаптивного дизайна на основе страниц к адаптивному дизайну на основе контейнеров.
Chrome DevTools поможет вам внедрить новые шаблоны проектирования макетов и оставаться в курсе последних тенденций. Благодаря поддержке этой функции CSS вы теперь можете проверять и отлаживать запросы к контейнерам в DevTools.
В видео выше представлен обзор запросов контейнеров, их синтаксиса и способов их проверки в DevTools.
Теперь вы можете обнаружить элементы контейнера и их потомков с помощью соответствующего значка, который включает наложение пунктирной линии.
Проверьте правила @container , применяемые к потомкам, когда контейнеры удовлетворяют условиям запроса.
[[["Прост для понимания","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."],[],[]]
