前言

对Web开发者来说,Web世界中的三个月犹如真实世界的一年。也就是说,自本书上一版出版至今已经有12个“Web年”了。

作为Web开发者,总能耳闻目睹一些新的技术趋势。在几年以前,HTML5和CSS3看起来还很遥远,但由于当前各种浏览器,如Chrome、Safari、Firefox、Opera以及IE等,都在努力实现HTML5和CSS3规范中的各项内容,因而现今企业和组织也都在业务系统的建设过程中纷纷采用这些新技术。

在Web应用交互方面,HTML5和CSS3帮助开发者打下了坚实的基础。新技术让我们能够创建更易开发和维护以及更具交互友好性的网站。HTML5提供了能够定义站点结构并嵌入内容的元素,这就意味着我们不必采用额外的属性、标记或插件。CSS3提供了高级选择器、图像增强功能以及更好的字体支持,让我们的网站更有吸引力,同时将我们从以往使用图片替代技术、复杂的JavaScript代码或者图像工具等旧有开发模式中解放出来。更好的可访问性能够提升动态JavaScript客户端应用对残障用户的支持,离线应用支持特性使得我们创建不需要网络连接即可运行的应用成为可能。

在本书中,我们将实践HTML5和CSS3技术,即使你的用户所使用的浏览器目前还不支持这些新特性,本书也能够帮助你弄清楚如何在项目中应用它们。在开始之前,我们先花点时间来讨论一下HTML5及相关的流行观点。

HTML5:平台还是规范

HTML5是一个规范,它描述了一些新的标签和标记,同时还包括了一些非常棒的JavaScript API,但HTML5陷入了炒作与浮夸的漩涡。于是,本是标准的HTML5最终演变成了平台性质的HTML5,给开发者和用户造成了很多困惑。在某些情况下,CSS3规范中的一些模块,诸如阴影、渐变和转换,也被当成了HTML。浏览器厂商正试图通过他们支持了多少“HTML5”新特性的方式,来达到其领先于其他浏览器厂商的目的。于是,人们开始提出诸如“用HTML5来创建网站”这类的奇怪要求。

本书的大部分内容都将聚焦于HTML5和CSS3规范本身,以及你如何根据所有常用Web浏览器对这些技术的描述方式来使用这些技术。在本书最后,我们将探索一系列跟HTML5紧密相关的规范,它们可以即刻应用到多个平台上,如Geolocation(地理定位)和Web Sockets。虽然这些技术从严格意义上讲并非HTML5,但它们在跟HTML5和CSS3协同工作时却可以帮助你创建出令人难以置信的丰富应用。

本书内容

本书的每个章节分别聚焦于某一类特定问题,我们可以使用HTML5和CSS3来解决这些问题。每章都有一个概述以及一个覆盖全章标签、特性或概念的汇总列表。每章的主要内容将拆分为多个实例部分,这些实例将介绍特定概念,并引导你用这些概念创建一个简单的示例。各章内容分门别类并据此展开讨论。相较于将内容分成HTML5和CSS3两部分来讲解,基于亟待解决的实际问题进行分类讨论的方式更具实际意义。你会发现其中几章重点聚焦于CSS3,同时CSS3技术又很合时宜地遍及其他章节。

许多实例都包含了一个“回退方案”的章节,为某些用户的浏览器无法直接支持我们基于新特性的实现提供了解决方案。我们将通过各种技术实现来确保回退方案的正确运行,从第三方JavaScript库到我们自己的JavaScript代码实现,以及jQuery解决方案,等等。

每章最后还包括了一个“未来展望”章节,其中讨论了当新特性在将来得以更广泛采纳时,如何更好地应用这些技术。

首先,我们会快速了解一下HTML5和CSS3的概貌,并认识一些新的结构化标签,它们可以用来描述你的页面内容。之后,我们构造一个表单,你将有机会了解表单字段及其特性,诸如自动聚焦和就地编辑等。从那开始,你将使用一些CSS3的新选择器来给元素应用样式,从此告别通过给内容添加额外标记来实现的旧有做法。

接下来,我们将探究HTML5的音频和视频支持,并且你将掌握如何通过画布绘制形状。你也将了解到如何使用CSS3的阴影、渐变与转换等特性,以及字体、过渡和动画特性。

然后,我们将使用HTML5客户端的一些新特性,如Web Storage、IndexedDB以及离线支持,来创建客户端应用程序。同时,我们会通过Web Sockets实现一个简单的聊天服务通信程序,并讨论HTML5是如何实现跨域消息发送的。你还将有机会接触到Geolocation API的使用,以及管理浏览器历史记录的知识。

本书聚焦于在现代浏览器中你可以实现怎样有趣的应用。尽管一些附加介绍的HTML5和CSS3新特性当下还不具备广泛应用的成熟度,但仍然是有价值的。你将在第11章进一步了解到这些新特性。

附录A是全书所涉及新特性的一个完整列表,并提供了具体特性所对应描述章节的快速参考。本书会大量应用jQuery,因此,附录B会为你提供一个简短的jQuery快速入门教程。附录C将带你一览如何对音频和视频进行编码,以便在HTML5中使用它们。

浏览器兼容性

每章开头都会给出本章所涉及的HTML5特性,每个特性的浏览器支持情况会在括号内以浏览器名称简写码以及所支持最低版本号来表示。简写码的含义为:C代表Chrome、F代表Firefox、S代表Safari、IE代表Internet Explorer、O代表Opera、iOS指带Safari的iOS设备、A指Android浏览器。

本书未涉及的内容

我们在本书里不会讨论IE 8之前的IE版本。微软已经在积极推动用户放弃这些老旧浏览器了。

我们也不会涉及HTML5和CSS3的方方面面。有些内容并没有太大的讨论意义,因为其实现已经改变,或者还不具备实际应用能力。比如,CSS网格布局确实不错1,但不值得我们花太多时间投入研究,除非所有浏览器都支持该特性2。 本书重点为你演示如何使用HTML5和CSS3技术来为最大用户群体增强应用功能。

1.http://www.w3.org/TR/css3-grid-layout/
2.目前只有IE 10、IE 11支持,http://caniuse.com/#feat=css-grid。——译者注

本书没有涉及HTML和CSS的基础内容,因此,它并非针对完全初学者。本书主要针对已经具备了较多的HTML和CSS知识的Web开发者。如果你才刚刚接触HTML和CSS,可以阅读本书参考文献中列出的Jon Duckett的著作HTML and CSS: Design and Build Websites[Duc11],这本书很好地覆盖了HTML和CSS基础内容。也可以参考Jeffrey Zeldman的著作Designing with Web Standards[Zel09]。

本书假设你至少对JavaScript和jQuery3 有着基本的了解,我们将使用它们来实现很多回退解决方案。附录B提供了一个关于jQuery的简单介绍,内容覆盖了本书使用的jQuery基本方法,你可以考虑阅读Christophe Porteneuve的Pragmatic Guide to JavaScript[Por10]一书,将其作为对JavaScript的深入参考,这本书的最后部分描述了非常精彩的JavaScript高级用法,而我相信你会做得更好。

3. http://www.jquery.com

第2版的更新内容

本书第2版结合新的技术发展趋势对内容作了全面更新,并删除了特别针对IE 7及之前IE版本的内容。增加了更多关于HTML5可访问性的内容、更稳定且切实可行的回退方案以及9个新实例:

  • 实例2:用<meter>元素实现进度条;
  • 实例4:常见问题描述列表;
  • 实例8:不借助JavaScript验证用户输入;
  • 实例19:使用SVG绘制矢量图形;
  • 实例22:视频播放的可访问性;
  • 实例16:提升表格的可访问性;
  • 实例26:通过过渡和动画特性移动物体;
  • 实例28:使用IndexedDB将数据存储到客户端数据库中;
  • 实例34:通过拖放来整理内容。

另外,你将在第11章探索CSS3的弹性盒子模型、跨域资源共享、Web Workers、服务器发送事件以及CSS滤镜效果等内容。

除了上述新内容,其他实例内容也已根据需要更新了相应的回退解决方案。同时,你会发现在本书源代码中新增加了一个便利的基于Node.js实现的Web服务器,使用它可以很方便地测试所有跨多浏览器的应用功能。

如何阅读本书

没有必要从头至尾阅读本书。本书已经将内容分解成了便于单独理解与学习的各个实例,每个实例都聚焦于一到两个核心概念。每一章都会涉及一些相关项目。如果你下载了本书源代码 ,将看到一个template/文件夹,其中包含了将要用到的通用模板文件,这将会是一个不错的着手点。

如下示例代码的第一行标注了该示例代码文件在本书源代码中的位置:

html5_new_tags/index.html
<link rel="stylesheet" href="stylesheets/style.css">

如果你阅读的是英文电子版,可以点击该标注来打开整个示例代码文件,以便在上下文中查看代码。这个标注指出了示例代码文件在本书源代码中的位置,但它也许并不总是与你实际操作的文件相匹配。

最后,请跟随本书代码,放心大胆地练习和调整本书提供的完整示例代码。接下来,让我们来详细了解一下运行本书示例代码之前应做何种准备。

准备工作

你需要Firefox 20或更高版本、Chrome 20或更高版本、Opera 10.6或者Safari 6等浏览器来测试本书代码。由于每款浏览器在功能实现上都会有一些差别,因此,你可能还希望在所有浏览器上都测试我们编写的代码。有一台Android或iOS设备在手边会很有帮助,但不是必需的。

在IE浏览器上进行测试工作

你同时也应该考虑到使用IE 8及更高版本来测试网站功能的现实需要,这样才能确保我们创建的回退解决方案运行无误。最简单的方式就是在VirtualBox上安装微软Windows来进行测试。 微软在Modern.IE网站上提供了免费的虚拟机,可用于测试Web应用程序,你可以从上面下载现成可用的VirtualBox、Parallels或VMware镜像文件。 这些虚拟机软件有30天的免费试用期,30天之后需要重新下载。

Node.js与示例服务器

测试书中的某些特性时,需要通过一个Web应用服务器来运行HTML和CSS文件。另外,测试其他的一些特性时也需要一个相对复杂的后台应用服务。本书源代码中提供了一个应用服务器,可以满足你的需要。要运行这个服务器,你需要事先按照Node.js网站 上的相关说明安装好Node.js,并需要0.10.0或以上版本的Node.js,以避免服务器崩溃。

你还需要用到npm,这是一个命令行工具,用来安装Node打包模块,因此,你可以用它来安装依赖模块。这个工具是Node.js安装文件中的一部分。

一旦安装好了Node.js,就可以访问本书站点并下载示例代码。对压缩文件进行解压,然后通过终端窗口(在Windows平台则是命令行窗口)进入解压后的文件所在位置,并运行以下命令,下载所有的依赖模块(注意不包括$符号):

$ npm install

之后输入以上命令,同样不要输入$符号:

$ node server

我们需要在端口8000上运行应用服务器。在浏览器中加载http://localhost:8000,就可以浏览应用示例了。如果你在虚拟机上进行测试,虚拟机应该使用运行示例服务器的计算机的真实IP地址来连接。最棒的是,与server文件放置在同一文件夹里的文件与文件夹将会通过示例服务器来运行,因此,你可以直接使用本书源代码文件夹的既有组织方式,来跟随本书内容按部就班地进行学习。

使用JavaScript和jQuery的注意事项

在本书中,我们将大量使用JavaScript。在过去,在页面<head>标签里加载JavaScript文件是一种很常用的实践方式,之后使用诸如jQuery的document.ready()方法来等待DOM(Document Object Model,文档对象模型)准备就绪,以对DOM进行操作。但是现在的推荐做法是在页面底部加载所有的脚本,这样可以获得更好的性能。因此,我们也将这么做,所有的脚本包括jQuery,都将放在页面底部,但是需要在元素加载之前对DOM进行操作的场景除外。

此外,我们将在合适的地方使用jQuery,如果只是打算简单地通过元素ID来查找某个元素,我们将直接使用document.getElementById()。但如果需要进行事件处理或者更复杂的DOM操作以在IE8中实现回退方案时,我们会考虑使用jQuery。

换而言之,我们要“根据任务的不同选择合适的工具”。这可能会带来一些矛盾,但当我们开始介绍回退方案以使应用在老式浏览器上正常运行时,这将是一个不错的折中办法。在后面,我会解释为什么要这样做。

在线资源

本书网站提供了连到讨论论坛以及勘误表的链接,并提供了本书所有示例源代码的下载链接

如果你在阅读过程中发现了错误,请在勘误页面提交勘误项,以便后期修改。本书英文电子版中,在每页的页脚处都提供了一个勘误页面链接,方便你提交勘误信息。

最后,务必访问本书博客Beyond HTML5 and CSS3 。我将发布本书相关的内容、更新以及应用示例。

准备好了吗?让我们开始精彩纷呈的HTML5和CSS3之旅吧。

目录

  • 版权声明
  • 致谢
  • 前言
  • 对本书的赞誉
  • 第 1 章 HTML5和CSS3概述
  • 第一部分 用户界面增强
  • 第 2 章 新的结构化标签和属性
  • 第 3 章 创建友好的Web表单
  • 第 4 章 设置内容及界面的样式
  • 第 5 章 构建可访问性界面
  • 第二部分 新视角、新声音
  • 第 6 章 在浏览器中画图
  • 第7章 嵌入音频和视频
  • 第 8 章 视觉特效
  • 第三部分 标记之外
  • 第 9 章 客户端数据储存
  • 第 10 章 创建交互式Web应用
  • 第 11 章 未来之路
  • 附录A 快速参考
  • 附录B  jQuery快速入门
  • 附录C 针对Web的音频和视频编码
  • 附录D 相关资源
  • 参考文献