HTML5 The Missing Manual

【实例截图】

【核心代码】

Table of Contents
The Missing Credits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Part One: Meet the New Language
Chapter 1: Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . 11
The Story of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
XHTML 1.0: Getting Strict . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
XHTML 2: The Unexpected Failure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
HTML5: Back From the Dead . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
HTML: The Living Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Three Key Principles of HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1. Don’t Break the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2. Pave the Cowpaths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3. Be Practical . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Your First Look at HTML5 Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The HTML5 Doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Character Encoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
The Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Adding a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Adding JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Final Product . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
A Closer Look at HTML5 Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
The Loosened Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
HTML5 Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
The Return of XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
iv table of contents
HTML5’s Element Family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Added Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Removed Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Adapted Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Tweaked Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Standardized Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Using HTML5 Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Evaluating Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Browser Adoption Statistics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Feature Detection with Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Feature “Filling” with Polyfills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Chapter 2: A New Way to Structure Pages . . . . . . . . . . . . . . . 43
Introducing the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Retrofitting a Traditional HTML Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Page Structure the Old Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Page Structure with HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Subtitles with <hgroup> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Adding a Figure with <figure> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Adding a Sidebar with <aside> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Browser Compatibility for the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . 57
Designing a Site with the Semantic Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Deeper into Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Navigation Links with <nav> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Deeper into Footers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Deeper into Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
The HTML5 Outlining System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
How to View an Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Basic Outlines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Sectioning Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Solving an Outline Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Chapter 3: Meaningful Markup . . . . . . . . . . . . . . . . . . . . . . 81
The Semantic Elements Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Dates and Times with <time> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
JavaScript Calculations with <output> . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Highlighted Text with <mark> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Other Standards that Boost Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
ARIA (Accessible Rich Internet Applications) . . . . . . . . . . . . . . . . . . . . . . . . 88
RDFa (Resource Description Framework) . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Microformats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Google Rich Snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Enhanced Search Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
The Recipe Search Engine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
v table of contents
Part Two: Creating Modern Web Pages
Chapter 4: Web Forms, Refined . . . . . . . . . . . . . . . . . . . . . . 107
Understanding Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Revamping a Traditional HTML Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Adding Hints with Placeholders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Focus: Starting in the Right Spot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Validation: Stopping Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
How HTML5 Validation Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Turning Validation Off . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Validation Styling Hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Validating with Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Custom Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
Browser Support for Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
New Types of Input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Email Addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Search Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Telephone Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Sliders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
Dates and Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Input Suggestions with <datalist> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Progress Bars and Meters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Toolbars and Menus with <command> and <menu> . . . . . . . . . . . . . . . . . . . 138
An HTML Editor in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Using contentEditable to Edit an Element . . . . . . . . . . . . . . . . . . . . . . . . . 138
Using designMode to Edit a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Chapter 5: Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . 143
Understanding Video Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Introducing HTML5 Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Making Some Noise with <audio> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Getting the Big Picture with <video> . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Format Wars and Fallbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Meet the Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Browser Support for Media Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Multiple Formats: How to Please Every Browser . . . . . . . . . . . . . . . . . . . . . 154
The <source> Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
The Flash Fallback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Controlling Your Player with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Adding Sound Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Creating a Custom Video Player . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
JavaScript Media Players . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Captions and Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
vi table of contents
Chapter 6: Basic Drawing with the Canvas . . . . . . . . . . . . . . . 171
Getting Started with the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Straight Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Paths and Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Curved Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Building a Basic Paint Program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Preparing to Draw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Drawing on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Saving the Picture in the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Browser Compatibility for the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Polyfilling the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
The Canvas Fallback and Feature Detection . . . . . . . . . . . . . . . . . . . . . . . . . 197
Chapter 7: Deeper into the Canvas . . . . . . . . . . . . . . . . . . . . 199
Other Things You Can Draw on the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Drawing Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Slicing, Dicing, and Resizing an Image . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Drawing Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Shadows and Fancy Fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Adding Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Filling Shapes with Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Filling Shapes with Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Putting It Together: Drawing a Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Making Your Shapes Interactive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Keeping Track of What You’ve Drawn . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Hit Testing with Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Animating the Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
A Basic Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Animating Multiple Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
A Practical Example: the Maze Game . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Setting Up the Maze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Animating the Face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Hit Testing with Pixel Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
Chapter 8: Boosting Styles with CSS3 . . . . . . . . . . . . . . . . . . 237
Using CSS3 Today . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Strategy 1: Use What You Can . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Strategy 2: Treat CSS3 Features as Enhancements . . . . . . . . . . . . . . . . . . . . 238
Strategy 3: Add Fallbacks with Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . 240
Browser-Specific Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
vii table of contents
Web Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Web Font Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245
Using a Font Kit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Using Google Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Using Your Own Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Putting Text in Multiple Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Adapting to Different Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
More Advanced Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
Replacing an Entire Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Recognizing Mobile Devices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Building Better Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Transparency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Creating Effects with Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
A Basic Color Transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
More Transition Ideas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Part Three: Building Web Apps with Desktop Smarts
Chapter 9: Data Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Web Storage Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Storing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
A Practical Example: Storing the Last Position in a Game . . . . . . . . . . . . . . . . . 285
Browser Support for Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Deeper into Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Removing Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Finding All the Stored Items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288
Storing Numbers and Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Storing Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290
Reacting to Storage Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
Reading Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Getting Hold of a File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Browser Support for the File API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Reading a Text File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Replacing the Standard Upload Control . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Reading Multiple Files at Once . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
Reading an Image File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
viii table of contents
Chapter 10: Offline Applications . . . . . . . . . . . . . . . . . . . . . 303
Caching Files with a Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Creating a Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Using Your Manifest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Putting Your Manifest on a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Updating the Manifest File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Browser Support for Offline Applications . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Practical Caching Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Accessing Uncached Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Adding Fallbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Checking the Connection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Pointing Out Updates with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Chapter 11: Communicating with the Web Server . . . . . . . . . . . 323
Sending Messages to the Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324
The XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Asking the Web Server a Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Getting New Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Server-Sent Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
The Message Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
Sending Messages with a Server Script . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Processing Messages in a Web Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Polling with Server-Side Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Assessing Web Sockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341
A Simple Web Socket Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
Web Socket Examples on the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Chapter 12: More Cool JavaScript Tricks . . . . . . . . . . . . . . . . . 347
Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
How Geolocation Works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Finding a Visitor’s Coordinates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
Dealing with Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353
Setting Geolocation Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
Showing a Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Monitoring a Visitor’s Moves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
Web Workers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
A Time-Consuming Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362
Doing Work in the Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364
Handling Worker Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Canceling a Background Task . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
Passing More Complex Messages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 368
ix table of contents
History Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
The URL Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
The Traditional Solution: Hashbang URLs . . . . . . . . . . . . . . . . . . . . . . . . . 373
The HTML5 Solution: Session History . . . . . . . . . . . . . . . . . . . . . . . . . . . 374
Browser Compatibility for Session History . . . . . . . . . . . . . . . . . . . . . . . . . 377
Part Four: Appendixes
Appendix A: A Very Short Introduction to CSS . . . . . . . . . . . . . 381
Appendix B: A Very Short Introduction to JavaScript . . . . . . . . . 397
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419