对新CSS规范草案的解读_html/css_WEB-ITnose

CSS是一种描述文档样式的语言，它不依赖于HTML，可以用于许多其他标记语言。它也不只是用于视觉媒介，还用于听觉媒介。

在CSS的世界里只有线框，用CSS思考就是用线框去思考，它给文档上所有可视或可读的东西都画了线框。这些线框的嵌套关系和文档结构上元素嵌套关系是不一样的，特定的排版方式都会改变它们的嵌套关系。首先确认线框的嵌套关系，再确认这个线框里所有线框的互相影响，记住关于尺寸，摆放位置，材质皮肤的计算规则。

我觉得把box翻译成盒子是欠妥的，还不如线框。在中文里盒子是个立体实物的概念，如果用盒子去理解CSS box会带来不必要的副作用，CSS更适合用传统印刷排版术语来理解。比如子box溢出父box的情况，如果用盒子去理解就会很怪，但用线框去理解就简单多了，类似出版术语bleed。在印刷排版领域大量使用的框术语，和CSS的box极其类似，为什么不直接用，非要生造个盒子出来。其实不光是box，还有很多地方的翻译都能套用排版术语。

最新的草案描述和老规范的术语定义区别大。而且现在CSS规范划分成独立的子模块形式发布，一些基础模块的术语定义没有确定，造成依赖这些模块的其他模块术语定义也很混乱。阅读不同模块规范能发现互相用到了相同术语，但是定义却不一样。他们换了不同的说法描述这些规则，他们想建立更好的术语体系。规范是对现实中厂商的具体实现方案和开发者的具体开发方案的标准化。其实就是让不同方案的主导者互相妥协，通过谈判达成一致意见，用来规范和要求不同的厂商和开发者必须按统一的方案执行。

Use tomorrow’s CSS syntax, today.

http://cssnext.io/

这个类似JS的babel。让我们提前使用CSS新规范的内容，而不用等到浏览器支持。但是因为CSS的特殊性，cssnext和babel比起来，还太low了。在CSS这块，估计在很长时间里都只能使用老旧但安全的方案。

理解CSS规范: 就算你不是一名计算机科学系的学生，甚至不用满十八岁或拿到学士学位，都可以读懂 W3C 的 CSS 文档，前提是你得乐于钻研，能耐下心，以及注重细节。

最新CSS规范草案

https://drafts.csswg.org/

相关内容汇总：

CSS Device Adaptation Module

The viewport在老规范里面，viewport术语只适用于continuous media，@viewport applies to continuous media, and @page to paged media。现在viewport适用于所有media。

这个规范介绍了一种通过the user agent (UA)重写viewport尺寸的方法。 因此我们需要提出初始视窗the initial viewport和实际视窗the actual viewport的不同。

initial viewport

初始视窗是指在任何UA或作者的样式把UA的屏幕窗口或可视区域的视窗覆盖前的那个视窗。注意初始视窗的尺寸将随着UA的窗口或视区的尺寸而变化。

actual viewport

实际视窗是指通过串联所有样式表的视窗描述符viewport descriptors，并且按CSS规则应用后的视窗。

当实际视窗不能全部显示于当前UA的窗口或视区时，如果不是因为实际视窗大于初始视窗，那就是因为缩放导致实际视窗只能显示部分。UA应该提供滚动条或者拖拽机制。

也就是初始视窗是最终显示媒介的可视区域尺寸，而实际视窗则是样式表指定的尺寸，可以设置得和初始一样，也可以比它大，如果大了就会有部分内容看不到，需要滚动或拖拽才能看到。比如window.innerWidth/Height就是initial viewport的尺寸。document.documentElement.clientWidth/Height就是actual viewport的尺寸。

如果文档根元素的方向direction属性值是ltr，推荐实际视窗的左上角和UA窗口或视区的左上角是对齐的，同理，direction属性值是rtl则右上角对齐。

Media Queries

由于渲染文档的媒介有很多，初始包围区的尺寸和设备方向都会影响一个媒介查询计算的结果，意思是在media queries上要特别注意@viewport rules的影响。Media Queries Level

媒介查询允许作者检测和查询UA或显示设备的值或者特征，据此把文档渲染成独有的样式。通过CSS @media rule按条件给文档应用不同的样式。

Media Queries Level 4叙述了媒介查询 Media Queries，媒介类型Media Type，媒介特征Media Features的句法和机制。

一个媒介查询是一个逻辑运算表达式，它的值是true或false。由media type和media condition两部分组成，如果都为真，那么这个表达式的值为真，否则为假。

多个媒介查询可以合并成一个用逗号分隔媒介查询列表。

媒介类型是指UA的宽泛类别。最初媒介类型集合的定义是在HTML4规范中，用于link元素的media属性。

从以往情况看，Media Types不能很好的区分日益复杂的UA情况。所以放弃了扩展媒介类型来解决问题，而是采用更精细的Media Features。句法上，media features看起来像CSS属性。每个媒介特性分两大类，范围range类或者单独discrete类。范围类特性的名字通常带有min-或max-这样的前缀。单独类特性值通常是规范指定关键字或者布尔数字0或1之类。

多个媒介特性可以使用逻辑运算符（not and or）组成一个媒介条件判断语句。CSS Display Module

这个模块描述如何从文档元素树the document element tree生成CSS编排线框树CSS formatting box tree，并且定义了display和box-suppress属性，用来控制线框boxex。

The viewport and the canvas 视窗和画布 视窗是浏览文档的Media的可视区域。对于所有媒体来说，术语画布用来描述格式化结构体渲染后的显示空间。这个画布的尺寸是无限的。

CSS是一种描述结构化文档（比如HTML和XML）在显示屏，印刷品，语音流等媒介上如何渲染的语言。

CSS把一个组织成元素树的源文档渲染在画布canvas上（比如显示屏，一张纸，一段语音流）。要做到这点，它生成一个中介结构，线框树box tree，它表示已渲染文档的编排结构。

每个线框表示它对应的元素或伪元素在画布上出现的空间或时间。

创建线框树box tree的过程。

CSS首先使用级联cascading和继承inheritance规则给源节点树上的每个元素的每个CSS属性赋一个值。

然后按每个元素的display和box-suppress属性设置来为其生成零个或多个线框boxes，通常一个元素生成一个单独的线框box。然而一些display属性值 (e.g. display: list-item)会生成多个线框 (e.g. a principal block box and a marker box)，并且一些属性值(比如display:none, display: contents, and box-suppress: discard) 会造成这个元素或者其后代根本不生成任何线框boex。

除非另有说明，线框boxes的样式和生成它们的元素一样。它们通常被叫成它们的显示类型display type，比如一个display属性是block的元素生成的线框box叫做块状线框“block box”或者块“block”。

一个匿名线框anonymous box是一个不与任何元素相关的线框box。

匿名线框Anonymous boxes是在需要特殊组织线框树the box tree的情况下生成，这种情况是需要一个特殊的嵌套结构，这个结构中的线框boxes不是从元素树生成的。

例如，当一个table cell box需要一个特殊类型的父box (the table row box)的时候，如果它的父box不是一个table row box，将生成一个anonymous table row box来嵌套它. (See [CSS2] § 17.2.1.) 不同于元素生成的box，元素生成的box样式是严格通过元素树继承的，只存在于box tree中的匿名boxes样式继承自它们的box tree。

在排版的过程中，一个box线框可能拆成多个片段. 是这么发生，例如, 当一个inline box分拆穿过多行的时候, 或者当一个block box分拆穿过一页或一列的时候，因此一个box由一个或多个box片段组成. See [CSS3-BREAK] for more information on fragmentation.CSS basic box model

CSS假定文档的呈现是以元素树为模型。每个元素是一个拥有零个以上子元素的有序列表，和一个可选的文本字符串，在这个列表前后以及子元素之间。每个子元素都有一个父元素，除了唯一一个元素没有父元素，它叫做根元素。

CSS描述每个元素element和每个文本字符串string of text如何从文档树模型转换为一组矩形框rectangular boxes来排版，其在画布上的尺寸，位置，堆叠层级都依赖于boxes的属性。

我们说一个元素生成一个或多个线框boxes。它们是许多不同类型的线框boxes。

The flow 流，有时也叫做normal flow正常流，是CSS中排版的两个基本类型之一，另一个是line layout [CSS3LINE]。其他CSS模块, 比如tables [CSS3TBL], positioning [CSS3POS], flex boxes [CSS3-FLEXBOX] and grid templates [CSS3LAYOUT]都是基于流模型flow model实现的，通过把一个文档分拆成不止一个流，在画布上通过这些不同的流来进行定位和校准。

一个flow是从一个box开始构建，当一个box满足以下规则时，它叫做flow root：

The value of ‘float’ is not ‘none’.

The used value of ‘overflow’ is not ‘visible’.

The value of ‘display’ is ‘table-cell’, ‘table-caption’ (see [CSS3TBL]), ‘inline-block’ or ‘inline-table’.

The value of ‘position’ is neither ‘static’ nor ‘relative’ (see [CSS3POS]).

The value of ‘block-progression’ is ‘lr’ or ‘rl’ and the value of ‘block-progression’ of its parent box is ‘tb’

The value of ‘block-progression’ is ‘tb’ and the value of ‘block-progression’ of its parent box is ‘lr’ or ‘rl’.

flow root术语在CSS level 2 规范中定义是不同的. 在老规范中一个flow root定义为 “an element that establishes a new formatting context.”

我们说flow从flow root引出。注意flow root本身不是它引出的流flow的一部分，每个flow root最多引出一个flow。

一个flow root的flow是一组boxes。当一个元素的box是flow root，而且它的子元素的box满足以下规则时，则属于这个flow:

The used value of its ‘display’ is ‘block’, ‘list-item’, ‘table’ or