html5 và css3
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 . 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. fellow HTML5 Doctors and HTML5 Gallery curators for sharing your feedback, knowledge, insight and experience. Also for your help, encouragement advice and