Peter Gasston — «The Modern
Total Page:16
File Type:pdf, Size:1020Kb
AA GUIDEGUIDE TOTO MODERNMODERN WEBWEB DEVELOPMENTDEVELOPMENT THE MODERN WEB THE MODERN WEB THETHE MODERNMODERN WEBWEB MULTI-DEVICE WEB DEVELOPMENT Today’s web technologies are evolving at near–light speed, • Incorporate cross-platform audio and video without WITH HTML5, CSS3, AND JAVASCRIPT bringing the promise of a seamless Internet ever closer to using troublesome plug-ins reality. When users can browse the Web on a three-inch • Make images and graphics scalable on high-resolution phone screen as easily as on a fifty-inch HDTV, what’s a devices with SVG developer to do? • Use powerful HTML5 elements to design better forms Peter Gasston’s The Modern Web will guide you through PETER GASSTON the latest and most important tools of device-agnostic web Turn outdated websites into flexible, user-friendly ones development, including HTML5, CSS3, and JavaScript. that take full advantage of the unique capabilities of any His plain-English explanations and practical examples device or browser. With the help of The Modern Web, emphasize the techniques, principles, and practices that you’ll be ready to navigate the front lines of device- you’ll need to easily transcend individual browser quirks independent development. and stay relevant as these technologies are updated. Learn how to: A B O U T T H E AUTHOR • Plan your content so that it displays fluidly across Peter Gasston has been a web developer for more than multiple devices 12 years in both agency and corporate settings. The author of The Book of CSS3, Gasston has also been published • Design websites to interact with devices using the most in Smashing Magazine, A List Apart, and .net magazine. up-to-date APIs, including Geolocation, Orientation, and He runs the web development blog Broken Links (http:// Web Storage broken-links.com/) and lives in London, England. TH E FINEST I N G EEK ENTERTAINMENT ™ www.nostarch.com “I LI E FLAT.” $34.95 ($36.95 CDN) This book uses RepKover —a durable binding that won’t snap shut. COMPUTERS/WEB PROGRAMMING SHELV E IN: 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 THE MODERN WEB Multi-Device Web Development with HTML5, CSS3, and JavaScript 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; [email protected]; 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. BRIEF CONTENts 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 CONTENts IN DETAIL 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 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 .