CSS container-name — синтаксис и примеры
CSS-свойство container-name: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Суть темы
Назначение «container-name» раскрывается через задачу «управлять местом элемента в потоке, его контекстом или взаимным расположением блоков». Свойство container-name относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения. Для воспроизводимой проверки «container-name» используйте пример в учебном примере без внешнего фреймворка и наблюдайте результат при отключённом JavaScript.
Для «container-name» сначала проверьте вычисленное значение container-name, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «container-name» на одном и том же содержимом.
Синтаксис container-name
Для демонстрации «container-name» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
container-name: relative;
}Как работает container-name
Механика «container-name» начинается с допустимого контекста и заканчивается наблюдаемым результатом. Свойство container-name относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения; для «container-name» отдельно проверьте результат при отключённом JavaScript.
Проверка в проекте
- Проверьте вычисленное значение container-name, наследование и контекст родителя; результат относится непосредственно к «container-name».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «container-name».
- Проверьте «container-name» в учебном примере без внешнего фреймворка через результат при отключённом JavaScript и запишите наблюдаемое изменение.
Используйте «container-name», когда требуется управлять местом элемента в потоке, его контекстом или взаимным расположением блоков; подтвердите выбор предметной проверкой: проверьте вычисленное значение container-name, наследование и контекст родителя. Для «container-name» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с container-name
Проверьте «container-name» в тестовом шаблоне с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «container-name»: проверьте вычисленное значение container-name, наследование и контекст родителя.
Сценарий: в учебном примере без внешнего фреймворка.
Ошибки при работе с container-name
Доступность
Изолированная декларация container-name без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «container-name».
Каскад
Использование !important вместо разбора каскада при использовании «container-name».
Поддержка
Использование физической стороны там, где нужен логический отступ; для «container-name» проверьте это отдельно.
Поддержка container-name
Для «container-name» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «container-name»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о container-name
Как понять, что «container-name» выбрано правильно?
«container-name» выбрано правильно, когда оно решает задачу «управлять местом элемента в потоке, его контекстом или взаимным расположением блоков», сохраняет результат в учебном примере без внешнего фреймворка и проходит предметную проверку: проверьте вычисленное значение container-name, наследование и контекст родителя.
Нужен ли запасной вариант для «container-name»?
Запасной вариант для «container-name» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «container-name» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.