Beginning HTML5 and CSS3

614 Pages·2012·22.478 MB·English

by  Richard Clark, Oli Studholme, Christopher Murphy, Divya Manian (auth.)

Beginning HTML5 and
CSS3

Richard Clark, Oli Studholme,
Christopher Murphy and Divya Manian
Beginning HTML5 and CSS 3

Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian
This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is
concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction
on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic
adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Exempted
from this legal reservation are brief excerpts in connection with reviews or scholarly analysis or material supplied
specifically for the purpose of being entered and executed on a computer system, for exclusive use by the purchaser
of the work. Duplication of this publication or parts thereof is permitted only under the provisions of the Copyright Law
of the Publisher's location, in its current version, and permission for use must always be obtained from Springer.
Permissions for use may be obtained through RightsLink at the Copyright Clearance Center. Violations are liable to
prosecution under the respective Copyright Law.
ISBN 978-1-4302-2874-5
ISBN 978-1-4302-2875-2 (eBook)
Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every
occurrence of a trademarked name, logos, or image we use the names, logos, or images only in an editorial fashion
and to the benefit of the trademark owner, with no intention of infringement of the trademark.
The use in this publication of trade names, service marks, and similar terms, even if they are not identified as such, is
not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights.
While the advice and information in this book are believed to be true and accurate at the date of publication, neither
the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may
be made. The publisher makes no warranty, express or implied, with respect to the material contained herein.
Distributed to the book trade worldwide by Springer Science+Business Media New York, 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or visit
www.springeronline.com.
For information on translations, please e-mail [email protected] or visit www.apress.com.
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook
versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–
eBook Licensing web page at www.apress.com/bulk-sales.
Any source code or other supplementary materials referenced by the author in this text is available to readers at
www.apress.com. For detailed information about how to locate your book’s source code, go to
www.apress.com/source-code/.
Credits
President and Publisher: Copy Editor:
Paul Manning Mary Behr
Lead Editor: Compositor:
Ben Renow-Clarke Bytheway Publishing Services
Technical Reviewers: Indexer:
Andrew Zack and Chris Mills SPi Global
Editorial Board: Artist:
Steve Anglin, Mark Beckner, Ewan Buckingham, Gary SPi Global
Cornell, Morgan Ertel, Jonathan Gennick, Jonathan
Cover Designer:
Hassell, Robert Hutchinson, Michelle Lowman, James
Anna Ishchenko
Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper,
Douglas Pundick, Ben Renow-Clarke, Dominic Coordinating Editor:
Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Christine Ricketts and Jennifer Blackwell
For K & J.

—Richard

For C, R & C

—C

(cid:0)
Contents at a Glance
Contents ....................................................................................................................... v
Forewords ................................................................................................................... xv
About the Authors .................................................................................................... xvi
About the Technical Reviewers .............................................................................. xvii
Acknowledgments .................................................................................................. xviii
Introduction ............................................................................................................... xix
Chapter 1: HTML5: Now, Not 2022 ............................................................................. 1
Chapter 2: Your First Plunge into HTML5 ................................................................ 19
Chapter 3: New Structural Elements ........................................................................ 43
Chapter 4: A Richer Approach to Marking Up Content .......................................... 89
Chapter 5: Rich Media ............................................................................................. 141
Chapter 6: Paving the Way for Web Applications ................................................. 189
Chapter 7: CSS3, Here and Now ............................................................................. 231
Chapter 8: Keeping Your Markup Slim Using CSS Selectors .............................. 275
Chapter 9: A Layout for Every Occasion ............................................................... 287
Chapter 10: Improving Web Typography ............................................................... 397
Chapter 11: Putting CSS3 Properties to Work ...................................................... 435
Chapter 12: Transforms, Transitions, and Animation .......................................... 499
Chapter 13: The Future of CSS or, Awesome Stuff That’s Coming .................... 581
Index .......................................................................................................................... 591

iv
Contents
Contents at a Glance .................................................................................................. iv
Forewords ................................................................................................................... xv
About the Authors .................................................................................................... xvi
About the Technical Reviewers .............................................................................. xvii
Acknowledgments .................................................................................................. xviii
Introduction ............................................................................................................... xix

Who is this book for? ............................................................................................................... xix

How is this book structured? ................................................................................................... xix

Conventions used in this book ................................................................................................ xix
Chapter 1: HTML5: Now, Not 2022 ............................................................................. 1

Basic tenets ............................................................................................................................... 1

A web standards approach ................................................................................................... 2

The Dao of web design: embracing uncertainty .................................................................... 4

Accessibility ........................................................................................................................... 6

Crafting your markup ............................................................................................................. 7

How was HTML5 created? ........................................................................................................ 8

Beyond HTML 4… ................................................................................................................. 8

XHTML 1.0 ............................................................................................................................ 8

XHTML 2.0 and the backlash ................................................................................................ 9

HTML5 moving forward! .......................................................................................................... 10

HTML5 design principles ......................................................................................................... 11

Supporting existing content ................................................................................................. 12

Degrading gracefully ........................................................................................................... 12

Don’t reinvent the wheel ...................................................................................................... 13

Paving the cowpaths ........................................................................................................... 13

Evolution, not revolution ...................................................................................................... 13

A dozen myths about HTML5 .................................................................................................. 14

1. Browsers don’t support HTML5. ...................................................................................... 14

2. OK, most browsers support HTML5, but IE surely doesn’t. ............................................ 14

3. HTML5 won’t be finished until 2022. ............................................................................... 14

4. Now I have to relearn everything! ................................................................................... 15

5. HTML5 uses presentational elements. ............................................................................ 15

6. HTML5 is a return to tag soup. ........................................................................................ 15

7. HTML5 kills accessibility kittens. ..................................................................................... 15

v
8. Flash is dead. .................................................................................................................. 15

9. HTML5 will break the Web! ............................................................................................. 15

10. HTML5’s development is controlled by browser vendors. ............................................ 15
11. HTML5 includes CSS3, Geolocation, SVG, and every other modern

technology under the sun. ................................................................................................... 16

12. So when can I start using HTML5? ............................................................................... 16

Summary ................................................................................................................................. 16

Homework ........................................................................................................................... 17

Chapter 1 homework ........................................................................................................... 17

Directed reading .................................................................................................................. 17
Chapter 2: Your First Plunge into HTML5 ................................................................ 19

Homework review .................................................................................................................... 19

Our page ............................................................................................................................. 20

84.8% of your markup remains ........................................................................................... 21

It’s all in the head .................................................................................................................... 22

A more perfect DOCTYPE .................................................................................................. 23

Declaring languages in HTML5 ........................................................................................... 23

Character encoding ............................................................................................................. 25

Mr. Memory ......................................................................................................................... 25

A “Hello World!” journey .......................................................................................................... 26

“Hello World!” in XHTML1.0 style ........................................................................................ 26

“Hello World!” in HTML4 style ............................................................................................. 27

“Hello World!” in HTML5 “loose” style ................................................................................. 27

“Hello World!” in HTML5 “strict” style .................................................................................. 28

Supporting HTML5 cross-browser .......................................................................................... 29

How do browsers deal with unknown elements? ................................................................ 29

Meet the shiv ....................................................................................................................... 31

IE print protector .................................................................................................................. 32

Declaring block-level elements ........................................................................................... 32

An HTML5 boilerplate page .................................................................................................... 33

No more type attribute ......................................................................................................... 33

Polyfills and alternatives ...................................................................................................... 34

Validation ................................................................................................................................. 35

HTML5 validator .................................................................................................................. 35

HTML Lint ............................................................................................................................ 37

Revisiting Miss Baker .............................................................................................................. 38

Summary ................................................................................................................................. 40

Homework ............................................................................................................................... 41
Chapter 3: New Structural Elements ........................................................................ 43

Workflow practices, evolving? ................................................................................................. 44

A brave new semantic dawn ................................................................................................... 45

vi
Structural building blocks: <div>, <section>, and <article> ..................................................... 49

The difference between <div>, <section>, and <article> .................................................... 49

Which one to choose? ......................................................................................................... 50

Basic structures using these elements ................................................................................ 51

Headings: <header>, <hgroup>, and <h1>–<h6>, plus <footer> ........................................... 53

An article with one heading ................................................................................................. 54

An article <header> with heading and metadata ................................................................ 55

An article with an <hgroup>-enclosed subheading ............................................................. 55

An article with heading, subheading, and metadata ........................................................... 55

Some examples of <hgroup> use ....................................................................................... 56

The HTML5 outlining algorithm ............................................................................................... 57

Outlining in action ................................................................................................................ 58

Sectioning root elements ..................................................................................................... 60

The scourge of the untitled section ..................................................................................... 60

HTML5-style heading element levels ...................................................................................... 62

Example of nesting heading element levels ........................................................................ 63

Example of the new style for heading element levels ......................................................... 63

Even more structural elements: <nav>, <aside>, <figure> (and <figcaption>) ....................... 64

Putting it all together ............................................................................................................... 67

New sectioning content elements in a nutshell ................................................................... 68

Converting a simple page to HTML5 ................................................................................... 69

Introducing “HTML4.5”: Adding HTML5’s semantics via <div class=””> ............................. 74

Adding semantics to “HTML4.5” and HTML5 via ARIA landmark roles .............................. 79

Reality rains on our accessible parade ............................................................................... 80

Accessibility and HTML5 ......................................................................................................... 81

Accessibility techniques, evolving ....................................................................................... 82

Other HTML5 accessibility issues ....................................................................................... 86

HTML5 accessibility: A new hope ....................................................................................... 87

Summary ................................................................................................................................. 87

Homework ............................................................................................................................... 88

Further Reading ...................................................................................................................... 88
Chapter 4: A Richer Approach to Marking Up Content .......................................... 89

Ex-presentational elements and friends .................................................................................. 90

Giving the <i> and <b> elements new semantic meanings ................................................ 91

The <small> element ........................................................................................................... 95

The <hr> element ................................................................................................................ 95

The <s> element, together with <del> and <ins> ................................................................ 97

The <u> element ................................................................................................................. 99

Presentational elements: relics of a bygone era ............................................................... 100

Block-level links with the <a> element .................................................................................. 100

Writing a Block Link ........................................................................................................... 101

Browser caveats with Firefox <4 ....................................................................................... 102

vii
Other elements with minor changes from HTML 4 ............................................................... 103

The <ol> element and related new (and old) attributes .................................................... 103

The <dl> element .............................................................................................................. 105

The <cite> element ............................................................................................................ 107

New semantic elements ........................................................................................................ 109

The <mark> element ......................................................................................................... 109

Ruby annotations with <ruby>, <rt>, and <rp> .................................................................. 110

The <time> element .......................................................................................................... 116

Extending HTML5.................................................................................................................. 118

The <data> element .......................................................................................................... 119

The custom data attribute (data-*) .................................................................................... 120

Microformats ...................................................................................................................... 121

A lightning introduction to microformats ............................................................................ 121

Microdata: HTML5’s semantic sprinkles ........................................................................... 125

Microdata syntax ............................................................................................................... 126

Microdata in action ............................................................................................................ 131

Final thoughts on microdata .............................................................................................. 138

Summary ............................................................................................................................... 139

Further reading and related links ...................................................................................... 139
Chapter 5: Rich Media ............................................................................................. 141

The case for Flash ................................................................................................................ 141

Proprietary formats vs. open standards ............................................................................ 142

Enter HTML5 and friends .................................................................................................. 143

Does HTML5 signal the end of Flash? .............................................................................. 143

Video the HTML5 way ........................................................................................................... 144

Video formats .................................................................................................................... 147

Browser support ................................................................................................................ 148

Adding video source .......................................................................................................... 150

The track element .............................................................................................................. 153

Do more with video ............................................................................................................ 157

Take out the heavy lifting .................................................................................................. 158

Audio ..................................................................................................................................... 162

Audio codecs ..................................................................................................................... 162

Browser support ................................................................................................................ 163

Adding audio source .......................................................................................................... 163

Using jPlayer ..................................................................................................................... 164

Video and audio summary................................................................................................. 164

Canvas .................................................................................................................................. 164

Pixel-based freedom ......................................................................................................... 165

Adding/implementing canvas ............................................................................................ 165

The power and potential of canvas ................................................................................... 174

Further canvas resources.................................................................................................. 182

viii
SVG ....................................................................................................................................... 182

Vector power ..................................................................................................................... 182

Vectors unleashed with SVG ............................................................................................ 183

SVG-related reading .......................................................................................................... 186

Summary ............................................................................................................................... 186

Homework ............................................................................................................................. 188
Chapter 6: Paving the Way for Web Applications ................................................. 189

HTML5 forms ......................................................................................................................... 189

A history of HTML5 forms .................................................................................................. 190

HTML5 forms attributes ..................................................................................................... 190

New input types ................................................................................................................. 197

Validation and how to provide fallbacks ............................................................................ 211

Current browser support .................................................................................................... 213

Forms in action .................................................................................................................. 215

HTML5 forms APIs ............................................................................................................ 219

HTML5 forms summary ..................................................................................................... 219

Web applications ................................................................................................................... 220

Introduction to elements for web applications ................................................................... 220

Introduction to HTML5-related APIs .................................................................................. 224
The glorious dawn of the age of the standards-based Web, accessible to all, in a world of compliant

browsers, on a variety of devices .......................................................................................... 228

Homework: Mark up the “Join Gordo’s Space Cadets” form using the new markup covered229
Chapter 7: CSS3, Here and Now ............................................................................. 231

A Refresher on the importance of web standards ................................................................. 232

CSS 1, CSS 2.1, CSS3 ... ..................................................................................................... 232

Is CSS3 ready? ..................................................................................................................... 233

Context .............................................................................................................................. 233

CSS3 modularity ............................................................................................................... 234

Maturity levels ................................................................................................................... 235

The benefits of CSS3 ............................................................................................................ 235

Streamlining design ........................................................................................................... 236

Reduced workarounds and hacks ..................................................................................... 236

CSS basics refresher ............................................................................................................ 237

Anatomy of a rule (or rule set) ........................................................................................... 237

A property .......................................................................................................................... 237

A value............................................................................................................................... 237

A declaration ..................................................................................................................... 238

Declaration block ............................................................................................................... 238

Keywords ........................................................................................................................... 238

CSS units .......................................................................................................................... 239

Functional notation ............................................................................................................ 239

ix
Selectors ........................................................................................................................... 241

Combinators ...................................................................................................................... 241

At-rules .............................................................................................................................. 241

Vendor-specific extensions ............................................................................................... 241

CSS shorthand ...................................................................................................................... 241

The cascade, specificity, and inheritance ............................................................................. 243

CSS cascade ..................................................................................................................... 243

Calculating specificity ........................................................................................................ 243

CSS inheritance ................................................................................................................ 245

CSS organization and maintenance ..................................................................................... 245

CSS conventions ............................................................................................................... 246

Commenting best practices ............................................................................................... 249

CSS resets and normalize.css .......................................................................................... 251

CSS frameworks and toolkits ............................................................................................ 254

Maintainable CSS .............................................................................................................. 254

CSS validation ................................................................................................................... 259

CSS lint.............................................................................................................................. 260

Browser support, vendor prefixes, polyfills, and progressive enhancement ......................... 261

Progressive enhancement................................................................................................. 261

CSS3 browser support ...................................................................................................... 262

Feature detection and polyfills .............................................................................................. 268

Polyfills .............................................................................................................................. 269

IE-specific polyfills ............................................................................................................. 270

Summary ............................................................................................................................... 271

Homework ............................................................................................................................. 272

Appendix: CSS3 Module Status ............................................................................................ 273
Chapter 8: Keeping Your Markup Slim Using CSS Selectors .............................. 275

Selectors rundown................................................................................................................. 276

CSS3 selectors ...................................................................................................................... 277

Combinators ...................................................................................................................... 278

Attribute and substring selectors ....................................................................................... 279

UI element states pseudo-classes .................................................................................... 284

Target pseudo-class .......................................................................................................... 286

Structural pseudo-classes ................................................................................................. 291

Pseudo-elements .............................................................................................................. 301

Negation pseudo-class ...................................................................................................... 303

Browser support .................................................................................................................... 304

Selectors of the future ........................................................................................................... 305

Summary ............................................................................................................................... 306

Homework ............................................................................................................................. 307

Appendix ............................................................................................................................... 308

x