Выбор ответа Middle Адаптивность обновлено
Контейнер не может запросить сам себя
Вопрос
Почему у .card не меняется display при ширине больше 400px?
.card {
container-type: inline-size;
display: block;
}
@container (width > 400px) {
.card { display: flex; }
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Стили @container действуют на потомков контейнера, а .card ищет его выше. Элемент не может запрашивать собственный размер: иначе смена стилей меняла бы размер, и получился бы цикл. .card ищет контейнер среди предков, а там его нет.
Варианты ответа
- Контейнерные запросы работают только в Chrome, а в остальных браузерах их нет
- Стили
@containerдействуют на потомков контейнера, а.cardищет его вышеправильный ответ - Нужно
container-type: size, а неinline-size: иначе ширина не отслеживается - В
@containerнельзя использовать синтаксис диапазонаwidth >, толькоmin-width
Разбор
Элемент не может запрашивать собственный размер: иначе смена стилей меняла бы размер, и получился бы цикл. .card ищет контейнер среди предков, а там его нет. Решение: объявить контейнером обёртку или стилизовать детей .card. Контейнерные запросы есть во всех основных браузерах с 2023 года. inline-size как раз подходит для запроса по ширине. Синтаксис диапазонов в @container поддерживается.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.