1. 前端样式开发演变之路
赵雷 / 复合搜索部
zhaolei07@baidu.com

2. 前端样式开发演变之路
- 了解前端样式开发 技术与理念 的 发展史 与 新变化
课程目标

3. 前端样式开发演变之路
- 了解前端样式开发 技术与理念 的 发展史 与 新变化
- 结合 项目场景，选择最合适的 样式开发方案
课程目标

4. 前端样式开发演变之路
- 了解前端样式开发 技术与理念 的 发展史 与 新变化
- 结合 项目场景，选择最合适的 样式开发方案
- 了解 样式框架 的风格与设计思路
课程目标

5. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

6. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

7. 样式初始化关于样式初始化

8. 样式初始化
统一浏览器的默认样式
关于样式初始化

9. 样式初始化
统一浏览器的默认样式
关于样式初始化
CSS Reset & Normalize

10. 样式初始化简单粗暴的 CSS Reset
Global White Space Reset.

11. 样式初始化
- 最简单 √
简单粗暴的 CSS Reset
Global White Space Reset.

12. 样式初始化
- 最简单 √
- 副作用大 X
简单粗暴的 CSS Reset
Global White Space Reset.

13. 样式初始化
- 最简单 √
- 副作用大 X
- 功能有限 X
简单粗暴的 CSS Reset
Global White Space Reset.

14. 样式初始化最早的 CSS Reset

15. 样式初始化最早的 CSS Reset

16. 样式初始化Eric Meyer CSS Reset

17. 样式初始化
- 默认样式被重置 O
CSS Reset 的优缺点

18. 样式初始化
- 默认样式被重置 O
- 元素样式的一致性高 √
CSS Reset 的优缺点

19. 样式初始化
- 默认样式被重置 O
- 元素样式的一致性高 √
- 适合设计比较“重”的站点 √
CSS Reset 的优缺点

20. 样式初始化
- 默认样式被重置 O
- 元素样式的一致性高 √
- 适合设计比较“重”的站点 √
- 通常需要重写基础样式 X
CSS Reset 的优缺点

21. 样式初始化
- 默认样式被重置 O
- 元素样式的一致性高 √
- 适合设计比较“重”的站点 √
- 通常需要重写基础样式 X
- 继承链太多，调试有干扰 X
CSS Reset 的优缺点

22. 样式初始化
- 默认样式被重置 O
- 元素样式的一致性高 √
- 适合设计比较“重”的站点 √
- 通常需要重写基础样式 X
- 继承链太多，调试有干扰 X
CSS Reset 的优缺点

23. 样式初始化Normalize 样式归一化

24. 样式初始化Normalize 样式归一化

25. 样式初始化
- 保留默认样式 O
Normalize 的优缺点

26. 样式初始化
- 保留默认样式 O
- 修正非常容易出bug的浏览器差异 √
Normalize 的优缺点

27. 样式初始化
- 保留默认样式 O
- 修正非常容易出bug的浏览器差异 √
- 对元素的处理更精确 √
Normalize 的优缺点

28. 样式初始化
- 保留默认样式 O
- 修正非常容易出bug的浏览器差异 √
- 对元素的处理更精确 √
- 在非正文区使用的标签，需手动重置 X
Normalize 的优缺点

29. 样式初始化
- Normalize 擅长 正文排版
- CSS Reset 擅长 样式布局
Normalize 与 CSS Reset 混搭

30. 样式初始化
- Normalize 擅长 正文排版
- CSS Reset 擅长 样式布局
Normalize 与 CSS Reset 混搭
est - 基于 LESS 的样式工具库

31. 样式初始化更多场景？

32. 样式初始化更多场景？

33. 样式初始化更多场景？

34. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

35. 布局从表格布局说起...
2003-02-13 / ChinaRen首页

36. 布局从表格布局说起...
2003-02-13 / ChinaRen首页

41. 布局表格布局还活着
仍然是 电子邮件 的主要布局方式

42. 布局表格布局还活着
仍然是 电子邮件 的主要布局方式

43. 布局浏览器市场的变化
操作系统 发布时间 IE版本
Windows 98 1998-6-25 4.01
Windows 98 SE 1999-5-5 5.0
Windows Me 2000-9-14 5.5
Windows XP 2001-8-27 6.0
2004Q4：IE市场占有率91.35% *
* 数据来自 Net Applications: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

44. 布局浏览器市场的变化
操作系统 发布时间 IE版本
Windows 98 1998-6-25 4.01
Windows 98 SE 1999-5-5 5.0
Windows Me 2000-9-14 5.5
Windows XP 2001-8-27 6.0
2004Q4：IE市场占有率91.35% *
IE6 刚推出时是最先进的浏览器
它的普及为Web标准化进程打下了基础
!
（虽然它在几年后成为前端的噩梦）
* 数据来自 Net Applications: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

45. 布局
2003-5-14
Designing with Web Standards
2004-5-1
网站重构：应用Web标准进行设计
“网站重构”的热潮

46. 布局
2003-5-14
Designing with Web Standards
2004-5-1
网站重构：应用Web标准进行设计
“网站重构”的热潮

47. 布局
2003-5-14
Designing with Web Standards
2004-5-1
网站重构：应用Web标准进行设计
“网站重构”的热潮

48. 布局
2003-5-14
Designing with Web Standards
2004-5-1
网站重构：应用Web标准进行设计
“网站重构”的热潮

49. 布局
2003-5-14
Designing with Web Standards
2004-5-1
网站重构：应用Web标准进行设计
“网站重构”的热潮
“DIV+CSS”？

50. 布局
- 有哪些清除浮动的方法？
- 兼顾语义与样式的菜单？
- 用 margin 能做哪些事儿？
- 左侧固定右侧自适应的布局？
- 中栏自适应，正文在前的三栏布局？
- 怎么优化打印布局？
- ……
布局方案的探索

51. 布局
- 有哪些清除浮动的方法？
- 兼顾语义与样式的菜单？
- 用 margin 能做哪些事儿？
- 左侧固定右侧自适应的布局？
- 中栏自适应，正文在前的三栏布局？
- 怎么优化打印布局？
- ……
布局方案的探索

52. 布局
- 有哪些清除浮动的方法？
- 兼顾语义与样式的菜单？
- 用 margin 能做哪些事儿？
- 左侧固定右侧自适应的布局？
- 中栏自适应，正文在前的三栏布局？
- 怎么优化打印布局？
- ……
布局方案的探索

53. 布局
- 有哪些清除浮动的方法？
- 兼顾语义与样式的菜单？
- 用 margin 能做哪些事儿？
- 左侧固定右侧自适应的布局？
- 中栏自适应，正文在前的三栏布局？
- 怎么优化打印布局？
- ……
布局方案的探索

54. 布局固化常见布局方案
est (LESS)

55. 布局栅格化
Blueprint CSS, 960gs, YUI CSS grids

56. 布局
- 不是银弹 O
栅格化：优缺点

57. 布局
- 不是银弹 O
- 开发效率高 √
栅格化：优缺点

58. 布局
- 不是银弹 O
- 开发效率高 √
- 视觉更规律 √
栅格化：优缺点

59. 布局
- 不是银弹 O
- 开发效率高 √
- 视觉更规律 √
- 对设计有要求 X
栅格化：优缺点

60. 布局
- 不是银弹 O
- 开发效率高 √
- 视觉更规律 √
- 对设计有要求 X
- 结构与样式耦合 X
栅格化：优缺点

61. 布局
- 不是银弹 O
- 开发效率高 √
- 视觉更规律 √
- 对设计有要求 X
- 结构与样式耦合 X
栅格化：优缺点

62. 布局栅格化：通过预处理器优化
LESSHTML
示例来自 semantic.gs

63. 布局瀑布流布局

64. 布局响应式网页设计

65. 布局响应式网页设计

66. 布局响应式网页设计

67. 布局响应式：Media Query

68. 布局响应式：Media Query
为所有 手机 与 平板 应用某些样式？

69. 布局响应式：Media Query
为所有 手机 与 平板 应用某些样式？
为 retina 屏的 电脑 应用某些样式？

70. 布局响应式：Media Query
@media 不支持 嵌套
为所有 手机 与 平板 应用某些样式？
为 retina 屏的 电脑 应用某些样式？

71. 布局响应式：Breakpoint 的思路
0px 400px 600px 800px 1050px
1 2 3 4 5
between(2, 3)
at(4)
above(4)
below(2)

72. 布局响应式：Breakpoint 的思路
0px 400px 600px 800px 1050px
1 2 3 4 5
between(2, 3)
at(4)
above(4)
below(2)
rider - 基于 Stylus 的 移动 样式工具库

73. 布局响应式：Breakpoint 的更多用法
rider (Stylus)

74. 布局retina 支持
@2x

75. 布局retina 支持
@2x
纯移动端的全 retina 方案

76. 布局布局与摄影

77. 布局布局与数学

78. 布局布局与数学
通过 预处理器，将经典的 布局模式 抽象出来

79. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

80. 排版每行显示多少字符，可读性更好？
- 中文以 35-45 个汉字为宜
- 英文以 50-75 个字符为宜
- 移动端内容区域不宜多栏布局
- 太多：容易读错行，很难长时间聚焦文本
- 太少：频繁换行，产生紧张情绪，视线提早跳到下一行

81. 排版每行显示多少字符，可读性更好？
- 中文以 35-45 个汉字为宜
- 英文以 50-75 个字符为宜
- 移动端内容区域不宜多栏布局
- 太多：容易读错行，很难长时间聚焦文本
- 太少：频繁换行，产生紧张情绪，视线提早跳到下一行

82. 排版每行显示多少字符，可读性更好？
- 中文以 35-45 个汉字为宜
- 英文以 50-75 个字符为宜
- 移动端内容区域不宜多栏布局
- 太多：容易读错行，很难长时间聚焦文本
- 太少：频繁换行，产生紧张情绪，视线提早跳到下一行

83. 排版每行显示多少字符，可读性更好？
- 中文以 35-45 个汉字为宜
- 英文以 50-75 个字符为宜
- 移动端内容区域不宜多栏布局
- 太多：容易读错行，很难长时间聚焦文本
- 太少：频繁换行，产生紧张情绪，视线提早跳到下一行

84. 排版垂直的旋律 (vertical rhythm)
字型排版学中的空间就像是音乐
中的时间。空间可以被切成⽆无限
多块，但在设计上，只要⼀一些合
於比例的间隙，却比⼀一⼤大堆任意
⽽而⽆无理的切割还有用许多。
— Robert Bringhurst
“
”

85. 排版垂直的旋律 (vertical rhythm)
字型排版学中的空间就像是音乐
中的时间。空间可以被切成⽆无限
多块，但在设计上，只要⼀一些合
於比例的间隙，却比⼀一⼤大堆任意
⽽而⽆无理的切割还有用许多。
— Robert Bringhurst
“
”

86. 排版预处理器下垂直的韵律
est (LESS)

87. - 首字下沉
- 着重号
- 专名号
- 破折号
- 人民币
- 注音
- 更多中文排版优化……
排版中文排版

88. - 首字下沉
- 着重号
- 专名号
- 破折号
- 人民币
- 注音
- 更多中文排版优化……
排版中文排版

89. - 首字下沉
- 着重号
- 专名号
- 破折号
- 人民币
- 注音
- 更多中文排版优化……
排版中文排版

90. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 图形、音频与视频
- 预处理器
目录

91. 字体哪些字体可以直接用
英文安全字体：
Arial, Verdana, Georgia, Courier New, Times New Roman, Impact

92. 字体哪些字体可以直接用
英文安全字体：
Arial, Verdana, Georgia, Courier New, Times New Roman, Impact
中文安全字体（不考虑跨平台）：
宋体，黑体，仿宋，楷体
微软雅黑（Windows XP 以上）

93. 字体哪些字体可以直接用
英文安全字体：
Arial, Verdana, Georgia, Courier New, Times New Roman, Impact
中文安全字体（不考虑跨平台）：
宋体，黑体，仿宋，楷体
微软雅黑（Windows XP 以上）
'Helvetica Neue', Arial, 'Hiragino Sans GB',
'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
推荐的字体设置：

94. 字体图片字体

95. 字体图片字体
目前仍常见于电商商品详情页

96. - Flash：sIFR (Scalable Inman Flash Replacement)
字体临时的技术方案

97. - Flash：sIFR (Scalable Inman Flash Replacement)
字体临时的技术方案
SWF
载入内嵌字体
JavaScript
取目标文本
渲染字体
Flash
替换原文本

98. - Flash：sIFR (Scalable Inman Flash Replacement)
字体临时的技术方案
- Canvas & VML：cufon
SWF
载入内嵌字体
JavaScript
取目标文本
渲染字体
Flash
替换原文本

99. - Flash：sIFR (Scalable Inman Flash Replacement)
字体临时的技术方案
- Canvas & VML：cufon
SWF
载入内嵌字体
JavaScript
取目标文本
渲染字体
Flash
替换原文本
Font
(TTF, OTF)
SVG Font VML Paths JavaScript/JSON
生成字体

100. 字体@font-face

101. 字体
- 生成多种字体格式
@font-face

102. 字体
- 生成多种字体格式
- 英文字体广泛使用
@font-face

103. 字体
- 生成多种字体格式
- 英文字体广泛使用
- 图标字体
@font-face

104. 字体字体服务与工具

105. 字体字体服务与工具

106. 字体字体服务与工具
icomoon

107. 字体字体服务与工具
icomoon

108. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

109. 浏览器兼容性CSS Hack?

110. 浏览器兼容性CSS Hack?

111. 浏览器兼容性CSS Hack?

112. 浏览器兼容性CSS Hack?

113. 浏览器兼容性CSS Hack?
暴力、有效，经常会 掩盖 真实问题
(有时候又不得不用)

114. 浏览器兼容性IE 的兼容性问题
用 预处理器 解决兼容性问题

115. 浏览器兼容性IE 的兼容性问题
用 预处理器 解决兼容性问题

116. 浏览器兼容性浏览器的前缀们

117. 浏览器兼容性浏览器的前缀们

118. 浏览器兼容性浏览器的前缀们

119. 浏览器兼容性浏览器的前缀们
Autoprefixer 是一个 CSS 后处理器
它可以根据你设置的目标浏览器，自动添加前缀

120. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录

121. 预处理器CSS预处理器的类型

122. 预处理器
- CSS领域特定语言(DSL)
- Sass
- LESS
- Stylus
CSS预处理器的类型

123. 预处理器
- CSS领域特定语言(DSL)
- Sass
- LESS
- Stylus
- CSS后处理器（Postprocessor）
- Autoprefixer
- clean-css
- grunt-pixrem
- grunt-webpcss
CSS预处理器的类型

124. 预处理器CSS领域特定语言
DSL 源代码 DSL 分析树 DSL 静态分析树
CSS 静态分析树 CSS 代码

125. 预处理器
- 变量
- 嵌套
- 计算
- 判断
- 循环
- Mixin
- Block
- Function
- 扩展...
DSL 做的事情
提供语言级特性
需要主动编程

126. 预处理器CSS后处理器
CSS 源代码 CSS 分析树 CSS 代码
后处理

127. 预处理器
- 优化CSS结构
- 最小化CSS
- 添加浏览器私有前缀
- 兼容“未来标准”
后处理器做的事情
对CSS进行处理
自动的过程

128. 预处理器
开源框架 Rework、PostCSS
写一个后处理器

129. 预处理器新的工作流程
真的在面向 web 标准开发了么？

130. 预处理器新的工作流程
真的在面向 web 标准开发了么？
DSL 源代码 生产环境 CSS原来：

131. 预处理器新的工作流程
真的在面向 web 标准开发了么？
DSL 源代码 生产环境 CSS原来：

132. 预处理器新的工作流程
真的在面向 web 标准开发了么？
DSL 源代码 生产环境 CSS原来：
DSL 源代码 生产环境 CSS标准 CSS现在：

133. 预处理器面向标准CSS开发

134. 预处理器面向标准CSS开发

135. 预处理器面向标准CSS开发

136. 预处理器支持未来标准
CSS Custom Properties for Cascading Variables Module Level 1
W3C Last Call Working Draft, 6 May 2014

137. 预处理器支持未来标准
CSS Custom Properties for Cascading Variables Module Level 1
W3C Last Call Working Draft, 6 May 2014
rework-vars、rework-font-variant、rework-calc、rework-color-function

138. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录
样式框架的设计

139. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
目录
样式框架的设计
图形格式、表单、音频视频、可视化、无障碍、工具等

140. 样式框架的设计纯CSS框架

141. 样式框架的设计纯CSS框架

142. 样式框架的设计纯CSS框架

143. 样式框架的设计基于预处理器的CSS框架
Bootstrap 风格

144. 样式框架的设计基于预处理器的CSS框架
Bootstrap 风格
Mixin 风格

145. 样式框架的设计基于预处理器的CSS框架
Bootstrap 风格
Mixin 风格
est & rider

146. 样式框架的设计样式框架的风格与结构
Mixin 风格的 样式工具库
UI 主题
Mixin 风格的 UI样式基础库
业务 UI样式库
业务样式 快速构建项目 业务样式
输出语义CSS 非语义CSS Mixin

147. - 样式初始化
- 布局
- 排版
- 字体
- 浏览器兼容性
- 预处理器
- 样式框架的设计
目录

148. - 样式初始化
- Reset CSS 研究（八卦篇）
- About normalize.css
- Default styles in browsers
- WebKit default style sheet
- IE User Agent Style Sheets
- Default style sheet for HTML4
- 无障碍
- WCAG 2.0
- WCAG 2.0 中文版
- How to Meet WCAG 2.0
- 布局
- IE, Windows 98 / Me / XP
- rider - 基于 Stylus 的移动样式工具库
- est - 基于 LESS 的样式工具库
- Content-out Layout
- 排版
- Compose to a Vertical Rhythm
- 垂直的旋律
参考资料

149. 谢谢
EOF