Beginning HTML5 and CSS3 Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian 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 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 CSS1,CSS2.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 Ul 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 Chapter 9: A Layout for Every Occasion 287 The web of many devices 287 Evolution of monitor sizes 289 Separate sites optimized for each device? But that's crazy talk! 289 The Visual Formatting Model of CSS—it's boxes all the way down! 291 The Box Model: content, padding, border, margin 291 CSS3 layouts 341 CSS Positioned Layout Module Level 3 342 CSS Fragmentation Module Level 3 342 Multi-column Layout Module 343 CSS Regions Module Level 3 349 CSS Exclusions and Shapes Module Level 3 351 CSS Paged Media Module Level 3 353 CSS Generated Content for Paged Media Module 355 The Flexible Box Layout Module 356 The CSS Grid Layout Module 364 CSS3 layout modules in summary 367 Conclusion 367 Further reading 368 Specifications 369 Homework 371 Chapter 10: Improving Web Typography 397 Typeface and fonts 397 Anatomy of type 398 A brief history of web type 399 Text as image 400 Farhner Image Replacement (FIR) 400 Leahy/Langridge method 400 Phark method 401 Gilder/Levin method 401 JavaScript Image Replacement (JIR) 401 sIFR 402 Cufon 403 SVG fonts 403 ©font-face 404 Web fonts 404 In the beginning 404 @font-face strikes back 404 Dissecting font face syntax: ©font-face declaration 405 Bulletproof syntax for @font-face 406 Avoiding the flash of unstyled text (FOUT) 406 Things to keep in mind while using web fonts 409 xi Finding web fonts 410 Free web fonts 410 Commercial web fonts 410 Font as a service 411 Designing with web fonts 412 Using web fonts as icons 412 Web fonts in summary 412 Baselines 413 Setting font-family 413 Setting vertical spacing 413 Setting font sizes 414 Designing with a grid 414 With pixels 415 With ems 417 Setting the grid 418 Automating vertical rhythms 419 Baseline grid in summary 419 Fun with web type 419 Choose the weight of glyphs 419 Choosing the right font width 421 Control text overflow 421 Align text vertically from baseline 422 Control the white space between letters of a word 423 Adjust spacing between words 424 Break Long Words 425 Control white space and line breaks 425 Print hyphens 426 Control the quote glyphs 429 Hanging Punctuation 430 Control the rendering of non-latin web type 431 word-break 431 text-emphasis 431 Use ligatures and additional OpenType font features 432 Summary 433 Further Reading 433 Chapter 11: Putting CSS3