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

译者序 Web作为当今世界最前沿的产业“互联网+“的核心载体，可谓包罗万象、博大精深；20年来，始终保持极速发展的势头，伴随移动端及物联网的发展，Web世界充满变化，在百花齐放、野蛮生长的同时，也孕育着Web固有的规律向前行；清晰地认识这一规律，有助于推进和加速Web的发展进程；制定一系列大家共同遵守的规范和标准绝不仅仅是某一个部门或机构的工作，W3C和WHATWG都深知这一点；真理源于实践，实践源于广大的技术开发人员，开发人员们只有清楚认知这一变化，才能在以后的技术生涯中走得更快、更好，成为这一技术革命的历史功臣。 21世纪初，我们开发一个Web页面，只需要关心PC台式机和Windows操作系统，主要的浏览器也只有IE，至多再考虑一下屏幕分辨率就能满足绝大部分用户的浏览诉求。不断地，各大厂商纷纷加入争夺浏览器的市场份额，掀起了浏览器之争；大约在2010年，Web的世界发生了历史性的转折，移动设备、物联网设备层出不穷，如何让我们的Web页面能够响应到多端、多平台，成为Web开发人员最苦恼的问题。同时，网络带宽的迅猛发展，降低了网速对设备的局限，如何更清晰、流畅、低成本地在各种移动设备中浏览图片、视频信息，成为用户对Web开发人员最基本的诉求；本书不断围绕这些变化，展开详述，有针对性地给出具体的解决方案，给大家一个清楚的认知。 本书前两章介绍当今社会Web世界的现状和特征，从根源上认识Web的基因，得出正确的Web技术思维，后续章节围绕大家所面临的具体难题：新特性开发、多端的支持、变化的用户输入设备、最具表现力的Web载体图片和视频等主题展开详述，部分内容，作者会使用最精简的源码，帮助分析得出适合的解决方案；不仅于此，作者期望所有Web相关的从业人员：设计师、开发人员、技术架构师、全栈工程师等能够加入Web阵营，尽力所能及之事，加速Web世界健康有序地发展。 正如我的挚友Rob Larsen所说，Web从来不是一个静止的平台，我们必须用发展变化、开放式的思维看待这一切，在以后的实验和工作中，用开放式的互联网思维规划我们的技术和产品，让互联网技术产生它应该具有的最大价值。 本书的实例代码、图片等资源均可从作者的GitHub中获取，书中涉及的非常多的Web数据及部分实践案例的相关资源均可从作者搭建的bit.ly站点上查看，国内用户可能需要使用代理访问。 公司的吴梦圆、李鑫、陈公司的吴梦圆、李鑫、陈振武，在本书初稿翻译期间给予我非常大的支持； 感谢电子工业出版社的张春雨和郑柳洁，是你们的信任与支持，让整个翻译与修订工作取得圆满的成果。本书部分内容，在表述上与作者生活的社会环境相关，翻译过程中，尽量保持了作者的本意，如察觉理解上有疏漏，或者存在勘误之处，欢迎大家前往GitHub（https://github.com/mericmo/the-uncertain-web），反馈您宝贵的建议，共同保障O＇REILLY系列图书的最高品质。 莫卫红（meric） 2015年冬于深圳 前言 现如今想要走进 Web 的世界，最好的方法便是放弃过去那一成不变的教条，并为不确定性而设计。接受不确定性是 Web 开发的核心原则，打破过去几年来赖以为继的规则，进而建构出面向未来的 Web 解决方案。 21 世纪初，基本上只有一种浏览器（ IE6）、一种平台（ Windows XP）、一种屏幕分辨率（ 1024×768）。在这种情况下，只用一台台式机就可以完成对主流 Web 产品的设计、开发、测试等工作。似乎最大的问题就是水平方向的问题，即针对 1280 像素的屏幕，应该可以设计得更好。 因为这个局限性，大家对于网站和应用程序的设计充满期望，希望任何人在任何地方看到的都是一样的。最佳实践大多是用一些一成不变的规则来驱动设计和开发。 对于主要的选择，比如基本栅格的尺寸，并无太多的选择余地。每个人都开始使用一个固定的 960 像素的栅格，然后将他们切成需要的尺寸。 如今就大不一样了，随着 iPhone 和 iPad 的登场、安卓设备的崛起，以及微软在桌面浏览器市场的两个强大对手（ Firefox 和 Chrome）的出现，开发者和设计师要驾驭非常多的可变因素。现在网站设计的每一个问题都有很多选项和变化。 最初，开发者和设计师试图创造一个新的规则来驾驭这一新的现状。但目标也在不断发展，一个新的确定性规则刚刚诞生，就会有一些新的缺陷显示着它的无能。人们设计和建立 iPhone 上的网站，并假设 Apple 在智能手机市场上将永远保持领先地位。他们假设触摸屏用户永远不会拥有鼠标，并只在触摸屏上测试功能的可用性。 过去几年，在安卓保持着巨大增长的同时，有鼠标和触摸功能的 Chrome 笔记本和Windows 8 笔记本电脑的出现证明了新规则的保质期是很短的。 甚至响应式 Web 设计（RWD）——一些人提出的这套与时俱进的设计和开发解决方案，其模式也无法面对复杂应用、网络带宽、移动端性能等问题的挑战。 结合 Web 标准、渐进增强、不断迭代的设计和开发方式，以及质疑现状的愿望，团队可以创建在现在和未来的大部分设备上都表现良好的站点和应用。通过专注于有良好降级方案的最佳实践，并且放弃寻找一个绝对解决方案的想法，设计和开发可以一起创造出一个快速、可靠、广泛使用的 Web 平台。 这本书不仅会勾勒出不确定性 Web 的概念和背后的原则，还会介绍一些通向成功的必要技巧。 用一个词来描述如今的互联网Web 开发平台的变革及 Web 可用设备的惊人增长，使得 Web 到达了前所未及的位置。在过去的十年间，我们已经从一个停滞的、只有很少浏览器和操作系统的平台变成了一个有活力的、服务着令人眼花缭乱的浏览器和设备的——开放式的 Web 平 台。 这真是一个很大的愿景。 问题在于，更多的时候，前线的工程师并没有机会看到这样一幅蓝图。你知道为什么吗——要跟上刚刚发布的新版本，通常都是一个极大的挑战。不论你是在为客户做一个网站，在开发你的 JavaScript 框架的最新版本，还是简单地写一篇通俗易懂的博客，都没有很多时间仔细思考整个 Web 的变化。相反，你专注于解决一个独立的问题，因为它们是你在工作时间应该做的事情。甚至那些被分配了跟进业界趋势的任务的人们也可能被某一个爆发的技术搞得失去整体判断。当你面对一个你正在关心的标准课题，仍会以一小时 10 封（长）邮件的速度浏览时，是很难看到一个整体的愿景的。 这就是这本书的由来。根据我从 GitHub、 StackOverflw、 Twitter 及 IRC 上的对话判断，看起来人们并没有真的意识到 Web 发生了多么根本的变化。无论是寻找一个判断是鼠标用户还是触摸用户的完美的检测方案，或是为响应式站点设计一系列“完美”的媒体查询特性，总是有很多的开发者仍然在寻找一个绝对的法则或是硬生生的最佳实践。人们还是在按照一个清晰、确定的界限，想以此寻求建设一个站点和应用的最佳方案。 尽管这些想法会让我们觉得安心，并且曾经是可行的，但那些日子已经一去不复返了。是时候采用新的方式了。 第一章开头引用的 Yehuda Katz 的话，正好巧妙地涵盖了整本书向你传递的两个方向。翻阅本书就能找到它，也可以直接在 Twitter（http://bit.ly/uw-katz）上看到这一句话。 希望，当你读完这本书的时候，你不再那么悲观了。 今天的互联网还是一片野蛮生长的地方。 Web 从来不是一个静止的平台，尽管有无数的人这样期待着。你无法控制谁会请求你的内容，无法控制他们使用的浏览器和设备，当然你也无法掌控操作系统、屏幕分辨率、带宽或是可用的系统字体之类的事情。对于从其他语言转向 Web 的开发者，这么多开发者们不能控制的因素，定会让他们大吃一惊。伴随时间一天天过去，这个陈述只会不断被证明是正确的。每天或每周，都有一些案例和标准在发生变化；新的设备以爆发性的增长速度不断推出；浏览器厂商非常努力地创新以让自己排名靠前，拥有更高的市场占有率。在这样的生态系统下，作为一个开发者，试图把所有的事情收进一个确定的盒子里是徒劳的。 拥抱这个荒乱的生态系统，用 Web 的不确定性可能带给你的眼光来开发你的站点或应用，这是面对最终目标的最好方式。无论这些目标是谁，在兜里还是在桌上，是现在还是未来。 其实已经有相关工具来处理这些问题了，你只需要调整你看待 Web 的眼光，改变你的开发方式，足矣。 本书的适用人群本书的主要读者是初级到高级的 Web 开发者——那些每天在前线处理这些前端问题的家伙，那些作为特定渠道为相关组织贡献新的前端框架技术，甚至可能按照他们的方式列入规范的开发人员。这本书主要面向那些使用 HTML、 CSS 和 JavaScript的开发者，以及那些对跨浏览器（如果不是跨表单元素或跨设备）开发技术有深入理解的开发者。 本书的次要读者包括交互设计师、专注于互联网视觉设计的设计师和专注于互联网的其他编程语言的工程师。为了更好地适应现代互联网，需要从开始到最后，在站点设计和架构上达成一致。这里提供的材料能够帮助其他学科的人士，熟悉现在和未来互联网设计和开发的最佳实践。作为设计和服务器之间自然的桥梁，核心的 Web开发者总是承担着连接这个过程的胶水的作用，所以，每个人都了解整个过程会有助于完善最终的产品。 本书导读 本书分为三个部分。 第1 章和第2 章会介绍我们的现状、告诉我们如何拥抱不确定性，同时按照应有的方式构建不断发展变化的 Web 站点。如果你不是一个专业的技术人员（至少不是前端开发领域的），这本书只是你的同事递给你的，那么这两章（以及结论）是你需要阅读的。 接下来的几章呈现了当今我们要面对的一些技术上的挑战，并且阐述了一些帮助我们解决这些挑战和拥抱不确定性的方式。第 3 章是对 Modernizr 类库和特性检测（根据浏览器支持性来启用和禁用相应功能的技术）的一个快速的介绍。之后，我们会介绍响应式 Web 设计（第4 章）、多设备背景下的用户输入（第5 章）、 Web 上的图片处理（第6 章），然后是现代的 Web 视频（第7 章）。如果你对这些技术思考有兴趣，可以阅读这些章节。这些特性都是独立的，使用时会单独检测这些新特性的支持情况，然后确定对应的解决方案，并拥抱这些不确定性，帮助我们满足最广泛的受众用户需求。 写这本书的时候，我并没有计划以这样的方式写，但是最后三个技术章节（第5 章到第7 章）恰好表现了一个标准的形成过程，包括成功和失败的全景。视频代表一个好的标准是如何变差的，用户输入代表一个问题在历经多年开发之后仍在探索一个解决方案，图片代表一个由整个互联网技术社区（标准的作者、 Web 开发者，以及浏览器厂商）共同创建的成功的标准。 第8 章展望了多变的互联网，然后谈了接下来的 20 年里我希望看到的互联网的变革。 在线资源 下面列出了一些站点，它们是现代 Web 设计和开发发生的地方。这些站点都对本书的创作有直接的影响：? HTML5 Rocks—A resource for Open Web HTML5 developers（http://www.html5rocks.com/en/） ? LukeW Ideation + Design | Digital Product Strategy ＆ Design（http://www.lukew.com/） ? QuirksMode—for all your browser quirks（http://www.quirksmode.org/） ? Web Hypertext Application Technology Working Group（http://www.whatwg.org/） ? Th Modernizr issue tracker on GitHub（https://github.com/Modernizr/Modernizr/iss ues?state=open） ? CSS Tricks（http://css-tricks.com/） ? A List Apart: For People Who Make Websites（http://alistapart.com/） 本书中使用的约定 本书使用了以下的字体约定： 斜体 表示新的术语、网址、电子邮件地址、文件名和文件扩展名。 等宽字体 在程序列表中使用，以及段落中引用程序元素的情况，比如变量、方法名、数据库、数据类型、环境变量、声明和关键字。 粗体的等宽字体 表示指令或者其他应当由用户输入的文本。 斜体的等宽字体 表示应当使用用户提供的值或者由上下文决定的值来替换的文本。 此图标表示一个提示、建议或一般注释。 此图标表示警告或慎用。 使用代码示例 补充材料（代码示例、练习材料等）可以在这里下载： https://github.com/roblarsen/the-uncertain-web。 本书可以用于帮助你完成工作。通常，你可以在程序或文档中使用本书提供的代码。 除非你重新发布我们的大量代码，否则不需要联系我们来获得许可。比如，在程序中使用本书代码的一些片段是无须我们许可的，但是出售或再分发 O’Reilly 的图书示例光盘显然是需要授权的。引用本书或引用示例代码来回答问题是不需要授权的，但是将本书的大量示例代码整合到你自己的产品文档中，必须要得到授权。 我们欣赏注明来源，但并不强制要求。一个来源通常包括书名、作者、出版社和书号 （ISBN）。如：“Th Uncertain Web by Rob Larsen (O’Reilly). Copyright 2015 Rob Larsen, 978-1-491-94590-2。” 如果你觉得你对示例代码的使用需要授权，请随时通过邮箱 permissions@oreilly.com联系我们。 Safari? 在线图书 Safari 在线图书（http://my.safaribooksonline.com/?portal=oreilly）是应需而变的数字图书馆，它包括世界科技和商业领域顶尖的作者的书和视频。 技术专家、软件开发者、网页设计师及商业和创意专家都把 Safari 在线图书作为研究、解决问题、学习和培训的主要资源。 Safari 在线图书为组织、政府机关和个人提供了一系列的产品组合和价目表。订阅者可以在可完全搜索的数据库中检索，获取和使用成千上万的书籍、培训视频和预出版书籍，这些资料可能来自 O’Reilly Media、 Prentice Hall Professional、 Addison-Wesley Professional、 Microsof Press、 Sams、 Que、 Peachpit Press、 Focal Press、 Cisco Press、 John Wiley ＆ Sons、 Syngress、 Morgan Kaufmann、 IBM Redbooks、 Packt、 Adobe Press、 FT Press、 Apress、 Manning、 New Riders、 McGraw-Hill、 Jones ＆ Bartlett、 Course Technology等机构。如果你想了解更多内容，请访问我们的网站。 联系我们 请将对本书的评价和存在的问题通过如下地址告知出版者。 美国： O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) 中国： 北京市西城区西直门南大街 2 号成铭大厦 C 座 807 室（100035） 奥莱利技术咨询（北京）有限公司 本书有一个网页，上面列出了勘误表、一些实例及所有的附加信息。可以通过以下 链接访问这个页面： http://bit.ly/uncertain_web。 为本书提意见或者询问一些技术性问题，可以向以下地址发送邮件： bookquestions@o reilly.com。 更多我们的书籍、课程、会议及相关新闻，都请参见 O’Reilly 的网站： http://www.or eilly.com。 你也可以在 Facebook 上找到我们： http://facebook.com/oreilly。 在 Twitter 上关注我们： http://twitter.com/oreillymedia。 在 YouTube 上查看视频： http://www.youtube.com/oreillymedia。 致谢 我想感谢在本书创作过程中一直忍受我打扰并给予我反馈的所有人，他们的很多观点被我吸取并写入书中。尤其是 Paul Irish、 Bob Holt、 Marc Neuwirth 和 Adam McIntyre， 他们在概念和专题上给了我很好的反馈。感谢你们，让我感觉到我真的在做些什么。 在创作过程中 Bob 和 Adam 给了我非常棒的技术（甚至超越技术的）反馈，值得加倍感谢。 在这个项目里， O’Reilly 的每个人都特别棒，我想给整个公司一个大大的拥抱。我尤其要感谢 Simon St. Laurent 在 Denver 机场按他的想法勾勒出的大纲，它们变成了你现在在读的这本书。我还要感谢 Amy Jollymore 在这个项目里以积极的热情和良好的洞察力对我的指导。 我还要感谢来自 Studio B 的 Lynn Haller，是他第一时间将这本书交付给 O’Reilly，并且在整个写书过程中负责商务相关的事宜。 最后，我要感谢我妻子的爱与支持。我总是忙于做类似写书的傻事，她也一直在那里陪伴我。得妻如此，别无他求。

目录 前言 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

作者介绍：Rob Larsen花了13年的时间为世界级的大公司和知名品牌构建Web站点和应用程序，他将这些经验应用于教学，开启了Web用户在HTML与CSS领域的旅程。__eol____eol__译者介绍：莫卫红，花名莫魔，英文名meric mo。前端专家，10余年的互联网技术开发与架构经验，先后在招商银行、腾讯、阿里巴巴主导过金融业务、虚拟业务、游戏、电商交易、外贸服务等业务的技术研发，曾多次组建团队进行核心业务攻坚，有丰富的Web架构经验与团队管理经验。