CSS 分片模块第 3 级

W3C 候选推荐标准,

此版本:
https://www.w3.org/TR/2018/CR-css-break-3-20181204/
最新发布版本:
https://www.w3.org/TR/css-break-3/
编辑草案:
https://drafts.csswg.org/css-break/
先前版本:
测试套件:
http://test.csswg.org/suites/css-break-3_dev/nightly-unstable/
编辑者:
(Microsoft)
Elika J. Etemad / fantasai (邀请专家)
问题追踪:
GitHub Issues

摘要

本模块描述了将流划分为页面、列或区域的分片模型。它基于分页模型模块构建,介绍并定义了分片模型。它增加了对分页、可变分片大小和方向、孤行和寡行的功能支持。

CSS 是一种用于描述结构化文档(例如 HTML 和 XML)的渲染语言,适用于屏幕、纸张、语音等。

文档状态

本节描述了本文件在发布时的状态。其他文件可能会取代此文档。W3C 当前出版物列表和本技术报告的最新修订版可在 W3C 技术报告索引中找到。

本文件由CSS 工作组作为候选推荐标准发布。本文件拟成为 W3C 推荐标准。 本文件将至少保留为候选推荐标准直到 , 以确保有机会进行广泛审查。

GitHub Issues 是讨论此规范的首选方式。 提交问题时,请在标题中注明 “css-break”,最好这样:“[css-break] …评论摘要…”。 所有问题和评论都已存档,还有一个 历史存档

草案实现报告可用。

发布为候选推荐标准并不意味着 W3C 会员的认可。此文档是草案,可能随时更新、替换或被其他文档取代。引用此文档时,不应作为工作以外的用途。

本文档由W3C 专利政策下的工作组产生。 W3C 保留公开的专利披露列表, 页面还包含披露专利的说明。 个人若知道专利包含必要声明,则必须根据 W3C 专利政策第 6 节披露信息。

本文件受2018 年 2 月 1 日 W3C 进程文件管理。

自上一个草案以来的更改,请参见更改部分。

以下功能可能存在风险,并可能在候选推荐标准期内被删除:

“存在风险”是 W3C 进程中的术语,表示工作组认为该功能可能难以在规定的时间内实现互操作性,并标记为“存在风险”允许工作组在转换到提议推荐标准阶段时,如果必要,删除该功能,而无需先发布不包含该功能的新候选推荐标准。

1. 引言

本节非规范性内容。

在分页媒体(例如纸张、幻灯片、相册页面,或显示在计算机屏幕上的打印输出模拟)中,与连续媒体相反,文档的内容被分割为一个或多个独立的显示表面。为了避免不合适的断开(例如在文本行中间的分页),布局引擎必须能够重新调整落在分页上的内容。这个过程称为分页

在 CSS 中,除了分页媒体外,某些布局功能如区域 [CSS3-REGIONS]多列布局 [CSS3COL] 也会创建类似的分片环境。将内容分隔到不同容器中的通用术语是分片。本模块解释了内容如何在分片容器分片容器)如页面和列中断开,以及作者如何控制这些断点

1.1. 模块交互

本模块替代并扩展了在[CSS21] 第13.3节[CSS3PAGE]中定义的分页控制。

1.2.

本规范遵循CSS 属性定义约定,参考自 [CSS21]。未在本规范中定义的值类型,定义于 CSS 值与单位[CSS-VALUES-3]中。其他 CSS 模块可能会扩展这些值类型的定义。

除了在各自定义中列出的特定属性值外,本规范中定义的所有属性也接受 CSS 通用关键词 作为其属性值。为了可读性,未显式重复这些关键词。

2. 分片模型和术语

分片容器 (分片器)
一个盒子——例如页面盒、列盒或区域——包含一个分片流的一部分(或全部)。分片器可以是预定义的,也可以根据需要生成。当可分页内容会溢出一个分片器的块维度时,它会转而断开到其分片上下文中的下一个容器。
分片上下文
一系列有序的分片器,例如由多列容器、一系列CSS 区域分页媒体显示创建。给定的分片上下文只能在其所有分片器之间具有一个块流方向。(分片根的后代可能具有其他块流方向,但分片将根据施加在分片根上的块流方向进行。)
分片流
分片上下文中布局的内容。分片流由一个(可能是匿名的)盒子的内容组成,称为分片根
分片方向
分片上下文的块流方向,即内容分片的方向。(在此级别的 CSS 中,内容仅在一个维度上进行分片。)
分片
将内容流分割到形成分片上下文分片器上的过程。
盒子分片分片
属于恰好一个分片器的盒子的部分。一个在连续流中的盒子始终只包含一个分片。一个在分片流中的盒子包含一个或多个分片。每个分片都有其自己的盒子边框、填充和边距的份额,因此有其自己的填充区域边框区域边距区域。(参见盒子装饰断裂,它控制这些如何受到分片的影响。)
剩余分片器范围
块轴上,在给定元素可用的分片器中,指的是前一个内容的末尾和分片器边缘之间的空间。

每个分片断点(以下简称断点)结束当前分片器中分片盒子的布局,并导致剩余内容在下一个分片器中进行布局,在某些情况下,会导致生成新的分片器以容纳待处理的内容。

将内联内容分割为行是另一种形式的分片,并且在其内联盒子跨越行盒子时,类似地会创建盒子分片。但是,此处不涉及内联断裂;请参见[CSS21]/[CSS3TEXT]

由于文本的双向重排,盒子也可以被分割为多个分片(参见应用双向重排算法CSS 写作模式),或更高级别的显示类型盒子分割,例如内联中的块分割(参见CSS2§9.2)或块中的跨列分割(见CSS 多列布局)。在这些情况下,划分为盒子分片并不依赖于布局(内容的大小/定位)。

2.1. 并行分片流

当多个格式上下文并排布局时,分片在每个格式上下文中独立执行。例如,如果一个元素是浮动的,则浮动内部的强制换行不会影响浮动外部的内容(除了可能增加浮动的高度)。用户代理可以(但不要求)调整并行格式上下文中的非强制换行的位置,以便在视觉上平衡并排内容,但不得如此来匹配强制换行

以下是会独立分片的并行流示例:

溢出固定大小盒子内容边缘的内容被视为与固定大小盒子后面的内容并行,并遵循正常的分片规则。尽管溢出内容不会影响分片根盒子的大小,但它确实增加了分片流的长度,根据需要溢出或生成额外的分片器

2.2. 嵌套分片流

破坏一个分片器 F 实际上将分片器分割为两个分片器F1F2)。唯一的区别在于,就分片器 F的内容而言,两个部分之间的断裂类型是由分割F分片上下文创建的断裂类型,而不是由F自身的分片上下文通常创建的断裂类型。

例如,如果一个区域盒子在页面边界处被打断,则该区域的内容将在该点受到页面换行的影响(但不会受到区域换行的影响)。
请注意,当多列容器跨页打断时,它会在下一页为其剩余内容生成新的列行,因此在多列容器内的页面换行总是同时也是页面换行和列换行。

3. 控制断裂

以下部分解释了如何在分片流中控制断裂。两个盒子之间的页面/列/区域断裂机会受包含块的break-inside属性、前一个元素的break-after属性以及后一个元素的break-before属性的影响。两个行盒子之间的页面/列/区域断裂机会受包含块的break-insidewidowsorphans属性的影响。根据这些属性的值,分片断裂可以被允许、强制或不鼓励。强制断裂会覆盖在该断裂点作用的任何断裂限制。对于强制页面断裂,作者还可以指定后续内容应在哪一页(左或右)恢复。

请参阅关于断裂规则部分,以了解这些属性如何影响分片的确切规则。

3.1. 盒子之间的换行:break-beforebreak-after 属性

名称: break-beforebreak-after
值: auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region
初始: auto
适用对象: 块级盒子、网格项、弹性项、表格行组、表格行(但见文中说明)
继承:
百分比: 不适用
媒体: 视觉
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

这些属性指定生成的盒子之前/之后的页面/列/区域换行行为。强制换行值 leftrightrectoversopagecolumnregion 在流中创建一个强制换行,而 避免换行值 avoidavoid-pageavoid-columnavoid-region 表明内容应保持在一起。

break-beforebreak-after 的值在下面的小节中定义。用户代理必须将这些属性应用于分片根的正常流中的盒子。用户代理还应将这些属性应用于其包含块在根分片元素的正常流中的浮动盒子。用户代理还可以将这些属性应用于其他盒子。用户代理不得将这些属性应用于绝对定位的盒子。

通用换行值

这些值对包含流的分片上下文类型没有影响。

auto
主盒子之前/之后既不强制也不禁止换行。
avoid
避免在主盒子之前/之后换行。

页面换行值

这些值仅在分页上下文中有效;如果流不在分页中,则它们无效。

avoid-page
避免在主盒子之前/之后换页。
page
始终强制在主盒子之前/之后换页。
left
强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面。
right
强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为右侧页面。
recto
强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面或右侧页面,具体取决于在页面幅面中的顺序。
verso
强制在主盒子之前/之后进行一个或两个换页,以便下一个页面格式为左侧页面或右侧页面,具体取决于在页面幅面中的顺序。

列换行值

这些值仅在多列上下文中有效;如果流不在多列上下文中,则它们无效。

avoid-column
避免在主盒子之前/之后换列。
column
始终强制在主盒子之前/之后换列。

区域换行值

这些值仅在多区域上下文中有效;如果流不跨多个区域链接,则这些值无效。

avoid-region
避免在主盒子之前/之后换区域。
region
始终强制在主盒子之前/之后换区域。

3.1.1. 子元素到父元素的换行传播

由于换行仅允许在同级元素之间进行,而不允许在盒子与其容器之间进行(见可能的换行点),因此应用于父元素开始/结束的子元素上的换行值会被传播到父元素,在那里可以生效。

具体来说—— 除了定义更具体规则以适应重排序和并行布局的布局模式(例如在弹性布局 [CSS-FLEXBOX-1]网格布局 [CSS-GRID-1])—— 对于第一个正常流的子盒子上的break-before值将被传播到其容器。同样,最后一个正常流的子盒子上的break-after值也将被传播到其容器。(冲突值组合,如下面所定义的那样。)这种传播在突破最近匹配的分片上下文之前停止。

换行传播不影响计算值;它是对元素计算值进行布局的解释的一部分。

3.2. 盒子内部的换行:break-inside 属性

名称: break-inside
值: auto | avoid | avoid-page | avoid-column | avoid-region
初始: auto
适用对象: 所有元素,除了内联级盒子、内部 ruby 盒子、表格列盒子、表格列组盒子和绝对定位的盒子
继承:
百分比: 不适用
媒体: 视觉
计算值: 指定的关键字
规范顺序: 按语法
动画类型: 离散

此属性指定元素主盒子内部的页面/列/区域换行行为。值的含义如下:

auto
在盒子内不施加额外的换行约束。
avoid
避免在盒子内换行。
avoid-page
避免在盒子内换页。
avoid-column
避免在盒子内换列。
avoid-region
避免在盒子内换区域。

3.3. 行间换行:orphans, widows

名称: orphans, widows
值: <整数>
初始: 2
适用对象: 块容器,这些容器建立了一个内联格式上下文
继承:
百分比: 不适用
媒体: 视觉
计算值: 指定的整数
规范顺序: 按语法
动画类型: 按计算值类型

orphans属性指定块容器中在换行之前必须留在一个碎片中的最小行盒数。 widows属性指定块容器中在换行之后必须留在一个碎片中的最小行盒数。 关于它们如何用于控制碎片换行的示例在下方给出。

只有正整数允许作为orphanswidows的值。 负值和零是无效的,必须导致该声明被忽略

如果一个块包含的行数少于widowsorphans的值,那么规则变为必须将块中的所有行保持在一起。

3.4. 页面换行别名:page-break-beforepage-break-afterpage-break-inside 属性

为了与CSS第2级兼容,符合[CSS21]的用户代理必须将page-break-beforepage-break-afterpage-break-inside 属性映射到break-beforebreak-afterbreak-inside,通过将page-break-*属性视为传统简写,映射到break-* 属性,映射如下:

简写(page-break-*)值 长写(break-*)值
auto | left | right | avoid auto | left | right | avoid
always page

4. 换行规则

一个碎片流可以在多个碎片容器中按多个可能的换行点进行拆分。在强制换行的情况下,用户代理需要在该点进行换行。而在非强制换行的情况下,用户代理必须在允许的换行点中进行选择。

为了确保进展,假定碎片容器的最小块尺寸为1px,无论其使用的大小如何。

4.1. 可能的换行点

碎片化在块流维度上分裂盒子。在块和内联流中,换行可能发生在以下位置:

类别 A
在以下类型的同级盒子之间:
块并行碎片化
当同级容器的块流方向与碎片化上下文的方向平行时:流中的块级盒子,一个浮动盒子和一个紧邻的流中或浮动盒子,表格行组盒子,表格行盒子,多列列行盒子。
块垂直碎片化
当同级容器的块流方向与碎片化上下文的方向垂直时:表格列组盒子,表格列盒子,多列列盒子。
类别 B
在块容器盒子内部的行盒子之间。
类别 C
在块容器盒子的内容边缘与其子内容的外边缘(块级子项的边距边缘或内联级子项的行盒边缘)之间,如果它们之间有(非零)间隙。

这些断点类之间没有固有的优先顺序。 然而,个别断点可以通过使用 断点控制 来优先或去优先。

其他布局模型可能会向上述类添加断点。 例如,[CSS-FLEXBOX-1] 在灵活的格式上下文中添加了某些点 到 A 类和 C 类中。

一些内容是不可碎片化的,例如许多类型的 替换元素 [CSS21](例如图像或视频), 可滚动元素,或一行文本内容。 此类内容被认为是 单体的: 它不包含可能的断点。 因此,在此类框内的任何强制断点 都无法拆分该框, 因此也必须被其自身的碎片化上下文忽略。

除了任何通常不可碎片化的内容外, 用户代理(UA)还可以将 单体的 视为 任何 overflow 设置为 autoscroll 的元素,以及任何具有 overflow: hidden 且具有非 auto逻辑高度(并且没有指定的最大 逻辑高度)。

由于行框不包含任何可能的断点, inline-blockinline-table boxes (and other inline-level display types that establish an independent formatting context) may also be considered monolithic: that is, in the cases where a single line box is too large to fit within its fragmentainer even by itself and the UA chooses to split the line box, it may fragment such boxes or it may treat them as monolithic.

4.2. 换行类型

CSS 中有不同类型的换行,根据它们跨越的碎片容器的类型进行定义:

分页符
在两个页面盒子之间的换行。[CSS3PAGE]
跨页换行
在两个不关联的对页之间的换行。跨页换行始终也是一个分页符。[CSS3PAGE]
列换行
在两个列盒子之间的换行。请注意,如果列盒子位于不同的页面上,则该换行也是一个分页符。类似地,如果列盒子位于不同的区域中,则该换行也是一个区域换行[CSS3COL]
区域换行
在两个区域之间的换行。请注意,如果区域盒子位于不同的页面上,则该换行也是一个分页符[CSS3-REGIONS]

第五种断点是 换行,这是在两个 行框 之间的断点。 这些内容不在本规范中涵盖;请参见 [CSS21][CSS3TEXT]

4.3. 强制换行

强制换行是由样式表作者明确指示的换行。在强制换行发生在类别 A 换行点,如果在前一个同级盒子上指定的或传播换行后属性和在后一个同级盒子上指定的或传播换行前属性中,有至少一个具有强制换行值。(因此,强制换行值有效地覆盖在该换行点上也适用的任何避免换行值。)

当多个强制换行值适用于单个换行点时,它们组合在一起,以便所有类型的换行都得以满足。当正面和/或背面组合时,流中最新元素上指定的值优先。

如果在该边距上方的最后一行盒子和下方的第一行盒子没有相同的页面值,则必须在类别 A 换行点处也发生强制分页。请参见[CSS3PAGE]

当强制换行发生时,它会将后续内容强制转移到与该换行相关联的下一个碎片容器中,直到满足所有指定的换行类型为止,打破尽可能多的碎片上下文。如果强制换行不包含在匹配类型的碎片上下文中,则强制换行无效。

4.4. 非强制换行

虽然换行控制可以强制换行,但它们也可以阻止换行。非强制换行是指由用户代理(UA)自动插入的换行,以防止内容溢出碎片容器。以下规则控制在可能的换行点是否允许非强制换行:

规则 1
仅当适用于此换行点的所有换行后换行前值允许时,碎片流可以在类别 A 换行点换行,这种情况下至少有一个强制换行,或者它们都不禁止换行(根据避免避免页面/避免列/避免区域,具体取决于换行类型)。
规则 2
但是,如果所有这些值都是自动,且所有元素的共同祖先的换行内部值为避免,则不允许在此处换行。
规则 3
仅当换行与包含块的起始位置之间的行盒子数等于孤行的值或更多,并且换行与块的结束之间的行盒子数等于widows的值或更多时,允许在类别 B 换行点处换行。
规则 4
此外,仅当所有祖先的换行内部属性为自动时,才允许在类别 B类别 C换行点处换行。

如果上述内容没有提供足够的换行点以防止内容溢出碎片容器,则将取消规则 3 以提供更多的换行点。

如果仍然没有足够的换行点,则依次取消规则 1、2 和 4 以查找额外的换行点。在这种情况下,用户代理可以根据那些点的避免来权衡新换行点的适宜性;然而,本规范并未建议使用精确算法。

如果即使这样仍未能产生足够的换行点,则将在块末端截断克隆的边距/边框/填充;如果仍需要更多空间,则块末端也会截断克隆的边距/边框/填充

最后,如果在碎片容器的顶部没有可能的换行点,并且所有内容未能适配,用户代理可以在任意位置换行,以避免内容从碎片容器的边缘丢失。 在这种情况下,用户代理还可以通过切割元素的图形表示来分割单体元素的内容。然而,用户代理不得在页面顶部换行,即它必须在每个碎片容器中至少放置一些内容,以确保每个碎片容器都有非零的内容量,以确保内容的持续展示。

4.5. 优化非强制换行

虽然 CSS3 要求碎片流必须在允许的换行点换行,以避免溢出其碎片容器中的内容,但并未定义内容是否在特定的允许换行处换行。然而,建议用户代理遵循以下指导方针(虽然承认这些指导方针有时是相互矛盾的):

举例来说,假设样式表包含孤行:4widows:2,并且当前页面底部可用空间为 20 行(行盒子):

现在假设孤行10widows20,而当前页面底部可用空间为 8 行:

此外,CSS 还强加了一项要求:零大小的框碎片由于不占用空间,必须在能够适合其碎片容器的情况下出现在碎片化换行的早期侧面。

注意:如果零大小的框碎片被放置在紧跟着的内容之后,并且该内容溢出碎片容器,则将推送到下一个碎片容器

5. 损坏的盒子模型

本节中使用的大小术语定义在[CSS3-SIZING]中。

5.1. 进入不同大小的碎片容器

当流被分割成不同大小的碎片容器时,将遵循以下规则来调整布局:

由于文档中元素的顺序在碎片化过程中不会改变,碎片会按照适用于连续媒体的相同规则进行处理。特别是,浮动的顺序在所有碎片中得以保留,并遵循 CSS 2.1 第 9.5 节中定义的相同规则。

以下是这些规则的一些(信息性)影响:

以下是一个示例,展示了基于百分比的进度的使用:假设我们有一个绝对定位的元素,其位置为top: calc(150% + 30px),并且具有height: calc(100% - 10px)。如果它被放置在一个具有第一页面高度为 400px、第二页面为 200px、第三页面为 600px 的分页上下文中,其布局进展如下:

5.2. 相邻边距在断裂处的处理

当块级盒子之前或之后发生未强制断裂时,与断裂相邻的任何边距会被截断为零。 当发生强制断裂时,断裂前的相邻边距会被截断,但断裂后的边距会被保留。克隆的边距在块级盒子上始终被截断为零。

注意: CSS Fragmentation Level 4 将引入对断裂时边距截断的控制。

5.3. 拆分盒子

当盒子发生断裂时,其内容盒子会扩展以填充任何剩余碎片容器范围(为任何由box-decoration-break: clone应用的边距/边框/填充留出空间)在内容在下一个碎片容器上恢复之前。 (推送内容到下一个碎片容器碎片化断裂有效地增加了盒子内容的块大小。)

由于盒子的分割所贡献的额外块大小(即从断裂点到碎片容器边缘的距离)将对盒子指定的任何限制的块大小产生贡献。

插图:填充剩余的碎片容器范围

填充剩余碎片容器范围的插图。

5.4. 分段边框和背景:box-decoration-break属性

名称: box-decoration-break
值: slice | clone
初始: slice
适用于: 所有元素
继承:
百分比: 不适用
媒体: 视觉
计算值: 指定的关键字
规范顺序: 根据语法
动画类型: 离散

当发生断裂(页、列、区域、行)时,box-decoration-break属性控制:

值的含义如下:

clone
每个盒子片段都独立地用边框、填充和边距包裹。border-radiusborder-image以及box-shadow(如果有的话)都应用于每个片段。背景在每个元素的片段中独立绘制。因此,无重复背景图像将在元素的每个片段中渲染一次。

注意: 克隆的边距在块级盒子上被截断为零。

slice

该效果就像元素在没有断裂的情况下被渲染,然后在之后被断裂: 断裂处没有插入边框和填充; 在断裂边缘不会绘制盒阴影; 背景、border-radiusborder-image按整个盒子的几何形状应用,就好像它是未断裂的。

插图: (1) 一个盒子在两个文本行之间被页面断裂切割,(2) 断裂前后的两个盒子,周围都有边框并且各自拥有背景图像

box-decoration-break的两种可能性:左侧为值slice,右侧为值clone

用户代理还应应用 box-decoration-break 来控制在双向强制断点的渲染——即当双向重排导致行内元素分裂成不连续的片段时——以及/或在显示类型强制断点的渲染——即当一个更高层次的 显示类型(如 块级框 / 列跨度)拆分一个不兼容的祖先元素(例如 行内框 / 块容器)。否则,此类断点必须作为 slice 进行处理。有关更多信息,请参见 应用双向重排算法CSS 写作模式CSS2§9.2 块级元素和块框,以及 CSS 多列布局 §6 跨度列

对于内联元素,哪个片段被视为断裂边缘是由父元素的内联进程方向决定的。例如,如果一个内联元素的父元素有direction: rtl,在两个行之间断裂时,第一行片段的左侧将是断裂边缘。特别注意,不使用元素自身的direction或其包含块的direction。请参见[CSS3-WRITING-MODES]

5.4.1. slice连接盒子

对于box-decoration-break: slice,背景(和border-image)将被绘制为好像应用于一个复合盒,该盒由所有盒子的片段重新组合而成,按照视觉顺序排列。这个理论上的组合发生在元素布局后(包括任何调整、双向重排、页面断裂等)。要组合复合盒...

对于跨行断裂的盒子
首先,同一行上的片段按视觉顺序连接。然后,后续行上的片段根据元素的内联基本方向进行排序,并在元素的主基线对齐。例如,在一个从左到右的包含块中(directionltr),第一个片段是在第一行的最左侧片段,后续行上的片段被放置在其右侧。在从右到左的包含块中,第一个片段是在第一行的最右侧,后续片段被放置在其左侧。
对于跨列断裂的盒子
片段连接就好像列盒子在多列容器的块流方向中被粘合在一起。
对于跨页面断裂的盒子
片段连接就好像页面内容区域在根元素的块流方向中被粘合在一起。
对于跨区域断裂的盒子
片段连接就好像区域内容区域在块流方向中被粘合在一起,该方向是主要书写模式区域链

如果盒子片段的宽度不同(如果片段是水平连接,则高度不同),那么每个片段绘制其部分背景,假设整个元素的宽度(高度)与该片段相同。然而,如果图像的使用高度(宽度)是从盒子的宽度(高度)推导的,那么它将使用最宽片段的宽度计算,并保持固定大小。这确保右对齐的图像保持与右边缘对齐,左对齐的图像保持与左边缘对齐,居中的图像保持居中,拉伸的图像按预期覆盖背景区域,同时在片段之间保持连续性。

5.5. 转换、定位和分页

片段化与布局相互作用,因此发生在相对定位[CSS21]、变换[CSS3-TRANSFORMS]和任何其他图形效果之前。这样的效果是按片段应用的:例如,应用于片段盒子的旋转将计算每个片段的旋转原点,并独立地围绕其原点旋转该片段。(仅溢出的片段的原点确定为该内容溢出一个零边距/边框/内边距的空盒子的开始。)然而,为了减少打印时的数据丢失,页面盒子的分离和转移应该最后发生;因此,跨页的变换片段应该在页面断裂处被切割,并完整打印,而不是被其起始页面裁剪。

插图:变换溢出片段化

一个固定高度的盒子跨越2.5页,溢出内容总共跨越4页。每个片段的变换原点是其边框盒的中心;没有边框盒的片段假设在溢出开始时有一个零高度的盒子。

绝对定位会影响布局,因此与片段化相互作用。属于包含块的坐标系和绝对定位的盒子将在与包含块相同的片段流中跨越片段容器。

UAs 不需要正确定位跨越片段化断裂且其块起始边缘位置取决于盒子内容片段的位置。

由于内存限制,UAs可能无法在内存中操作整个文档,因此不需要正确定位最终位于之前渲染页面的绝对定位元素。

更改

2016年1月14日候选推荐以来,做出了以下重大更改:

提供了评论处理

2015年1月29日工作草案以来,进行了以下重大更改:

提供了评论处理

致谢

编辑们感谢 Mihai Balan, Michael Day, Alex Mogilevsky, Shinyu Murakami, Florian Rivoal, 和 Alan Stearns 对此模块的贡献。 特别感谢前[CSS3PAGE]编辑 Jim Bigelow(HP), Melinda Grant(HP), Håkon Wium Lie(Opera), 和 Jacob Refstrup(HP) 对本规范的贡献,该规范是他们工作成果的继承者。

符合性

文档约定

符合性要求以描述性声明和RFC 2119术语的组合形式表达。关键字“MUST”、 “MUST NOT”、 “REQUIRED”、 “SHALL”、 “SHALL NOT”、 “SHOULD”、 “SHOULD NOT”、 “RECOMMENDED”、 “MAY”和“OPTIONAL”在本文件的规范部分应按RFC 2119中描述的方式进行解释。 但是,为了提高可读性,这些词在本规范中并不都是以大写字母出现。

本规范的所有文本都是规范性的,除非明确标记为非规范性、示例和注释。[RFC2119]

本规范中的示例以“例如”开头,或以class="example"与规范文本分开,例如:

这是一个说明性示例。

说明性注释以“注意”开头,并以class="note"与规范文本分开,例如:

注意,这是一个说明性注释。

建议是规范性部分,样式特殊以引起注意,并以<strong class="advisement">与其他规范文本分开,例如: 用户代理必须提供可访问的替代方案。

符合性类别

本规范的符合性定义为三个符合性类别:

样式表
一个CSS样式表
渲染器
一个用户代理,用于解释样式表的语义并渲染使用它们的文档。
创作工具
一个用户代理,用于编写样式表。

如果样式表的所有语句使用本模块定义的语法,并且根据通用CSS语法和本模块中定义的每个特征的各自语法有效,则样式表符合本规范。

如果渲染器除了按照相关规范解释样式表外,还通过正确解析本规范定义的所有特征并相应地渲染文档,则渲染器符合本规范。然而,由于设备的限制而导致用户代理无法正确渲染文档并不使用户代理不符合规范。(例如,用户代理不需要在单色显示器上渲染颜色。)

如果创作工具编写的样式表在通用CSS语法和本模块中每个特征的各自语法上都是语法正确的,并满足本模块中描述的样式表的所有其他符合性要求,则创作工具符合本规范。

CSS 负责任实施的要求

以下部分定义了几个符合性要求,以负责任的方式实施 CSS,促进当前和未来的互操作性。

部分实施

为了让作者能够利用向前兼容的解析规则来分配回退值,CSS 渲染器 必须 将所有无可用支持级别的 @ 规则、属性、属性值、关键字和其他语法结构视为无效(并适当地忽略。 特别是,用户代理 不得 在单个多值属性声明中选择性忽略不支持的属性值并认可支持的值:如果任何值被视为无效(因为不支持的值必须如此),则 CSS 要求整个声明被忽略。

不稳定和专有特性的实现

为了避免与未来稳定的 CSS 特性发生冲突,CSS 工作组建议遵循最佳实践来实现不稳定特性和专有扩展

CR 级特性的实现

一旦规范达到候选推荐阶段,实施者应发布任何他们能证明根据规范正确实施的 CR 级特性的无前缀实现,并应避免公开该特性的带前缀变体。

为了建立和维护 CSS 在实现间的互操作性,CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 特性的无前缀实现之前向 W3C 提交实施报告(如有必要,还需提交用于该实施报告的测试用例)。提交给 W3C 的测试用例将接受 CSS 工作组的审查和更正。

有关提交测试用例和实施报告的更多信息,请访问 CSS 工作组的网站 https://www.w3.org/Style/CSS/Test/。 如有问题,请联系 public-css-testsuite@w3.org 邮件列表。

CR 退出标准

为了将此规范提升为提案推荐,必须有至少两个独立、互操作的实现每个特性。每个特性可以由不同产品的不同集合实现,没有要求所有特性必须由同一产品实现。为此标准的目的,我们定义以下术语:

独立
每个实现必须由不同的方开发,并且不能共享、重用或派生于另一个合格实现所使用的代码。与本规范的实现无关的代码部分对此要求不适用。
互操作
通过官方 CSS 测试套件中的相关测试用例,或者如果实现不是 Web 浏览器,则通过等效测试。每个相关测试在测试套件中应有一个等效测试创建,如果这样的用户代理(UA)要声称互操作性。此外,如果这样的 UA 要用于声称互操作性,则必须有一个或多个其他 UA 也能以相同的方式通过这些等效测试。为了进行同行评审,等效测试必须公开可用。
实现
一个用户代理:
  1. 实现该规范。
  2. 向公众开放。实现可以是出货产品或其他公开版本(即,beta 版本、预览版或“夜间构建”)。非出货产品版本必须已实现特性至少一个月,以证明稳定性。
  3. 不是实验性的(即,专门设计为通过测试套件并且不打算继续正常使用的版本)。

规范将在候选推荐阶段保持至少六个月。

索引

本规范定义的术语

通过引用定义的术语

参考文献

规范性参考文献

[CSS-BOX-3]
Elika Etemad. CSS Box Model Module Level 3. 2018年8月9日. WD. URL: https://www.w3.org/TR/css-box-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 2018年8月28日. CR. URL: https://www.w3.org/TR/css-cascade-4/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 2018年8月28日. CR. URL: https://www.w3.org/TR/css-display-3/
[CSS-MASKING-1]
Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. 2014年8月26日. CR. URL: https://www.w3.org/TR/css-masking-1/
[CSS-OVERFLOW-3]
David Baron; Elika Etemad; Florian Rivoal. CSS Overflow Module Level 3. 2018年7月31日. WD. URL: https://www.w3.org/TR/css-overflow-3/
[CSS-SHAPES-1]
Vincent Hardy; Rossen Atanassov; Alan Stearns. CSS Shapes Module Level 1. 2014年3月20日. CR. URL: https://www.w3.org/TR/css-shapes-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 2018年8月14日. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 2018年10月10日. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2018年5月24日. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS21]
Bert Bos; 等. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011年6月7日. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-REGIONS]
Rossen Atanassov; Alan Stearns. CSS Regions Module Level 1. 2014年10月9日. WD. URL: https://www.w3.org/TR/css-regions-1/
[CSS3-SIZING]
Tab Atkins Jr.; Elika Etemad. CSS Intrinsic & Extrinsic Sizing Module Level 3. 2018年3月4日. WD. URL: https://www.w3.org/TR/css-sizing-3/
[CSS3-TRANSFORMS]
Simon Fraser; 等. CSS Transforms Module Level 1. 2017年11月30日. WD. URL: https://www.w3.org/TR/css-transforms-1/
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 2018年5月24日. CR. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS3BG]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2017年10月17日. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS3COL]
Florian Rivoal; Rachel Andrew. CSS Multi-column Layout Module Level 1. 2018年5月28日. WD. URL: https://www.w3.org/TR/css-multicol-1/
[CSS3PAGE]
Elika Etemad; Simon Sapin. CSS Paged Media Module Level 3. 2018年10月18日. WD. URL: https://www.w3.org/TR/css-page-3/
[RFC2119]
S. Bradner. RFC中用于指示要求级别的关键词. 1997年3月. 当前最佳实践. URL: https://tools.ietf.org/html/rfc2119

信息性参考文献

[CSS-FLEXBOX-1]
Tab Atkins Jr.; 等. CSS Flexible Box Layout Module Level 1. 2018年11月19日. CR. URL: https://www.w3.org/TR/css-flexbox-1/
[CSS-GRID-1]
Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. CSS Grid Layout Module Level 1. 2017年12月14日. CR. URL: https://www.w3.org/TR/css-grid-1/
[CSS-POSITION-3]
Rossen Atanassov; Arron Eicholz. CSS Positioned Layout Module Level 3. 2016年5月17日. WD. URL: https://www.w3.org/TR/css-position-3/
[CSS3TEXT]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 2018年9月20日. WD. URL: https://www.w3.org/TR/css-text-3/

属性索引

名称 初始值 适用对象 继承 百分比 媒体 动画类型 规范顺序 计算值
box-decoration-break slice | clone slice 所有元素 不适用 可视 离散 按语法 指定关键词
break-after auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region auto 块级盒子、网格项目、弹性项目、表行组、表行(但见正文) 不适用 可视 离散 按语法 指定关键词
break-before auto | avoid | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region auto 块级盒子、网格项目、弹性项目、表行组、表行(但见正文) 不适用 可视 离散 按语法 指定关键词
break-inside auto | avoid | avoid-page | avoid-column | avoid-region auto 除内联盒子、内部ruby盒子、表列盒子、表列组盒子、绝对定位盒子之外的所有元素 不适用 可视 离散 按语法 指定关键词
orphans <integer> 2 建立内联格式化上下文的块容器 不适用 可视 按计算值类型 按语法 指定整数
widows <integer> 2 建立内联格式化上下文的块容器 不适用 可视 按计算值类型 按语法 指定整数