CSS布局的前世今生

文章来源:fantasai的演讲记录

黑暗时代

直到1990年代中期，网页设计仍然不堪入目，HTML元素里混杂着样式控制，例如用H1来表示更大的字体，在TABLE里设置背景色，当时算得上技巧别致的布局方法是在TABLE里放置透明的GIF图片来占位。

CSS1时代

90年代后期，CSS被发明出来的初心是为了让样式与结构分离，用一种简便的语法把控制样式的代码写在一个独立的文件内，这种概念在当时显得超前。
CSS1并没有真正控制布局的工具，它主要是为了代替HTML里一些与样式相关的属性，例如宽度、高度。CSS1定义的属性有width、height、float、clear、margin、padding、backgrounds、borders、fonts、list styles、alignment、white-space等。其中float是为了代替HTML里用于IMG和TABLE的align属性，float在CSS1的设计意图里并非用于左右布局，仅仅是按照float的字面意义——实现图文环绕的效果。
CSS1的主流布局方法仍然是TABLE。边距margin和padding的出现，使得我们可以在TABLE之间实现间隔，取代过去用于占位的透明GIF以及换行符BR。这些概念在今日看来理所当然，但在当时却是革命性的。

CSS2时代

1998年W3C发布了CSS2，把当时最先进的布局工具引入CSS。通过display属性的灵活使用，HTML的任意元素可以被转换为任意的显示方式。网页设计者不必再被HTML元素的固有布局限制，能够在保证语义的基础上，实现更灵活的视觉效果。例如导航菜单能够横排并列，为了保持sidebar和main两列高度一致，可以把它们都设为display:table-cell。
此时，布局思想仍然是以TABLE为基础，display包含了众多与table等价的值，是为了方便其他元素转换为table。然而，由于不同浏览器的内核差异，以table为基础的布局方法很难实现跨浏览器兼容。
在这样的背景下，聪明的网页设计者开始发掘其他属性来控制布局，浮动和定位的地位一跃成为主流，奠定了所谓DIV布局的江山。这种布局思想的灵活性非常强，充分利用CSS2里的各种材料，衍生出无数技巧。但从宏观结构的角度来看，技巧性布局的做法像是在建造房子时不搭建钢筋混凝土框架、仅仅用混杂的材料胶粘拼接而成。不利于维护，也不利于理解。
CSS的工作组一直在为了“让样式的构建和表达更具意义”而努力。在CSS2的实践过程中发现存在诸多模糊之处，有些特性缺乏实用性，浏览器的兼容性更成为切图人员的噩梦。2002年，CSS2.1修订版发布，弥补了很多漏洞。与此同时，浏览器开发商也在逐步改善对CSS的支持。CSS2.1在2000年代后期稳固了统治地位，为CSS3标准的制定打下坚实基础。

CSS标准的发展与浏览器市场的变化密不可分。在黑暗年代和CSS1初生时期，Netscape与IE争霸；21世纪初，IE6一统江湖；2000年代中期，各类浏览器崛起，兼容性成为重要挑战；2000年代后期，浏览器对CSS的支持渐趋一致；2010年代初，随着移动端的需求，HTML5和CSS3兴盛。

CSS3时代

CSS3采用模块化设计，各个部分可以各自发展升级，主要分为四块（从易到难）：

• 页面处理能力：例如选择器和媒体查询。
• 视觉装饰效果：例如多背景、圆角、边框图片、渐变。
• 字体和国际化：例如垂直书写、自定义字体、换行和对齐的控制。
• 布局：这是最复杂、最具难度的一部分。

网页VS打印

• 打印：明确知道打印的尺寸、可自由调节内容布局、反复预览调试、而且打印出来所见即所得，所有人能看到一致的结果。
• 网页：不同的用户有不同的客户端设置、不同设备的屏幕尺寸不一致、分辨率不一致、用户会缩放浏览器、缩放字体、还会生成你无法控制的内容。你还没机会改。用户必然会在不同的场景下浏览网页。必须保证在用户第一次打开时正常显示页面，并能够适应用户无止境的场景变换。
  网页与打印的差别，意味着网页布局必须具备四个特性：
• 灵活性
• 适应性
• 自动化
• 健壮性

CSS3布局：设计原则

CSS3是CSS工作组首次要为2D布局设计一个含义明晰的系统。这套系统需要具备：

• 灵活性：适应不同的屏幕尺寸、字体、生成内容等。
• 全面性：在合理的约束条件下，给予网页设计者足够的发挥空间；既能便捷实现常用的效果，也能满足复杂的技巧。
• 健壮性：当遇到意外状况（例如未知的字体、超长的文本、超小的屏幕）时，页面仍能保持基本的结构和可读性，不至于崩溃。
• 易理解：长期以来，DIV布局不易于理解，因为当初就不是为了布局设计的。CSS3的目标是设定更清楚的布局语法，清楚反映出设计者的布局意图。
• 性能优：网页是多个应用交互的平台，布局系统需要考虑性能，避免多重嵌套之类的写法。

CSS3的布局模块

• 多列布局
  这是最早确定下来的规范之一，易于使用，但只针对较为特定的布局场景。使用column属性时，设置的值并不是绝对的，而是一组让浏览器去适配的目标。多列布局系统会根据客户端的实际尺寸灵活调整列宽，列的高度也会根据内容来平衡，这是多列布局的优点。
  当处于内容过长、屏幕狭窄的场景内，多列布局会暴露弊端，用户不得不反复上下滚动。最适合多列布局的场景是较短篇幅的内容或者翻页媒体。多列布局能够很好的兼容IE9之后的浏览器。
• 弹性布局
  弹性布局引入了弹性尺寸的概念，既可以指定绝对的比例，也可以让多余的空间自动分配。弹性布局适用于对一条直线上（沿坐标轴）各个元素尺寸的控制，属于一维布局，能够灵活设置一个坐标轴上各个元素的尺寸、对齐、排序。
• 网格布局
  目前仅有IE10以上版本支持部分属性，尚未进入实用阶段。在这种布局下，可将元素声明为网格，给予一定的行、列空间，再把后代元素填充进去。对于不同的网格空间，能够定义其大小、位置和层级。
  网格布局是二维布局，思路是为了摆脱HTML结构以及文档流从上至下的限制，有利于响应式设计。利用网格线的范围设置，可以轻松让不同单元格的内容实现互换，不需要像position布局那样计算尺寸。通过合并单元格，实现更复杂的布局。
• 区域（Regions）和排除（Exclusions）
  “区域”和“排除”的概念来源于Adobe InDesign的排版方法，借鉴印刷媒体的布局优势。
  使用“区域”布局时，可以指定文档流的内容源和多个目标区域，让内容源在目标区域里“流动”，多个目标区域的灵活布局能够使内容流动变得非常丰富多彩，不再拘泥于常规的文档流。
  “排除”布局是建立在实现图文环绕效果的思路上，float元素虽然是为图文环绕而生，但在浮动位置的设置上受到限制。wrap-flow:both属性能够让文字环绕在Exclusion元素两侧。甚至可以使用Shapes模块来定义被环绕元素的形状，不过被环绕元素的位置由四周的内容来决定，很消耗性能，精确的视觉效果和性能不可兼得。
• 媒体查询
  媒体查询允许我们针对不同的输出环境配置不同的CSS，只需要根据需要设定临界值，在各个临界值区间内输出不同的布局。

CSS规范的产生过程

三个阶段

• 设计阶段：工作草案；
  • 探索阶段：变化很多，部分方案可能不会进入成熟的规范。
  • 修订阶段：模块接近完成，功能应用范围有了较好的定义，但还需要经历评审程序，解决细节问题。
  • 精炼阶段：已经能够完备地交付候选推荐，仍需要精细地打磨，发布最终征求意见稿。
• 测试阶段：候选推荐；
  • 由多个独立团队测试规范的精确性和互通性，建立测试套件，收集测试结果，至少需要有两个独立的实例能通过测试。
• 维护阶段：推荐标准；

  • 正式成为推荐标准前，要确保测试时遇到的问题都可解释，遇到的bug都已解决，然后进入维护期。
    详细可参考下图：

    
    W3C技术报告发展过程
    

    当工作组暂停或关闭时，会发布工作组备忘（Working Group Note）；工作组重启后，备忘恢复为工作草案。

创新资源

对CSS的建议来源于四面八方，包括实践、设计者、工作组的专家等。工作组并没有决断者，一个好的设计需要让所有参与者接受。例如圆角、过渡、动画、转换是出于实践的需求，多重背景、选择器、多列布局、媒体查询、颜色格式是基于规范的理论，边框图像是出于设计目的，伸缩布局、文本是各种来源综合形成的规范。

评审和修订

建立规范的过程，并不都是从草案起步。很大程度上是在回应反馈的过程中不断评审、修订，发展出一套东西。