For your convenience Apress has placed some of the front matter material after the index. Please use the Bookmarks and Contents at a Glance links to access them. www.it-ebooks.info Beginning HTML5 and CSS3 Richard Clark, Oli Studholme, Christopher Murphy and Divya Manian www.it-ebooks.info 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-13 (pbk): 978-1-4302-2874-5 ISBN-13 (electronic): 978-1-4302-2875-2 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 (201) 348-4505, e-mail orders-ny@springer-sbm.com, or visit www.springeronline.com. For information on translations, please e-mail rights@apress.com 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: Paul Manning Lead Editor: Ben Renow-Clarke Technical Reviewers: Andrew Zack and Chris Mills Editorial Board: Steve Anglin, Mark Beckner, Ewan Buckingham, Gary Cornell, Morgan Ertel, Jonathan Gennick, Jonathan Hassell, Robert Hutchinson, Michelle Lowman, James Markham, Matthew Moodie, Jeff Olson, Jeffrey Pepper, Douglas Pundick, Ben Renow-Clarke, Dominic Shakeshaft, Gwenan Spearing, Matt Wade, Tom Welsh Copy Editor: Mary Behr Compositor: Bytheway Publishing Services Indexer: SPi Global Artist: SPi Global Cover Designer: Anna Ishchenko Coordinating Editor: Christine Ricketts and Jennifer Blackwell www.it-ebooks.info For K & J. —Richard For C, R & C —C www.it-ebooks.info iv 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 311 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 www.it-ebooks.info v 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 www.it-ebooks.info vi 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 www.it-ebooks.info vii 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 (for posterity) 102 www.it-ebooks.info viii 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-*) 119 Microformats 120 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 www.it-ebooks.info ix 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 www.it-ebooks.info [...]... such as HTML5 Please and HTML5 Boilerplate xvi www.it-ebooks.info About the Technical Reviewers Chris Mills is a web technologist, open standards evangelist, and education agitator working at Opera Software He writes about open standards for dev.opera.com, net magazine, A List Apart, and more, and speaks at universities and industry conferences worldwide Chris is the creator of the Opera Web Standards... Safari, Opera, Chrome and, of course, our old friend IE are all—admittedly at different rates—moving forward towards supporting all the 2 3 www.stuffandnonsense.co.uk/blog www.stuffandnonsense.co.uk/archives/web_standards_trifle.html 4 www.it-ebooks.info HTML5: Now, Not 2022 new standard features inside HTML5, CSS3, etc Many web developers are also moving towards web standards and their associated best... practical, real-world advice and examples to help you master modern web standards How is this book structured? This book is split into two major sections The first six chapters cover HTML5 and the second seven chapters cover CSS3 complemented by a look to what is coming in the future of Web Standards In the first part we will look at where HTML5 came from and how to transition to HTML5 from HTML4 We’ll then... developers, and it hurt the users Founded in 1998, WaSP campaigned for standard implementations across the different browsers and a standards-based approach to web design The aims were to reduce the cost and complexity of web development and to increase the accessibility of web pages by making web content more consistent and more compatible across devices and assistive technologies They lobbied browser and. .. book for? Beginning HTML5 and CSS3: The Web Evolved is aimed at anybody with a basic knowledge of HTML and CSS If you have just recently dipped your toes into the world of HTML or CSS, or if you’ve been developing sites for years, there will be something in this book for you However, you will get the most out of this book if you’ve had a play with HTML5 and CSS3 but don’t yet fully understand all it... the base language and scripting APIs defined inside HTML5 and elsewhere) provides the scripting/behavior layer, which adds usability enhancements and richer functionality to our sites The Dao of web design: embracing uncertainty The browser landscape is rapidly evolving However, unlike the Wild West days of the browser wars, today’s landscape is evolving and converging towards standards Firefox, Safari,... Manchester, UK With over 10 years industry experience he oversees the user experience, design and front-end work at KMP and is a regular contributor to industry leading publication, net magazine He’s the founder and curator of HTML5 Gallery (www.html5gallery.com), cofounder, editor and author for HTML5 Doctor (www.html5doctor.com) You’ll also occasionally find him organising Speak the Web a series of gig... contexts, due to open standards now providing a lot of the same functionality, and that a lot of Flash developers are moving over to open standards, but it will still have its uses for a few years to come 9 HTML5 will break the Web! Absolutely not As discussed already, HTML5 is backwards compatible, and we’re already seeing wellknown commercial sites being kitted out with HTML5 features 10 HTML5 s development... received on my work To Chris Mills and Matthew Moodie who provided constructive feedback during the writing process, that improved chapters no end and ensured that we weren’t making things up as we went along Thank you to my fellow HTML5 Doctors and HTML5 Gallery curators for sharing your feedback, knowledge, insight and experience Also for your help, encouragement advice and most importantly humour To... Ways, and net magazine As an internationally respected speaker he is invited to speak regularly on web standards and the importance of improving design education, and has spoken at conferences worldwide, including: Build, New Adventures and The Future of Web Design Oli Studholme is a New Zealander living in the bright lights of Tokyo, Japan His love of the web began in with his first website in 1995, and . 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. Murphy and Divya Manian www.it-ebooks.info Beginning HTML5 and CSS 3 Copyright © 2012 by Richard Clark, Oli Studholme, Christopher Murphy and Divya