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