CSS break-inside — синтаксис и примеры
CSS-свойство break-inside: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
В материале о «break-inside» основное внимание уделено области «визуальное поведение элемента». Свойство break-inside относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. Проверяйте поведение «break-inside» на панели управления с асинхронным обновлением данных, причём используйте нативное действие вместо имитации клика.
Для «break-inside» сначала проверьте вычисленное значение break-inside, наследование и контекст родителя. После этого сравните исходное и изменённое состояние «break-inside» на одном и том же содержимом.
Синтаксис break-inside
Для демонстрации «break-inside» используется короткий код с наблюдаемым результатом. Сохраните структуру примера, когда будете проверять другое значение.
.demo {
break-inside: inherit;
}Как работает break-inside
Чтобы объяснить работу «break-inside», проследите путь от структуры и входного значения до отображения или поведения. Свойство break-inside относится к области «визуальное поведение элемента» и участвует в каскаде, получает вычисленное значение и применяется в подходящем контексте. Контрольная точка для «break-inside» — изменение при prefers-reduced-motion.
Проверка в проекте
- Проверьте вычисленное значение break-inside, наследование и контекст родителя; результат относится непосредственно к «break-inside».
- Проверить вычисленное значение в DevTools и источник победившего правила при разборе «break-inside».
- Проверьте «break-inside» на панели управления с асинхронным обновлением данных через момент загрузки ресурса в Network и запишите наблюдаемое изменение.
Используйте «break-inside», когда требуется уточнять один из этапов расчёта или отрисовки CSS-бокса; подтвердите выбор предметной проверкой: проверьте вычисленное значение break-inside, наследование и контекст родителя. Для «break-inside» более простой вариант предпочтителен, если он сохраняет тот же смысл и поведение.
Практика с break-inside
Проверьте «break-inside» в изолированном демо с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «break-inside»: проверьте вычисленное значение break-inside, наследование и контекст родителя.
Сценарий: на панели управления с асинхронным обновлением данных.
Ошибки при работе с break-inside
Каскад
Изолированная декларация break-inside без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «break-inside».
Поддержка
Отсутствие запасного поведения при неподдерживаемой возможности при использовании «break-inside».
Контекст
Зависимость результата от placeholder вместо постоянной подписи; для «break-inside» проверьте это отдельно.
Поддержка break-inside
Для «break-inside» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «break-inside»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2, источник 3.
Вопросы о break-inside
Как понять, что «break-inside» выбрано правильно?
«break-inside» выбрано правильно, когда оно решает задачу «уточнять один из этапов расчёта или отрисовки CSS-бокса», сохраняет результат на панели управления с асинхронным обновлением данных и проходит предметную проверку: проверьте вычисленное значение break-inside, наследование и контекст родителя.
Нужен ли запасной вариант для «break-inside»?
Запасной вариант для «break-inside» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «break-inside» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.