HTML5 and CSS3

Acknowledgments 8
Preface 10
HTML5: The Platform vs. the Specification . . . . . . . . . 10
How This Wor ks . . . . . . . . . . . . . . . . . . . . . . . . . 11
What’s in This Book . . . . . . . . . . . . . . . . . . . . . . 12
Prerequisites . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Online Resources . . . . . . . . . . . . . . . . . . . . . . . . 13
1 An Overview of HTML5 and CSS3 14
1.1 A Platform for We b Development . . . . . . . . . . 14
1.2 Backward Compatibility . . . . . . . . . . . . . . . 17
1.3 The Road to the Future Is Bumpy . . . . . . . . . 17
Part I—Improving User Interfaces 23
2 New Structural Tags and Attributes 24
Tip 1 Redefining a Blog Using Semantic Markup . . . . 27
Tip 2 Creating Pop-up Windows with Custom Data Attributes
. . . . . . . . . . . . . . . . . . . . . . . . . . 40
3 Creating User-Friendly Web Forms 45
Tip 3 Describing Data with New Input Fields . . . . . . 48
Tip 4 Jumping to the First Field with Autofocus . . . . . 56
Tip 5 Providing Hints with Placeholder Text . . . . . . . 58
Tip 6 In-Place Editing with contenteditable . . . . . . . 65

4 Making Better User Interfaces with CSS3 72
Tip 7 Styling Tables with Pseudoclasses . . . . . . . . . 74
Tip 8 Making Links Printable with :after and content . . 83
Tip 9 Creating Multicolumn Layouts . . . . . . . . . . . 87
Tip 10 Building Mobile Interfaces with Media Queries . . 94
5 Improving Accessibility 97
Tip 11 Providing Navigation Hints with ARIA Roles . . . . 99
Tip 12 Creating an Accessible Updatable Region . . . . . 104
Part II—New Sights and Sounds 110
6 Drawing on the Canvas 111
Tip 13 Drawing a Logo . . . . . . . . . . . . . . . . . . . . 112
Tip 14 Graphing Statistics with RGraph . . . . . . . . . . 119
7 Embedding Audio and Video 127
7.1 A Bit of History . . . . . . . . . . . . . . . . . . . . 128
7.2 Containers and Codecs . . . . . . . . . . . . . . . . 129
Tip 15 Wor ki ng with Audio . . . . . . . . . . . . . . . . . . 133
Tip 16 Embedding Video . . . . . . . . . . . . . . . . . . . 137
8 Eye Candy 144
Tip 17 Rounding Rough Edges . . . . . . . . . . . . . . . 146
Tip 18 Wor ki ng with Shadows, Gradients, and Transformations
. . . . . . . . . . . . . . . . . . . . . . . . . 154
Tip 19 Using Real Fonts . . . . . . . . . . . . . . . . . . . 165
Part III—Beyond HTML5 171
9 Wor ki ng with Client-Side Data 172
Tip 20 Saving Preferences with localStorage . . . . . . . . 175
Tip 21 Storing Data in a Client-Side Relational Database 181
Tip 22 Wor ki ng Offline . . . . . . . . . . . . . . . . . . . . 193
10 Playing Nicely with Other APIs 196
Tip 23 Preserving History . . . . . . . . . . . . . . . . . . . 197
Tip 24 Talking Across Domains . . . . . . . . . . . . . . . 200
Tip 25 Chatting with We b Sockets . . . . . . . . . . . . . 207
Tip 26 Finding Yourself: Geolocation . . . . . . . . . . . . 214