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