2.33. CSS-фрагментация

Модуль CSS Fragmentation описывает модель фрагментации, которая разбивает содержимое HTML или XML-документа на страницы, колонки или регионы, помещая их в контейнеры фрагментации. Этот модуль заменяет и расширяет способы разбиения на страницы, определенные в Paged media и Paged Media Module Level 3.

• Содержание:
• 1. Управление разрывами
• 1.1. Разрывы между блоками: свойства break-before и break-after
• 1.2. Разрывы внутри блока: свойство break-inside
• 1.3. Разрывы между строками: свойства orphans и widows
• 2. Границы и фон фрагментов: свойство box-decoration-break

1. Управление разрывами

Поддержка браузерами

IE: 10
Edge: 12
Firefox: 65, колонки только при печати
Chrome: 50
Safari: 10, только при печати страниц
Opera: 37
iOS Safari: 10, только при печати страниц
Chrome for Android: 98
Samsung Internet: 5

Возможность принудительного разрыва страницы, колонки или региона между двумя блоками находится под влиянием свойства break-inside содержащего блока, свойства break-after предыдущего элемента и свойства break-before следующего элемента.

Возможность разрыва страницы, колонки или региона между строками находится под влиянием свойств break-inside, widows и orphans содержащего блока.

Принудительный разрыв имеет приоритет над любыми ограничениями на разрыв, действующими в этой точке. В случае принудительных разрывов страниц также можно указать, на какой странице (левой или правой) должен возобновиться последующий контент.

Когда несколько контекстов форматирования размещаются параллельно друг другу, фрагментация выполняется независимо в каждом контексте форматирования. Например, если элемент плавающий, то принудительный разрыв внутри плавающего элемента не повлияет на содержимое вне плавающего элемента (за исключением того, что это может увеличить высоту плавающего элемента).

1.1. Разрывы между блоками: свойства break-before и break-after

Свойства break-before и break-after определяют поведение разрыва страницы при печати или распределение содержимого по колонкам до и после элемента, к которому они применяются.

В CSS2.1 свойства page-break-before и page-break-after определены для управления разрывами страниц. Свойства break-before и break-after расширяют их.

Поскольку разрывы разрешены только между элементами одного уровня, то значения разрыва, применяемые к дочерним элементам в начале/конце родительского, распространяются на родительский элемент там, где они могут вступить в силу.

Свойства break-before и break-after применяются к элементам уровня блока, элементам сетки, flex-элементам, группам строк таблицы и строкам таблицы (с ограничениями). Не применяются к элементам с абсолютным позиционированием.

Свойства не наследуются.

Синтаксис

break-before: auto;
break-before: avoid;
break-before: avoid-page;
break-before: page;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;
break-before: avoid-column;
break-before: column;
break-before: inherit;
break-before: initial;

Синтаксис

break-after: auto;
break-after: avoid;
break-after: avoid-page;
break-after: page;
break-after: left;
break-after: right;
break-after: recto;
break-after: verso;
break-after: avoid-column;
break-after: column;
break-after: inherit;
break-after: initial;

1.2. Разрывы внутри блока: свойство break-inside

Свойство break-inside определяет поведение разрыва страницы или колонки в блоке элемента.

Применяется ко всем элементам, кроме элементов уровня строки, внутренних блоков <ruby>, блоков столбцов таблицы, блоков групп столбцов таблицы, блоков с абсолютным позиционированием.

Свойство не наследуется.

Синтаксис

break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: inherit;
break-inside: initial;

1.3. Разрывы между строками: свойства orphans и widows

Поддержка браузерами

IE: 8
Edge: 12
Firefox: —
Chrome: 25
Safari: 7
Opera: 10
iOS Safari: 7
Chrome for Android: 98
Samsung Internet: 4

Свойство orphans задает минимальное количество строк в элементе уровня блока, которые должны остаться в нижней части фрагмента до разрыва страницы или колонки.

Свойство widows задает минимальное количество строк в элементе уровня блока, которые должны остаться в верхней части фрагмента после разрыва страницы или колонки.

Свойства применяются к элементам уровня блока. В качестве значений допускаются только положительные целые числа. Значение по умолчанию 2. Если блок содержит меньше строк, чем указано orphans и widows, то все строки в блоке должны храниться вместе.

Свойства наследуются.

Синтаксис

orphans: 2;
orphans: 3;
orphans: inherit;
orphans: initial;

widows: 2;
widows: 3;
widows: inherit;
widows: initial;

2. Границы и фон фрагментов: свойство box-decoration-break

Поддержка браузерами

IE: —
Edge: 79 -webkit- *
Firefox: 32
Chrome: 22 -webkit- *
Safari: 6.1 -webkit- *
Opera: 11.5, 15 -webkit- *
iOS Safari: 7 -webkit- *
Chrome for Android: 98 -webkit- *
Samsung Internet: 4 -webkit- *

*Частичная поддержка, означает, что данное свойство работает только для элементов уровня строки.

Свойство box-decoration-break управляет оформлением фрагментов при их разрыве внутри блока, например, при использовании элемента <br>, при уменьшении ширины области просмотра или при печати.

Свойство не наследуется.

Синтаксис

box-decoration-break: slice;
box-decoration-break: clone;
box-decoration-break: initial;
box-decoration-break: inherit;

See the Pen
Untitled by Elena (@html5book)
on CodePen.

По материалам CSS Fragmentation Module Level 3