The Modern Web Multi-Device Web Development with HTML5, CSS3, and JavaScript (Peter Gasston)（Z-Library）

P E T E R G A S S T O N M U L T I - D E V I C E W E B D E V E L O P M E N T W I T H H T M L 5 , C S S 3 , A N D J A V A S C R I P T T H E M O D E R N W E B $34.95 ($36.95 CDN) www.nostarch.com TH E F I N EST I N G E E K E NTE RTA I N M E NT™ “ I L I E F LAT .” Th is book uses RepKover — a durab le b ind ing that won’t snap shut. SHELVE IN : COM PUTERS/W EB PROGRAM M ING Today’s web technologies are evolving at near–light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch His plain-English explanations and practical examples development, including HTML5, CSS3, and JavaScript. emphasize the techniques, principles, and practices that A G U I D E T O M O D E R N W E B D E V E L O P M E N T Peter Gasston’s The Modern Web will guide you through the latest and most important tools of device-agnostic web phone screen as easily as on a fifty-inch HDTV, what’s a developer to do? and stay relevant as these technologies are updated. you’ll need to easily transcend individual browser quirks Learn how to: multiple devices • Plan your content so that it displays fluidly across • Design websites to interact with devices using the most up-to-date APIs, including Geolocation, Orientation, and Web Storage • Incorporate cross-platform audio and video without using troublesome plug-ins • Make images and graphics scalable on high-resolution devices with SVG • Use powerful HTML5 elements to design better forms Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web, you’ll be ready to navigate the front lines of device- independent development. of The Book of CSS3, Gasston has also been published A B O U T T H E A U T H O R Peter Gasston has been a web developer for more than 12 years in both agency and corporate settings. The author in Smashing Magazine, A List Apart, and .net magazine. He runs the web development blog Broken Links (http:// broken-links.com/ ) and lives in London, England. T H E M O D E R N W E B T H E M O D E R N W E B

AdvAnce PrAise for The Modern Web “This is a useful book, and it’s an important book. If you follow Peter Gasston’s advice, then test your sites across all browsers and on a variety of devices, you’ll impress your bosses and please your users. You’ll also be making the Web better and keeping it open.” —bruce lawson, author of introducing html5 “Peter Gasston has now done for the modern web platform what he already did for CSS: write a consult-it-first compendium of information for web devel- opers of practically any skill level.” —stephen hay, author of responsive design workflow “Peter Gasston strikes a great balance between producing fantastic real-world code and staying right on top of the latest developments in web technology. He has a considerable gift for explaining difficult technical topics in a lucid and entertaining manner.” —chris mills, developer relations manager, opera software and author of practical css3 PrAise for Peter GAsston’s The book of CSS3 “I can honestly say I will never need another book on this subject, and I doubt anyone else will either. The Book of CSS3 covers it all and covers it well.” —devon young, css3.info “One of the best technology books I’ve read.” —craig buckler, optimalworks web design “This book deserves a place within easy reach of the developer’s keyboard and is a must have for anyone looking to join the visual revolution that CSS3 is bringing to the Web.” —c.w. grotophorst, choice magazine “There are a lot of neat things that you can do in CSS3, and this book is a great introduction to these features.” —steven mandel, .net developer’s journal “An easy-to-read, easy-to-implement handbook of the newest additions to the Cascading Style Sheet specification.” —mike riley, dr. dobb’s journal

T h e M o d e r n W e b M u l t i - d e v i c e W e b d e v e l o p m e n t w i t h h T M L 5 , C S S 3 , a n d J a v a S c r i p t by Peter Gasston San Francisco

The Modern Web. Copyright © 2013 by Peter Gasston. All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. Printed in USA First printing 17 16 15 14 13 1 2 3 4 5 6 7 8 9 ISBN-10: 1-59327-487-4 ISBN-13: 978-1-59327-487-0 Publisher: William Pollock Production Editor: Serena Yang Cover Ilustration: Charlie Wylie Developmental Editors: Keith Fancher and William Pollock Technical Reviewer: David Storey Copyeditor: LeeAnn Pickrell Compositor: Susan Glinert Stevens Proofreader: Ward Webber Indexer: Nancy Guenther For information on book distributors or translations, please contact No Starch Press, Inc. directly: No Starch Press, Inc. 38 Ringold Street, San Francisco, CA 94103 phone: 415.863.9900; fax: 415.863.9950; info@nostarch.com; www.nostarch.com Library of Congress Cataloging-in-Publication Data A catalog record of this book is available from the Library of Congress. No Starch Press and the No Starch Press logo are registered trademarks of No Starch Press, Inc. Other product and company names mentioned herein may be the trademarks of their respective owners. Rather than use a trademark symbol with every occurrence of a trademarked name, we are using the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken in the preparation of this work, neither the author nor No Starch Press, Inc. shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in it.

For Dave, Jim, Morena, Nick, Rupert, Steve, and all of the other organizers of the London Web Standards group, who help to keep the London scene active and gave me my first opportunity in public speaking.

About the Author Peter Gasston has been a web developer for over 12 years in both agency and corporate settings. He was one of the original contributors to CSS3.info, the leading online destination for CSS3. Gasston is the author of The Book of CSS3 (No Starch Press) and has been published in Smashing Magazine, A List Apart, and .net magazine. He gives talks about technologies at developer conferences and runs the web development blog Broken Links (http://broken-links.com/). Gasston lives in London, England. About the Technical reviewer David Storey is an HTML5 evangelist at Plain Concepts, a founding member of the IE userAgents program, and a CSS Working Group member. Prior to this, he was the developer advocate manager on a top-secret skunk works project at Motorola. He also founded the devel- oper relations team at Opera, product managed Opera Dragonfly, and worked at CERN, home of the World Wide Web. His passion is keeping the Web open for all.

b r i e f C o n T e n T S Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 1: The Web Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Chapter 2: Structure and Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Chapter 3: Device-Responsive CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Chapter 4: New Approaches to CSS Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Chapter 5: Modern JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Chapter 6: Device APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Chapter 7: Images and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Chapter 8: New Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Chapter 9: Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161 Chapter 10: Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Chapter 11: The Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Appendix A: Browser Support as of March 2013 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Appendix B: Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

C o n T e n T S i n d e T a i L AcknoWledgMenTs xv InTroducTIon 1 The Device Landscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Desktop/Laptop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Tablet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 TV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The Others . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 The In Betweeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 The Multi-screen World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Context: What We Don’t Know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Some Context Stereotypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 “Fast” Is the Only Context That Matters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 What You’ll Learn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 1 The Web PlATforM 11 A Quick Note About Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Who You Are and What You Need to Know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Getting Our Terms Straight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 The Real HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 The HTML5 Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 New Best Practices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 CSS3 and Beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Vendor-Specific Prefixes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 CSS Frameworks and Preprocessors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Browser Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Test and Test and Test Some More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 2 sTrucTure And seMAnTIcs 21 New Elements in HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 What’s the Point? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 The Downside of HTML5 Sectioning Elements . . . . . . . . . . . . . . . . . . . . . . . . 24 WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 The Importance of Semantic Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Microformats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 RDFa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 The Microdata API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Microdata, Microformats, and RDFa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

x Contents in Detail Schema .org . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Rich Snippets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Data Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Data Attributes API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 jQuery and Data Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Data Attributes in the Wild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Web Components: The Future of Markup? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 3 devIce-resPonsIve css 39 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Media Features Based on Dimensions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Combining and Negating Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . 44 A Quick Digression: All About Pixels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Screen Resolution Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Device Adaptation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Input Mechanism Media Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Further Media Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Media Queries in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Adaptive vs . Responsive Web Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 The box-sizing Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Dynamic Calculations on Length Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Viewport-Relative Length Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Root-Relative Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Mobile First and Content Breakpoints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Responsive Design and Replaced Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 The Image Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 The HTML5 Responsive Images Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 4 neW APProAches To css lAyouTs 65 Multi-columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Gaps and Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Spans and Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Flexbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Declaring the Flexbox Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Changing the Content Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Alignment Inside the Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Adding Some Flexibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Wrap and Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Grid Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Declaring and Defining the Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Repeating Grid Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Placing Items on the Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Alignment and Stacking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 The September 2012 Grid Layout Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Contents in Detail xi On the Grid Layout Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Grid Template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 The Further Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 5 Modern JAvAscrIPT 89 New in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 The async and defer Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 The addEventListener Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 The DOMContentLoaded Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Input Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 CSS Selectors in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 The getElementsByClassName() Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Interacting with Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 JavaScript Libraries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 YepNope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Modernizr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Mustache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Polyfills and Shims . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Testing and Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 6 devIce APIs 107 Geolocation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Orientation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Fullscreen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Vibration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Battery Status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Network Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Camera and Microphone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Web Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Drag and Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Interacting with Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Mozilla’s Firefox OS and WebAPIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 PhoneGap and Native Wrappers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 7 IMAges And grAPhIcs 125 Comparing Vectors and Bitmaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Scalable Vector Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Anatomy of an SVG Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Linked SVG Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

xii Contents in Detail Embedded SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 SVG Filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 The Convergence of SVG and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 A Drawback of SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 The canvas Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Image Manipulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 WebGL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 When to Choose SVG or Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 8 neW forMs 141 New Input Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 New Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 autofocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 placeholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 autocomplete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 spellcheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 multiple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Datalists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 On-Screen Controls and Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Numbers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Dates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Displaying Information to the User . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 progress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 meter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Client-side Form Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 The Constraint Validation API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Forms and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 9 MulTIMedIA 161 The Media Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Extra Attributes for the video Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Multiple Source Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Fallbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Subtitles and Captions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Encoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Media Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 The Media API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Network and Ready States . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Extra Properties for Audio and Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Media Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

Contents in Detail xiii Advanced Media Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Web Audio API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 WebRTC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 10 Web APPs 177 Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Hosted vs . Packaged Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Manifest Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 W3C Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Hybrid Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 PhoneGap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Titanium . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 TV Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Webinos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Application Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Contents of the AppCache File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 The Caching Sequence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 The AppCache API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 11 The fuTure 191 Web Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Decorators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 Custom Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 The Shadow DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Putting It All Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 The Future of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Regions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Exclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Even Further Future Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Feature Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 Cascading Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 Further Reading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209 A broWser suPPorT As of MArch 2013 211 The Browsers in Question . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Enabling Experimental Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Chapter 1: The Web Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Chapter 2: Structure and Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Chapter 3: Device-Responsive CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Chapter 4: New Approaches to CSS Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

xiv Contents in Detail Chapter 5: Modern JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Chapter 6: Device APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Chapter 7: Images and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Chapter 8: New Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 Chapter 9: Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Chapter 10: Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Chapter 11: The Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 b furTher reAdIng 217 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Chapter 1: The Web Platform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Chapter 2: Structure and Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Chapter 3: Device-Responsive CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Chapter 4: New Approaches to CSS Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Chapter 5: Modern JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Chapter 6: Device APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Chapter 7: Images and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Chapter 8: New Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 Chapter 9: Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 Chapter 10: Web Apps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Chapter 11: The Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Index 227

a C k n o W L e d g M e n T S Huge thanks are due to David Storey, the technical reviewer for this book; his deep knowledge of the field meant his feedback was invaluable to me. Although he corrected and guided me many times, if there are any errors in this book they’re entirely my responsibility. Keith Fancher, Serena Yang, Bill Pollock, and the rest of the No Starch Press team provided fantastic support and guidance throughout the writing of this book. Their collective contribution is beyond measure. Dimitri Glazkov helpfully answered a few questions on web components, and Bruce Lawson gave extra feedback on the new HTML5 elements in Chapter 2. His work as well as that of his fellow HTML5 Doctors was a con- stant reference during the writing of this book. Although I’ve never met him, I’d like to thank David Walsh for main- taining an excellent website that I have used a lot. Stephen Hay and Chris Mills have been generally useful in helping me to consolidate ideas, as well as incredibly nice people to know. Great thanks to my friends and occasional colleagues Giles McCartney, Richard Locke, and Tom Shirley. Thanks also to all my other colleagues at Preloaded, Poke, Top10, Believe.in, and rehabstudio. As always the biggest thanks must go to my wife, Ana, for her patience and support during the time I spent writing this book.

i n T r o d u C T i o n We are in a time of unprecedented inno- vation on the Web. Not too long ago, one company, Microsoft, dominated the web landscape; in 2003, Internet Explorer was used on some 95 percent of computers worldwide. This domination brought the advantage of a stable market for developers, but there was also a serious drawback: Microsoft chose to end nonessential work on IE, and innovation on the Web stag- nated—a consequence of a lack of competition and a closed environment. Things could not be more different now. There are some four or five key browser vendors, about the same number of major operating systems, and more parties are getting involved all the time. Adobe has switched its focus from Flash and apps to the open web, and technology companies like Samsung and Nintendo are joining key players such as Google, Apple, and Microsoft in shaping the future of the Web and the way we build for it.

2 Introduction And the way we access the Web has changed enormously too—think devices. No longer are we limited to browsing the Web with a desktop or laptop. So many categories of devices exist now—including smartphones, tablets, and games consoles—that I’m running out of fingers to count them on. This book is about front-end web development in this new web- everywhere era. It’s about learning methods to make first-class websites, apps, or anything built on open web technologies, with the multi-device world aforethought. This is not a book about how to make mobile websites or smart TV apps; it’s about learning the latest developments in current and near-future web technologies so you’ll be better able to build sites capable of offering the best experience everywhere. I’ll return to what you’ll learn from this book in more detail at the end of the introduction, but first I want to talk about the bewildering array of today’s web-enabled devices. The device landscape The year 2008 was a landmark year and not only because of the theatrical release of Indiana Jones and the Kingdom of the Crystal Skull, which intro- duced the phrase “nuking the fridge” into our vernacular. This was the year that saw the number of Internet-connected devices exceed the num- ber of people using them. This super-connectivity between devices is com- monly known as the Internet of Things (IoT), and this book is aimed at an already substantial and fast-growing subset of those things, namely things with web browsers. The range of web-enabled devices is enormous and getting broader by the day. As I write this, I’m the owner of the following devices that have a web browser: a desktop, a laptop, a tablet, a smartphone, an ebook reader, and a games console. I suspect that’s not an uncommon scenario to more affluent members of society; many people could add a smart TV and a por- table games console to that list. Of course, with this incredible range of web-enabled devices comes incredible opportunity for web developers, and this book is here to help you make the most of that. But first, let’s look at some of the core device categories and define some key terms so you’ll better understand what you’re dealing with. Desktop/Laptop The Web as we’ve known it until recently has primarily targeted the larger screens and more powerful processors of desktop or laptop computers (shorthand: desktops), where the operator is usually seated and using a fast Ethernet or Wi-Fi broadband connection. This mode is still the default for people at work in offices, so many business-to-business (B2B) sites are built to suit this configuration.

Introduction 3 But desktop computer use is on the wane as many people nowadays, especially home users, tend toward mobile or tablet devices (which I’ll come to shortly). In the last quarter of 2012, global PC shipments were down almost 5 percent from the previous year. That said, research shows that people still tend to use desktops when performing tasks that involve significant amounts of text, multitasking across different tabs of a browser, or using programs that require close control of the content, such as image editing. Desktops are also used when security is a major concern, such as for Internet banking. But even within this venerable and mostly stable group variation abounds. The 1024×768 screen resolution is slowly dying away but still prominent, while newer versions of Apple’s MacBook Pro sport a resolu- tion of 2880×1800. Sites optimized for the former will look quite small and be somewhat lost on the latter. The desktop browser world includes five major players: Chrome, Safari, and Opera, which share the WebKit engine (Opera had its own engine, Presto, which is now being phased out); Firefox; and Internet Explorer (ver- sion 9 can be considered semimodern and 10 fully modern). Thankfully they all tend to implement features in a standard way, and they all have a frequent or semifrequent update cycle (or are moving toward it), so users tend to get new features fairly quickly. Of course, a sizable percentage of users are still running older, less capable browsers, so you should always build with that in mind. (Much of the innovation in web standards comes to desktop browsers first because they’re the ones that developers tend to use on a daily basis. Therefore much of this book is written with desktop browsers in mind, although what you’ll learn can be applied anywhere.) Mobile When I say mobile, I generally mean phones. The range is wide: from older, cheaper hardware running rudimentary web browsers to mid-range fea- ture phones with browsers optimized for speed over power to high-powered expensive smartphones with browsers on par with those on your main com- puter, as well as a series of apps that often use an embedded browser to view content. In many countries, a majority of Internet users are on a mobile device; in India, for example, some 55 percent of web visits are made on mobile devices, and in Egypt nearly 70 percent of people rely on phones as their sole access to the Web. Worldwide estimates are that the number of mobile web users will exceed that of desktop computer users sometime between 2014 and 2015. Across the developing world, the dominant mobile device is the feature phone, which has functions beyond basic phoning and texting but often lacks full web access. The rise of low-cost and secondhand smartphone sales, how- ever, is already changing that market drastically. Within the next few years, we can expect to see smartphones dominate the mobile landscape. In 2011,