HTML5 & CSS3 HTML5 & CSS3 by David Karlins HTML5 & CSS3 For Dummies® Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com Copyright © 2014 by John Wiley & Sons, Inc., Hoboken, New Jersey Published simultaneously in Canada Media and software compilation copyright © 2014 by John Wiley & Sons, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions. Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book. LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REP- RESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMI- TATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SER- VICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport. Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com. Library of Congress Control Number: 2013944335 ISBN 978-1-118-58863-5 (pbk); ISBN 978-1-118-63941-2 (ebk); ISBN 978-1-118-63965-8 (ebk) Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 Contents at a Glance Introduction ..................................................................................1 Part I: Page Structure and Design with HTML5 and CSS3 ...5 Chapter 1: Structure and Design with HTML5 and CSS3 ..............................................7 Chapter 2: Deploying HTML5 .........................................................................................35 Chapter 3: CSS3 for Design, Interactivity, and Animation ..........................................59 Chapter 4: Compatibility Issues and Solutions ............................................................77 Part II: Creating Pages with HTML5 .......................................95 Chapter 5: HTML5 Semantic Tags ..................................................................................97 Chapter 6: HTML5 Forms ..............................................................................................121 Chapter 7: Native Video and Audio .............................................................................143 Chapter 8: Going Mobile: Responsive Design and jQuery Mobile ...........................169 Part III: CSS3 Effects and Transforms ..................................203 Chapter 9: Styling with CSS3 Properties .....................................................................205 Chapter 10: Applying CSS3 Effects ...............................................................................229 Chapter 11: Applying and Animating CSS3 Transforms ............................................255 Chapter 12: Styling Gradients with CSS3 ....................................................................283 Part IV: The Part of Tens .........................................................301 Chapter 13: Top Ten HTML5 Design Resources ........................................................303 Chapter 14: Top Ten CSS3 Design Tools .....................................................................315 Chapter 15: Top Ten Form Data Resources ...............................................................327 Index ..........................................................................................339 Table of Contents Introduction ...................................................................................1 About This Book ..............................................................................................1 Foolish Assumptions .......................................................................................1 Icons Used in This Book .................................................................................2 Beyond the Book .............................................................................................3 Where to Go from Here ...................................................................................3 Part I: Page Structure and Design with HTML5 and CSS3 ......5 Chapter 1: Structure and Design with HTML5 and CSS3 ............7 Realizing the Magic of HTML5 and CSS3 .......................................................9 Not all new . . . but different ...............................................................11 HTML5: Building on HTML techniques .............................................14 Understanding HTML Foundations .............................................................15 Five things you need to know about HTML ......................................16 Getting started with a basic HTML template ...................................18 Identifying HTML document structure .............................................20 Knowing basic element syntax ..........................................................21 Working with the <head> element .....................................................22 Using the <body> element and <div> tags ........................................22 Using headings, lists, and links ..........................................................24 Deploying class styles .........................................................................26 Breaking Down Basic CSS .............................................................................27 Creating a CSS document ....................................................................30 Examining CSS style definitions .........................................................30 Combining style definitions ................................................................32 Moving Forward with HTML5 and CSS3 .....................................................33 Chapter 2: Deploying HTML5 ...................................35 Identifying the Advantages of HTML5 .........................................................38 Knowing the Price of Using HTML5 .............................................................39 Introducing the Simplified Doctype Declaration .......................................40 Understanding HTML5’s New, Standardized Structure Elements ...........42 New process and workflow .................................................................43 A brief introduction to semantic elements .......................................44 <div> tags are dead — long live <div> tags ......................................46 A new role for basic tags .....................................................................47 Going Native with HTML5 .............................................................................48 Taking a Quick Look at HTML5’s New Form Tools ...................................50 HTML5 Elements for Scripting with JavaScript .........................................53 The <data> element .............................................................................53 Using the <canvas> element ...............................................................54 viii HTML5 & CSS3 For Dummies Chapter 3: CSS3 for Design, Interactivity, and Animation ..........59 Breaking Out of the Box with CSS3 Design .................................................62 The way it was ......................................................................................62 A new design paradigm .......................................................................63 Replacing Images with CSS3 .........................................................................64 Background gradients .........................................................................65 CSS3 and Mobile — A Perfect Fit .................................................................67 Animating with CSS3 .....................................................................................69 Designing with Web Fonts ............................................................................70 Linking to a web font ...........................................................................72 Chapter 4: Compatibility Issues and Solutions....................77 Making HTML5 and CSS3 Work in Older Browsers ...................................80 Everything you wanted to know about IE8 (and earlier) but were afraid to ask ......................................................................81 Hacking solutions.................................................................................83 Testing sites in IE8 (and older) ..........................................................86 Using graceful degradation for backward compatibility ................87 HTML5 and CSS3 Browser Wars ..................................................................89 Using vendor-specific CSS prefixes ....................................................90 Competing video formats ...................................................................90 Creating video for IE8 ..........................................................................92 Mobile Compatibility .....................................................................................93 A Word on Flash ............................................................................................94 Part II: Creating Pages with HTML5........................................95 Chapter 5: HTML5 Semantic Tags...............................97 Understanding the Different Kinds of Semantic Elements .....................100 Structural HTML5 semantic tags .....................................................100 Nonstructural semantic tags ............................................................101 Other HTML5 semantic tags .............................................................102 Organizing Content with Five Elements ....................................................105 Knowing when to use what ...............................................................105 Examining a basic HTML5 page template .......................................109 Styling structural tags .......................................................................110 HTML5 for Specific Content .......................................................................111 Using <details> and <summary> elements .....................................113 Defining <figure> and <figcaption> tags ..........................................114 Highlighting with the <mark> tag .....................................................115 Using <time> and <datetime> ...........................................................116 Defining addresses .............................................................................117 Styling content tags ...........................................................................118 Advantages of HTML5 Semantic Tags .......................................................119