CSS contain-intrinsic-block-size — синтаксис и примеры
CSS-свойство contain-intrinsic-block-size: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
Для «contain-intrinsic-block-size» важно отделить назначение от случайного оформления. Свойство contain-intrinsic-block-size относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения. При проверке в компоненте с русским и английским содержимым сначала зафиксируйте размер содержащего блока в Layout для «contain-intrinsic-block-size», затем не подменяйте ошибку декоративным overflow hidden.
Перед применением «contain-intrinsic-block-size» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение contain-intrinsic-block-size, наследование и контекст родителя. Для «contain-intrinsic-block-size» такое сравнение показывает реальную причину изменения.
Синтаксис contain-intrinsic-block-size
Синтаксис «contain-intrinsic-block-size» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
contain-intrinsic-block-size: min(100%, 60rem);
}Как работает contain-intrinsic-block-size
Механика «contain-intrinsic-block-size» начинается с допустимого контекста и заканчивается наблюдаемым результатом. Свойство contain-intrinsic-block-size относится к области «раскладка и позиционирование» и может создавать новый контекст форматирования, содержащий блок или уровень наложения; для «contain-intrinsic-block-size» отдельно проверьте размер содержащего блока в Layout.
Проверка в проекте
- Проверьте вычисленное значение contain-intrinsic-block-size, наследование и контекст родителя; результат относится непосредственно к «contain-intrinsic-block-size».
- Замедлить загрузку ресурсов и проверить резервное содержимое при разборе «contain-intrinsic-block-size».
- Проверьте «contain-intrinsic-block-size» в компоненте с русским и английским содержимым через размер содержащего блока в Layout и запишите наблюдаемое изменение.
Используйте «contain-intrinsic-block-size», когда требуется управлять местом элемента в потоке, его контекстом или взаимным расположением блоков; подтвердите выбор предметной проверкой: проверьте вычисленное значение contain-intrinsic-block-size, наследование и контекст родителя. Для «contain-intrinsic-block-size» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с contain-intrinsic-block-size
Перенесите «contain-intrinsic-block-size» на контрольной странице и испытайте его в компоненте с русским и английским содержимым. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «contain-intrinsic-block-size»: изолированная декларация contain-intrinsic-block-size без связанных ограничений может дать другой результат в реальном компоненте.
Сценарий: в компоненте с русским и английским содержимым.
Ошибки при работе с contain-intrinsic-block-size
Контекст
Изолированная декларация contain-intrinsic-block-size без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «contain-intrinsic-block-size».
Устойчивость
Дублирование интерактивной роли без нативного управления при использовании «contain-intrinsic-block-size».
Доступность
Использование !important вместо разбора каскада; для «contain-intrinsic-block-size» проверьте это отдельно.
Поддержка contain-intrinsic-block-size
Для «contain-intrinsic-block-size» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «contain-intrinsic-block-size»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1.
Вопросы о contain-intrinsic-block-size
Как понять, что «contain-intrinsic-block-size» выбрано правильно?
«contain-intrinsic-block-size» выбрано правильно, когда оно решает задачу «управлять местом элемента в потоке, его контекстом или взаимным расположением блоков», сохраняет результат в компоненте с русским и английским содержимым и проходит предметную проверку: проверьте вычисленное значение contain-intrinsic-block-size, наследование и контекст родителя.
Нужен ли запасной вариант для «contain-intrinsic-block-size»?
Запасной вариант для «contain-intrinsic-block-size» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «contain-intrinsic-block-size» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.