Rob Crowther A user-friendly reference guide MANNING HTML5 & CSS3 www.it-ebooks.info Hello! HTML5 & CSS3 www.it-ebooks.info www.it-ebooks.info Hello! HTML5 & CSS3 A user-friendly reference guide Rob Crowther MANNING SHELTER ISLAND www.it-ebooks.info For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact: Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: orders@manning.com ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. User Friendly artwork, characters, and strips used by permission from UserFriendly.Org. All Rights Reserved. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine. Manning Publications Co. Development editor: Cynthia Kane 20 Baldwin Road Copyeditor: Tiffany Taylor PO Box 261 Technical proofreader: Adam London Shelter Island, NY 11964 Typesetter: Marija Tudor Cover designer: Marija Tudor ISBN: 9781935182894 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 17 16 15 14 13 12 www.it-ebooks.info v brief contents PART 1 LEARNING HTML5 1 1 Introducing HTML5 markup 3 2 HTML5 forms 38 3 Dynamic graphics 73 4 Audio and video 119 5 Browser-based APIs 153 6 Network and location APIs 191 PART 2 LEARNING CSS3 231 7 New CSS language features 233 8 Layout with CSS3 271 9 Motion and color 313 10 Borders and backgrounds with CSS3 351 11 Text and fonts 392 www.it-ebooks.info www.it-ebooks.info vii contents preface xv acknowledgments xvii about this book xix PART 1 LEARNING HTML5 1 1 Introducing HTML5 markup 3 Why do we need new elements? 4 New elements for page structure 7 Sectioning content 7 ❍ Headings, headers, and the outlining algorithm 9 ❍ Common page elements 15 The HTML DOCTYPE 17 New elements for content 18 Time 18 ❍ Images and diagrams with <figure> and <figcaption> 21 ❍ Emphasizing words and phrases 22 HTML5’s new global attributes 23 Accessibility with ARIA 24 ❍ Extending HTML with custom attributes 26 ❍ Expressing more than just document semantics with microdata 28 The HTML5 content model 29 Browser support 32 Supporting Internet Explorer 35 ❍ Enabling HTML5 support in Internet Explorer with html5.js 36 Summary 36 www.it-ebooks.info viii contents 2 HTML5 forms 38 The limitations of HTML4 forms 39 Numbers, ranges, dates, and times 42 Validation 46 The required attribute 47 ❍ The min, max, and pattern attributes 47 ❍ Taking advantage of validation with CSS 49 ❍ Turning off validation 50 Email and URLs 51 Email addresses 51 ❍ Web addresses 53 Elements for user feedback 53 The <output> element 53 ❍ The <progress> element 55 The <meter> element 56 Less-common form controls 57 Telephone numbers 57 ❍ Color pickers 58 <keygen> 59 New attributes for the <input> element 59 Placeholder text 59 ❍ Form autofocus 61 ❍ Protecting private information with the autocomplete attribute 61 Extending forms with JavaScript 62 Customizing the validation messages 62 ❍ Triggering validation with JavaScript 64 ❍ Responding to any changes in value 64 ❍ Creating combo boxes with <datalist> 65 ❍ Easy ways to work with form values in JavaScript 67 Browser support and detecting HTML5 features 68 Browser inconsistencies 69 ❍ Detecting supported features 69 ❍ The html5-now library 71 Summary 72 3 Dynamic graphics 73 Getting started with <canvas>: shapes, images, and text 74 Drawing shapes 76 ❍ Placing images 82 ❍ Drawing text 84 Advanced <canvas>: gradients, shadows, and animation 87 Creating gradients 88 ❍ Drawing drop shadows 91 Transformations 92 ❍ Animation 94 www.it-ebooks.info contents ix Getting started with SVG 96 Applying styles to SVG 98 ❍ Drawing common shapes 99 Images, text, and embedded content 101 ❍ Transforms, gradients, patterns, and declarative animation 105 SVG vs. <canvas> 112 Browser support 114 Supporting <canvas> in older versions of IE with explorercanvas 114 ❍ SVG in XML vs. SVG in HTML 115 Embedding SVG as an image 115 ❍ Referencing an SVG image from CSS 116 ❍ Embedding SVG as an object 116 SVG support in older browsers with SVG Web and Raphaël 116 Summary 118 4 Audio and video 119 Audio and video on the modern web 119 The <audio> element 123 Common attributes: controls, autoplay, loop, and preload 124 Codecs and license issues 129 ❍ Using multiple sources 133 The <video> element 134 <video> element attributes 135 ❍ Containers, codecs, and license issues 138 ❍ Easy encoding with Miro Video Converter 139 ❍ Advanced encoding with FFmpeg 140 Using multiple sources 142 Controlling audio and video with JavaScript 144 Integrating media with other content 146 Browser support 150 Web server configuration for audio and video 151 Supporting legacy browsers with Flash video 152 Summary 152 5 Browser-based APIs 153 Rich-text editing with the contenteditable attribute 154 Basic text editing 155 ❍ The spellcheck attribute 157 Applying formatting to the editable text 160 Natural user interaction with drag-and-drop 164 Basic drag-and-drop 167 ❍ Drag-and-drop in all browsers 169 www.it-ebooks.info [...]... Hello! HTML5 and CSS3 MORE DETAILED LISTINGS HAVE ANNOTATIONS JUST LIKE DIAGRAMS THIS ONE POINTS OUT THE EARLIER SNIPPET Code downloads Up-to-date downloadable code samples and other news about the book are available from the publisher’s website at www.manning.com/ HelloHTML5andCSS3 Author Online Purchase of Hello! HTML5 & CSS3 includes free access to a... provided to get you started in JavaScript Book structure and suggested reading order This book is split into two sections: part 1 concentrates on HTML5 and part 2 on CSS3 The HTML5 section has chapters on the new markup features of HTML5, forms and form validation, HTML5 s new dynamic graphics capabilities, using video and audio, new JavaScript APIs for client-side development, and new APIs related to networking... applications for corporate clients such as BNP Paribas, BNY Mellon, Honeywell, and Young & Co.’s Brewery www.it-ebooks.info Part 1 Learning HTML5 his part of the book focuses on HTML5 Chapter 1 introduces you to new and updated markup features in HTML5, chapter 2 discusses forms and form validation, chapter 3 explores HTML5 s new dynamic graphics capabilities, chapter 4 talks about how to use video and... THIS CODE LISTINGS & SNIPPETS Code listings and snippets and any occurrence of code in the text will appear in the LucidaMonoEF font Here is a typical code snippet: HTML5 and CSS3 www.it-ebooks.info about this book xxv Longer listings will look like this: LISTINGS WILL ALSO BE DISCUSSED BY CHARACTERS HERE IS A SIMPLE WEB PAGE Hello! ... and aspect ratio 291 ❍ Additional device-detection features 292 The future of CSS layout 293 Using flexible boxes for nested layout 294 ❍ Using the CSS3 Grid Alignment module 298 ❍ Controlling content flow with CSS3 Regions 303 ❍ Making complex shapes with CSS3 Exclusions and Shapes 305 Browser support 308 inline-block in IE6 and IE7 309 ❍ calc in Chrome and Firefox 310 ❍ box-sizing in Firefox and Safari... “Illiad” Fraser of User Friendly for letting Manning use the User Friendly cartoon characters in the Hello! series and for allowing me to put my own words in the characters’ mouths www.it-ebooks.info about this book You should read this book if you’re interested in learning about the new features in HTML5 and CSS3 available to web developers and enjoy an example-driven, visual approach to learning Readers... 6 look at the new APIs you can use for client-side development and networking www.it-ebooks.info 2 CHAPTER www.it-ebooks.info 1 Introducing HTML5 markup This chapter covers • New semantic elements in HTML5 • Updated HTML4 elements • New global attributes • The HTML5 content model • Getting new elements to work in old browsers This chapter assumes you have some knowledge of previous versions of HTML... www.it-ebooks.info 4 CHAPTER 1 Introducing HTML5 markup We’ll start with some background on how and why the particular set of new elements in HTML5 was chosen Then we’ll examine new elements for the overall structure of web pages before moving on to elements, both new and redefined, intended for particular bits of content You’ll then learn about the new attributes in HTML5 Next, we’ll spend a few pages considering... categorization in HTML5 Finally, you’ll go back to practicalities and learn how to make sure your new HTML5 content will work in old browsers Why do we need new elements? This section looks at some of the research that went into understanding the document structures that web authors were trying to describe semantically with HTML; this information was used to decide which new elements should be added in HTML5 We’ll... of CSS3 Chapter 8 on layout will be of less interest to you, but chapter 11 covers using custom fonts, so you may want to read that section WEB DESIGNER If you’re a pure web designer with no interest in JavaScript, then you can read the book while avoiding most of the code Any snippets of JavaScript you’ll come across in chapters 1 and 7 through 11 can be ignored unless you want to try replicating CSS3 . reference guide MANNING HTML5 & CSS3 www.it-ebooks.info Hello! HTML5 & CSS3 www.it-ebooks.info www.it-ebooks.info Hello! HTML5 & CSS3 A user-friendly. addresses 53 Elements for user feedback 53 The <output> element 53 ❍ The <progress> element 55 The <meter> element 56 Less-common form controls