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:

,

, and

49 The difference between

,

, and

49

Which one to choose? 50 Basic structures using these elements 51 Headings:

,

, and

-

, plus

53 An article with one heading 54 An article

with heading and metadata 55 An article with an

-enclosed subheading 55 An article with heading, subheading, and metadata 55 Some examples of

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:

,

,

(and

) 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

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 and elements new semantic meanings 91 The element 95 The

---

element 95

The element, together with and 97 The element 99

Presentational elements: relics of a bygone era > 100 Block-level links with the element 100

Writing a Block Link 101 Browser caveats with Firefox <4 102

vii Other elements with minor changes from HTML 4 103 The

element and related new (and old) attributes 103 The

element 105 The element 107 New semantic elements 109 The element 109 Ruby annotations with , , and 110 The element 116 Extending HTML5 118 The 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 Properties to Work 435 Color and transparency 435 RGB 436 RGBa transparency 437 HSLa 439 Opacity 441 Backgrounds 442 xii background-clip 443 background-origin 445 background-size 448 Multiple backgrounds 452 Borders 460 border-radius 460 border-image 467 Drop shadows 471 box-shadow 471 text-shadow 476 Gradients 478 Gradients 478 Detecting support and helping other browsers 490 Using Modernizr 491 CSS3 Pie 491 Combining CSS3 effects 492 Hold the cheese 495 Summary 497 Homework 498

Chapter 12: Transforms, Transitions, and Animation 499 Translate, rotate, scale, skew, transform: 2D and 3D CSS transforms 500 Using transform and the transform functions 505 Putting 3D things into perspective with perspective and transform:perspective() 515 Changing the origin of perspective with the perspective-origin property 517 Changing transforms via transform-origin 518 3D or flat transforms with transform-style 521 Hiding and showing the back of a transformed element with backface-visibility 522 Browser support for CSS transforms 524 CSS transforms gotchas 527 CSS transforms in summary 528 CSS transitions and CSS animations: compare and contrast 529 CSS transitions: bling in 4D! 531 Setting what to transition with transition-property 532 Controlling the duration of a transition with transition-duration 540 transition-timing-function, cubic Bezier curves, and steps() 540 Delaying the start of a transition with transition-delay 546 Multiple transition values and the transition shorthand property 547 transition shorthand property order 547 Browser support for CSS transitions 547 CSS transitions gotchas 549 CSS transitions in summary 551 Keyframin' with CSS animations 552 A simple animation example with animation-name and animation-duration 556 Controlling an animation using ©keyframes 558 Timing functions with animation-timing-function 559 Changing how an animation starts using animation-delay 562 How many times? animation-iteration-count will tell you! 563 Mixing it up with animation-direction 564

Control how elements behave before and after an animation with animation-fill-mode ...564

Pausing an animation using animation-play-state 567 The animation shorthand property and comma-separated animation-* values 568 Browser support for CSS animations 570 A little animation-related JavaScript detour 572 Animation gotchas 573 CSS animations in summary 574 Putting it all together 575 Further Reading 577

Chapter 13: The Future of CSS or, Awesome Stuff That's Coming 581 Hardware acceleration and CSS performance 582 Internationalization 582

Define your own list counters with the CSS Counter Styles Module 582 The calc() and attr() functions 584 Variables, mixins, and nesting 586 Turning the "OMG!" up to 11 with CSS shaders 586

Go forth and make awesome 587 Appendix: essential links 588

Index 591

xiv