呈现一个全新的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，并且在整个写书过程中负责商务相关的事宜。
最后，我要感谢我妻子的爱与支持。我总是忙于做类似写书的傻事，她也一直在那里陪伴我。得妻如此，别无他求。