Web应变之道

本书前两章介绍当今社会Web世界的现状和特征，从根源上认识Web的基因，得出正确的Web技术思维，后续章节围绕大家所面临的具体难题：新特性开发、多端的支持、变化的用户输入设备、最具表现力的Web载体图片和视频等主题展开详述，部分内容，作者会使用最精简的源码，帮助分析得出适合的解决方案。

莫卫红，花名莫魔，英文名meric mo。前端专家，10余年的互联网技术开发与架构经验，先后在招商银行、腾讯、阿里巴巴主导过金融业务、虚拟业务、游戏、电商交易、外贸服务等业务的技术研发，曾多次组建团队进行核心业务攻坚，有丰富的Web架构经验与团队管理经验。

前言 xiii
第 1 章 拥抱不确定性 1
拥抱不确定性 2
从微软独家垄断到今天百花齐放 4
我们现在所处的位置 5
浏览器 6
开放的 Web 平台 11
网络速度和质量 18
人机交互界面 19
屏幕分辨率和屏幕方向 21
像素密度 21
2% 究竟意味着什么？ 25
这正是我们想要的 26
第 2 章 掌控 Web 的不确定性 29
不要因 Web 的本性而责备它 30
识别和拥抱你的受众 30
测试并祈祷最好的结果 34
专注于最优，而不是绝对的解决方案 38
拥抱可访问性 40
为非文字的内容提供可替代的文本 41
确保信息和结构与表现的分离 44
确保可以用键盘进行所有功能性操作 44
除非必需的定时或移动，否则用户应当可以暂停内容 45
提供机制帮助用户找到内容、定位位置和导航页面 45
帮助用户避免犯错让纠正错误变得简单 46
为现在和未来的 UA 提供兼容（包括辅助技术） 47
不要止步于此 47
丢掉你的技术偏见 47
iPhone 是唯一的移动端体验 48
可关掉的，无法修复/重现的问题。 49
和主流的观点相反， IE 确实还存在 49
设身处地 51
丢掉你的框架库偏见 51
jQuery 52
MV* 框架 53
关注技术前沿 53
张开你的翅膀（并质疑你的推断） 55
第 3 章 新特性的开发 57
特征检测 58
一个比较复杂的特征检测案例 59
使用 Modernizr 库 60
旧版本 IE： Modernizr 让它现代化的案例 61
使用（和不使用） Modernizr 61
Modernizr 的特征检测 64
定制 Modernizr 67
使用 Modernizr 进行特征检测 68
跨浏览器的 Polyfils 71
其他的 Modernizr 方法 72
管理那些不可检测的特征 75
常用的特征检测及相关的 polyfils 77
“前端开发做该做的事情” 80
第 4 章 响应式设计与移动端体验设计81
波士顿环球报采用响应式重新设计 82
响应式设计真的适合所有网站？ 83
移动端优先， RESS 及其他通用的移动端开发 85
专用的移动体验 86
移动端优先 87
渐进增强 87
RESS 87
选择正确的开发捷径 88
你的团队的大小与技能 88
你的网站或应用的要求 88
你的用户类型 88
你的预算 89
响应式设计的好处 89
响应式的缺点 90
专用的移动端站点体验的优点 91
专用的移动端站点体验的缺点 92
Facebook 做什么，我们就要跟着做什么吗？或者是美国最大的站点在做
什么我们就要去做什么吗？ 93
选择对你项目有实际意义的架构 95
重定向应该解决逻辑问题 97
重定向选项 99
简单的重定向 99
更复杂的查询 103
总是在你的移动站点上提供一个出口 104
尽可能保持流体设计 106
不要吝啬于使用断点 109
相对单位 110
“接受事物的潮起潮落” 112
第5 章 处理用户输入 113
Web 上用户输入的现状 114
“触屏”检测的概念问题 116
“触屏”检测的技术问题 116
后果自负 118
彻底失败 119
局部失误 120
为各种潜在的用户输入方式做设计 122
为所有界面提供触摸功能 122
别依赖 Hover 122
拥抱明确性 123
处理所有的用户输入方式 123
触摸事件与鼠标事件的现状 123
别假设任何事，为所有人服务 137
第6 章 出奇复杂的Web 图片139
图片悄悄地变复杂了 140
提供尽可能小的文件尺寸 142
利用浏览器的预加载 142
为各种分辨率提供尺寸合适的图片 143
为具备多种像素比的设备提供正确尺寸的图片 143
在不同环境使用不同尺寸的图片或不同的图片 143
使用设计断点 144
提供正确的图片格式 144
图片很简单，并且应该保持简单 144
为 Web 去优化图片 144
JPEG 144
选择正确的图片格式 147
寻求 CDN 解决方案 148
响应式图片 148
通过配置去解决问题（至少不需要增加额外的事情） 149
srcset 属性 150
picture 元素 153
Picturefil、 picture 元素的 Polyfil 157
拥抱 SVG 158
服务端处理 162
超实用的开发指南 162
明确图片对你站点的重要性 163
把基本的处理做好 163
尽可能用最简单的方案 163
学会去爱 SVG 164
测试！ 164
小结 164
第7 章 极其复杂的 Web 视频165
核心技术 166
video 元素 166
通过 Flash 降级 169
存储与编解码 170
Video.js 173
Mime 类型和流媒体自适应比特率 175
用专业的方式去处理 177
YouTube 177
Vimeo 181
一个复杂的例子 184
第8 章 理想的 Web 187
事情总会变得更好（虽然偶尔会变得更糟） 188
Firefox 宣布支持 h.264 编解码 188
从消亡中回来的 picture 189
Point 事件或许真的会消失 189
我知道这样的事情会发生 190
让我们推动一切向前发展 190
开发人员、浏览器厂商和标准机构作用下的 Web 世界 190
快速、可靠、广泛地使用 Web 世界 191
Web 没有所谓的赢 193
开启我们想要的 Web 世界 194
索引195