HTML5 and CSS3: Develop with Tomorrow's Standards Today

What Readers Are Saying About HTML5 and CSS3

This book does an excellent job of cutting through the hype and telling you what you need to know to navigate the HTML5 waters. Casey Helbling Founder, Clear :: Software for Good If you are looking to take advantage of the emerging HTML5 standard, then this is your book. Brian’s practical experience and examples show you how to develop robust web applications amid all the support differences of today’s browsers. Mark Nichols Microsoft Senior consultant and cohost, DeveloperSmackdown.com Podcast Learning HTML5 and CSS3 has improved my ability to work on cutting-edge projects. I just started a project using HTML5, and I would not have felt confident without this book. Noel Rappin Senior consultant, Obtiva, and author, Rails Test Prescriptions Brian’s book effortlessly guides you through crafting a site in HTML5 and CSS3 that works in all browsers; it describes what works now, what doesn’t, and what to watch out for as the standards and browsers evolve. Doug Rhoten Senior software developer, InterFlow

HTML5 and CSS3

Develop with Tomorrow’s Standards Today Brian P. Hogan

The Pragmatic Bookshelf Raleigh, North Carolina

Dallas, Texas

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and The Pragmatic Programmers, LLC was aware of a trademark claim, the designations have been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer, Pragmatic Programming, Pragmatic Bookshelf and the linking g device are trademarks of The Pragmatic Programmers, LLC. Every precaution was taken in the preparation of this book. However, the publisher assumes no responsibility for errors or omissions, or for damages that may result from the use of information (including program listings) contained herein. Our Pragmatic courses, workshops, and other products can help you and your team create better software and have more fun. For more information, as well as the latest Pragmatic titles, please visit us at http://www.pragprog.com. The team that produced this book includes: Editor: Indexing: Copy edit: Layout: Production: Customer support: International:

Susannah Pfalzer Potomac Indexing, LLC Kim Wimpsett Steve Peter Janet Furlow Ellie Callahan Juliet Benda

Copyright © 2010 Pragmatic Programmers, LLC. 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, or otherwise, without the prior consent of the publisher. Printed in the United States of America. ISBN-10: 1-934356-68-9 ISBN-13: 978-1-934356-68-5 Printed on acid-free paper. P1.0 printing, December 2010 Version: 2011-1-4

Contents Acknowledgments Preface HTML5: The Platform vs. the Specification How This Works . . . . . . . . . . . . . . . . What’s in This Book . . . . . . . . . . . . . Prerequisites . . . . . . . . . . . . . . . . . . Online Resources . . . . . . . . . . . . . . . 1

8

. . . . .

10 10 11 12 12 13

An Overview of HTML5 and CSS3 1.1 A Platform for Web Development . . . . . . . . . . 1.2 Backward Compatibility . . . . . . . . . . . . . . . 1.3 The Road to the Future Is Bumpy . . . . . . . . .

14 14 17 17

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

Part I—Improving User Interfaces

23

2

New Structural Tags and Attributes Tip 1 Redefining a Blog Using Semantic Markup . . . . Tip 2 Creating Pop-up Windows with Custom Data Attributes . . . . . . . . . . . . . . . . . . . . . . . . . .

24 27

Creating User-Friendly Web Forms Tip 3 Describing Data with New Input Fields . . Tip 4 Jumping to the First Field with Autofocus . Tip 5 Providing Hints with Placeholder Text . . . Tip 6 In-Place Editing with contenteditable . . .

45 48 56 58 65

3

. . . .

. . . .

. . . .

. . . .

40

CONTENTS

4

5

Making Tip 7 Tip 8 Tip 9 Tip 10

Better User Interfaces with CSS3 Styling Tables with Pseudoclasses . . . . . . . . Making Links Printable with :after and content . Creating Multicolumn Layouts . . . . . . . . . . Building Mobile Interfaces with Media Queries .

. . . .

72 74 83 87 94

Improving Accessibility Tip 11 Providing Navigation Hints with ARIA Roles . . . . Tip 12 Creating an Accessible Updatable Region . . . . .

97 99 104

Part II—New Sights and Sounds

110

6

Drawing on the Canvas Tip 13 Drawing a Logo . . . . . . . . . . . . . . . . . . . . Tip 14 Graphing Statistics with RGraph . . . . . . . . . .

111 112 119

7

Embedding Audio and Video 7.1 A Bit of History . . . . 7.2 Containers and Codecs Tip 15 Working with Audio . . Tip 16 Embedding Video . . .

127 128 129 133 137

8

. . . .

Eye Candy Tip 17 Rounding Rough Edges Tip 18 Working with Shadows, mations . . . . . . . . . . Tip 19 Using Real Fonts . . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . . . . . . . . . . . . . Gradients, and Transfor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

144 146 154 165

Part III—Beyond HTML5

171

9

Working with Client-Side Data Tip 20 Saving Preferences with localStorage . . . . . . . . Tip 21 Storing Data in a Client-Side Relational Database Tip 22 Working Offline . . . . . . . . . . . . . . . . . . . .

172 175 181 193

10

Playing Nicely with Other APIs Tip 23 Preserving History . . . . . . . Tip 24 Talking Across Domains . . . Tip 25 Chatting with Web Sockets . Tip 26 Finding Yourself: Geolocation

196 197 200 207 214

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

. . . .

Report erratum this copy is (P1.0 printing, December 2010)

6

CONTENTS

11

A

Where 11.1 11.2 11.3 11.4 11.5 11.6 11.7

to Go Next CSS3 Transitions . . . . . . . . Web Workers . . . . . . . . . . . Native Drag-and-Drop Support WebGL . . . . . . . . . . . . . . Indexed Database API . . . . . Client-Side Form Validation . . Onward! . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

218 219 221 223 229 229 230 231

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

232 232 233 233 234 235 235 235 238 238

Primer Loading jQuery . . . . . . . jQuery Basics . . . . . . . . Methods to Modify Content Creating Elements . . . . . Events . . . . . . . . . . . . Document Ready . . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

240 240 241 241 244 244 245

C

Encoding Audio and Video C.1 Encoding Audio . . . . . . . . . . . . . . . . . . . . C.2 Encoding Video for the Web . . . . . . . . . . . . .

247 247 248

D

Resources D.1 Resources on the Web . . . . . . . . . . . . . . . .

249 249

E

Bibliography

251

Index

252

B

Features Quick Reference A.1 New Elements . . . . A.2 Attributes . . . . . . A.3 Forms . . . . . . . . . A.4 Form Field Attributes A.5 Accessibility . . . . . A.6 Multimedia . . . . . . A.7 CSS3 . . . . . . . . . A.8 Client-Side Storage . A.9 Additional APIs . . .

. . . . . . .

jQuery B.1 B.2 B.3 B.4 B.5 B.6

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

Report erratum this copy is (P1.0 printing, December 2010)

7

Acknowledgments I jumped into writing this book before I had even finished my previous one, and although most of my friends, family, and probably the publisher thought I was crazy for not taking a bit of a break, they have all been so supportive. This book is a result of so many wonderful and helpful people. First, I can’t thank Dave Thomas and Andy Hunt enough for giving me the opportunity to work with them a second time. Their feedback throughout this process has helped shape this book quite a bit, and I’m honored to be a Pragmatic Bookshelf author. Daniel Steinberg helped me get this book started, signed, and on the right track early on, and I’m very grateful for all the support he gave and the things he taught me about how to write clearly. Whenever I write, I still hear his voice guiding me in the right direction. Daniel was unable to continue working with me on this book, but he left me in unbelievably good hands. Susannah Pfalzer has been so amazingly helpful throughout this entire process, keeping me on track, pushing me to do better, and always knowing exactly the right questions to ask me at exactly the right times. Without Susannah, this book wouldn’t be nearly as good. My technical reviewers for both rounds were extremely helpful in shaping a lot of the content and its presentation. Thank you, Aaron Godin, Ali Raza, Charles Leffingwell, Daniel Steinberg, David Kulberg, Don Henton, Doug Rhoten, Edi Schlechtinger, Jon Mischo, Jon Oebser, Kevin Gisi, Marc Harter, Mark Nichols, Noel Rappin, Paul Neibarger, Sam Elliott, Sean Canton, Srdjan Pejic, Stephen Wolff, Todd Dahl, and Erik Watson.

A CKNOWLEDGMENTS

Special thanks to the fine folks at ZenCoder for assisting with the video encoding for the sample files and for making it much easier for content producers to prepare video for HTML5. Thank you to my business associates Chris Johnson, Chris Warren, Mike Weber, Jon Kinney, Adam Ludwig, Gary Crabtree, Carl Hoover, Josh Anderson, Austen Ott, and Nick Lamuro for the support on this and many other projects. Special thanks to Erich Tesky for the reality checks and for being a great friend when things got frustrating. I also want to thank my dad for always expecting me to do my best and for pushing me to not give up when things looked impossible. That’s made anything possible. Finally, my wonderful wife, Carissa, and my daughters, Ana and Lisa, have my eternal gratitude and love. They gave up a lot of weekends and evenings so that I could hammer away in the office writing. Every time I got stuck, Carissa’s constant reassurance that I’d “figure it out” always seemed to make it better. I am extremely lucky to have them in my corner.

Report erratum this copy is (P1.0 printing, December 2010)

9

Preface Three months on the Web is like a year in real time. Web developers pretty much think this way, since we’re always hearing about something new. A year ago HTML5 and CSS3 seemed so far off in the distance, but already companies are using these technologies in their work today, because browsers like Google Chrome, Safari, Firefox, and Opera are starting to implement pieces of the specification. HTML5 and CSS3 help lay the groundwork for the next generation of web applications. They let us build sites that are simpler to develop, easier to maintain, and more user-friendly. HTML5 has new elements for defining site structure and embedding content, which means we don’t have to resort to extra markup or plug-ins. CSS3 provides advanced selectors, graphical enhancements, and better font support that makes our sites more visually appealing without using font image replacement techniques, complex JavaScript, or graphics tools. Improved accessibility support will improve Ajax applications for people with disabilities, and offline support lets us start building working applications that don’t need an Internet connection. In this book, you’re going to find out about all of the ways you can use HTML5 and CSS3 right now, even if your users don’t have browsers that can support all of these features yet. Before we get started, let’s take a second and talk about HTML5 and buzzwords.

HTML5: The Platform vs. the Specification HTML5 is a specification that describes some new tags and markup, as well as some wonderful JavaScript APIs, but it’s getting caught up in a whirlwind of hype and promises. Unfortunately, HTML5 the standard has evolved into HTML5 the platform, creating an awful lot of confusion among developers, customers, and even authors. In some cases, pieces

H OW T HIS W ORKS

from the CSS3 specification such as shadows, gradients, and transformations are being called “HTML.” Browser makers are trying to one-up each other with how much “HTML5” they support. People are starting to make strange requests like “My site will be in HTML5, right?” For the majority of the book, we’ll focus on the HTML5 and CSS3 specifications themselves and how you can use the techniques they describe. In the last part of the book, we’ll look into a suite of closely related specifications that were once part of HTML5 but are in use right now on multiple platforms. These include Web SQL Databases, Geolocation, and Web Sockets. Although these things aren’t technically HTML5, they can help you build incredible things when combined with HTML5 and CSS3.

How This Works Each chapter in this book focuses on a specific group of problems that we can solve with HTML5 and CSS3. Each chapter has an overview and a table summarizing the tags, features, or concepts covered in the chapter. The main content of each chapter is broken apart into “tips,” which introduce you to a specific concept and walk you through building a simple example using the concept. The chapters in this book are grouped topically. Rather than group things into an HTML5 part and a CSS3 part, it made more sense to group them based on the problems they solve. Each tip contains a section called “Falling Back,” which shows you methods for addressing the users who use browsers that don’t offer HTML5 and CSS3 support. We’ll be using a variety of techniques to make these fallbacks work, from third-party libraries to our own jQuery plug-ins. These tips can be read in any order you like. Finally, each chapter wraps up with a section called “The Future,” where we discuss how the concept can be applied as it becomes more widely adopted. This book focuses on what you can use today. There are more HTML5 and CSS3 features that aren’t in widespread use yet. You’ll learn more about them in the final chapter, Chapter 11, Where to Go Next, on page 218.

Report erratum this copy is (P1.0 printing, December 2010)

11

W HAT ’ S IN T HIS B OOK

What’s in This Book We’ll start off with a brief overview of HTML5 and CSS3 and take a look at some of the new structural tags you can use to describe your page content. Then we’ll work with forms, and you’ll get a chance to use some of the form fields and features such as autofocus and placeholders. From there, you’ll get to play with CSS3’s new selectors so you can learn how to apply styles to elements without adding extra markup to your content. Then we’ll explore HTML’s audio and video support, and you’ll learn how to use the canvas to draw shapes. You’ll also get to see how to use CSS3’s shadows, gradients, and transformations, as well as how to learn how to work with fonts. In the last section, we’ll use HTML5’s client-side features such as Web Storage, Web SQL Databases, and offline support to build client-side applications. We’ll use Web Sockets to talk to a simple chat service, and you’ll see how HTML5 makes it possible to send messages and data across domains. You’ll also get a chance to play with the Geolocation API and learn how to manipulate the browser’s history. We’ll then wrap up by taking a look at a few things that aren’t immediately useful but will become important in the near future. In Appendix A, on page 232, you’ll find a listing of all the features covered in this book with a quick reference to those chapters that reference those features. We’ll be using a lot of jQuery in this book, so Appendix B, on page 240, gives you a short primer. You’ll also find a small appendix explaining how to encode audio and video files for use with HTML5.

Prerequisites This book is aimed primarily at web developers who have a good understanding of HTML and CSS. If you’re just starting out, you’ll still find this book valuable, but I recommend you check out Designing with Web Standards [Zel09] and my book, Web Design for Developers [Hog09]. I also assume that you have a basic understanding of JavaScript and jQuery,1 which we will be using to implement many of our fallback 1.

http://www.jquery.com

Report erratum this copy is (P1.0 printing, December 2010)

12

O NLINE R ESOURCES

solutions. Appendix B, on page 240, is a brief introduction to jQuery that covers the basic methods we’ll be using. You’ll need Firefox 3.6, Google Chrome 5, Opera 10.6, or Safari 5 to test the code in this book. You’ll probably need all of these browsers to test everything we’ll be building, since each browser does things a little differently. You’ll also need a way to test your sites with Internet Explorer so you can ensure that the fallback solutions we create actually work. If you need to be able to test your examples in multiple versions of Internet Explorer, you can download IETester for Windows, because it supports IE 6, 7, and 8 in a single application. If you’re not running Windows, you should consider using a virtual machine like VirtualBox or VMware or using a service like CrossBrowserTesting2 or MogoTest.3

Online Resources The book’s website4 has links to an interactive discussion forum as well as errata for the book. You can also find the source code for all the examples in this book linked on that page. Additionally, readers of the eBook can click on the gray box above the code excerpts to download that snippet directly If you find a mistake, please create an entry on the Errata page so we can get it addressed. If you have an electronic copy of this book, there are links in the footer of each page that you can use to easily submit errata. Finally, be sure to visit this book’s blog, Beyond HTML5 and CSS3.5 I’ll be posting related material, updates, and working examples from this book. Ready to go? Great! Let’s get started with HTML5 and CSS3.

2. 3. 4. 5.

http://crossbrowsertesting.com/ http://www.mogotest.com/ http://www.pragprog.com/titles/bhh5/ http://www.beyondhtml5andcss3.com/

Report erratum this copy is (P1.0 printing, December 2010)

13

Chapter 1

An Overview of HTML5 and CSS3 HTML51 and CSS32 are more than just two new standards proposed by the World Wide Web Consortium (W3C) and its working groups. They are the next iteration of technologies you use every day, and they’re here to help you build better modern web applications. Before we dive into the deep details of HTML5 and CSS3, let’s talk about some benefits of HTML5 and CSS3, as well as some of the challenges we’ll face.

1.1 A Platform for Web Development A lot of the new features of HTML center around creating a better platform for web-based applications. From more descriptive tags and better cross-site and cross-window communication to animations and improved multimedia support, developers using HTML5 have a lot of new tools to build better user experiences.

More Descriptive Markup Each version of HTML introduces some new markup, but never before have there been so many new additions that directly relate to describing content. You’ll learn about elements for defining headings, footers, navigation sections, sidebars, and articles in Chapter 2, New Structural Tags and Attributes, on page 24. You’ll also learn about meters, progress bars, and how custom data attributes can help you mark up data. The HTML5 specification is at http://www.w3.org/TR/html5/. CSS3 is split across multiple modules, and you can follow its progress at http://www.w3.org/Style/CSS/current-work. 1. 2.

A P LATFORM FOR W EB D EVELOPMENT

Multimedia with Less Reliance on Plug-ins You don’t need Flash or Silverlight for video, audio, and vector graphics anymore. Although Flash-based video players are relatively simple to use, they don’t work on Apple’s mobile devices. That’s a significant market, so you’ll need to learn how to use non-Flash video alternatives. In Chapter 7, Embedding Audio and Video, on page 127, you’ll see how to use HTML5 audio and video with effective fallbacks.

Better Applications Developers have tried all kinds of things to make richer, more interactive applications on the Web, from ActiveX controls to Flash. HTML5 offers amazing features that, in some cases, completely eliminate the need for third-party technologies. Cross-Document Messaging Web browsers prevent us from using scripts on one domain to affect or interact with scripts on another domain. This restriction keeps end users safe from cross-site scripting, which has been used to do all sorts of nasty things to unsuspecting site visitors. However, this prevents all scripts from working, even when we write them ourselves and know we can trust the content. HTML5 includes a workaround that is both safe and simple to implement. You’ll see how to make this work in Talking Across Domains, on page 200. Web Sockets HTML5 offers support for Web Sockets, which give you a persistent connection to a server. Instead of constantly polling a back end for progress updates, your web page can subscribe to a socket, and the back end can push notifications to your users. We’ll play with that a bit in Chatting with Web Sockets, on page 207. Client-Side Storage We tend to think of HTML5 as a web technology, but with the addition of the Web Storage and Web SQL Database APIs, we can build applications in the browser that can persist data entirely on the client’s machine. You’ll see how to use those APIs in Chapter 9, Working with Client-Side Data, on page 172.

Report erratum this copy is (P1.0 printing, December 2010)

15

A P LATFORM FOR W EB D EVELOPMENT

Better Interfaces The user interface is such an important part of web applications, and we jump through hoops every day to make browsers do what we want. To style a table or round corners, we either use JavaScript libraries or add tons of additional markup so we can apply styles. HTML5 and CSS3 make that practice a thing of the past. Better Forms HTML5 promises better user interface controls. For ages, we’ve been forced to use JavaScript and CSS to construct sliders, calendar date pickers, and color pickers. These are all defined as real elements in HTML5, just like drop-downs, checkboxes, and radio buttons. You’ll learn about how to use them in Chapter 3, Creating User-Friendly Web Forms, on page 45. Although this isn’t quite ready yet for every browser, it’s something you need to keep your eye on, especially if you develop web-based applications. In addition to improved usability without reliance on JavaScript libraries, there’s another benefit—improved accessibility. Screen readers and other browsers can implement these controls in specific ways so that they work easily for the disabled. Improved Accessibility Using the new HTML5 elements in HTML5 to clearly describe our content makes it easier for programs like screen readers to easily consume the content. A site’s navigation, for example, is much easier to find if you can look for the nav tag instead of a specific div or unordered list. Footers, sidebars, and other content can be easily reordered or skipped altogether. Parsing pages in general becomes much less painful, which can lead to better experiences for people relying on assistive technologies. In addition, new attributes on elements can specify the roles of elements so that screen readers can work with them easier. In Chapter 5, Improving Accessibility, on page 97, you’ll learn how to use those new attributes so that today’s screen readers can use them. Advanced Selectors CSS3 has selectors that let you identify odd and even rows of tables, all selected check boxes, or even the last paragraph in a group. You can accomplish more with less code and less markup. This also makes it much easier to style HTML you can’t edit. In Chapter 4, Making Better User Interfaces with CSS3, on page 72, you’ll see how to use these selectors effectively. Report erratum this copy is (P1.0 printing, December 2010)

16

B ACKWARD C OMPATIBILITY

Visual Effects Drop shadows on text and images help bring depth to a web page, and gradients can also add dimension. CSS3 lets you add shadows and gradients to elements without resorting to background images or extra markup. In addition, you can use transformations to round corners or skew and rotate elements. You’ll see how all of those things work in Chapter 8, Eye Candy, on page 144.

1.2 Backward Compatibility One of the best reasons for you to embrace HTML5 today is that it works in most existing browsers. Right now, even in Internet Explorer 6, you can start using HTML5 and slowly transition your markup. It’ll even validate with the W3C’s validation service (conditionally, of course, because the standards are still evolving). If you’ve worked with HTML or XML, you’ve come across the doctype declaration before. It’s used to tell validators and editors what tags and attributes you can use and how the document should be formed. It’s also used by a lot of web browsers to determine how the browser will render the page. A valid doctype often causes browsers to render pages in “standards mode.” Compared to the rather verbose XHTML 1.0 Transitional doctype used by many sites:

the HTML5 doctype is ridiculously simple: Download html5_why/index.html



Place that at the top of the document, and you’re using HTML5. Of course, you can’t use any of the new HTML5 elements that your target browsers don’t yet support, but your document will validate as HTML5.

1.3 The Road to the Future Is Bumpy There are a few roadblocks that continue to impede the widespread adoption of HTML5 and CSS3. Some are obvious, and some are less so. Report erratum this copy is (P1.0 printing, December 2010)

17

T HE R OAD TO THE F UTURE I S B UMPY

Joe Asks. . . But I Like My XHTML Self-Closing Tags. Can I Still Use Them? You sure can! Many developers fell in love with XHTML because of the stricter requirements on markup. XHTML documents forced quoted attributes, made you self-close content tags, required that you use lowercase attribute names, and brought well-formed markup onto the World Wide Web. Moving to HTML5 doesn’t mean you have to change your ways. HTML5 documents will be valid if you use the HTML5-style syntax or the XHTML syntax, but you need to understand the implications of using self-closing tags. Most web servers serve HTML pages with the text/html MIME type because of Internet Explorer’s inability to properly handle the application/xml+xhtml MIME type associated with XHTML pages. Because of this, browsers tend to strip off self-closing tags because self-closing tags were not considered valid HTML before HTML5. For example, if you had a self-closing script tag above a div like this: <script language="javascript" src="application.js" />

Help

the browser would remove the self-closing forward slash, and then the renderer would think that the h2 was within the script tag, which never closes! This is why you see script tags coded with an explicit closing tag, even though a self-closing tag is valid XHTML markup. So, be aware of possible issues like this if you do use selfclosing tags in your HTML5 documents, because they will be served with the text/html MIME type. You can learn more about this issue and others at http://www.webdevout.net/articles/ beware-of-xhtml#myths.

Report erratum this copy is (P1.0 printing, December 2010)

18

T HE R OAD TO THE F UTURE I S B UMPY

Cake and Frosting I like cake. I like pie better, but cake is pretty good stuff. I prefer cake with frosting on it. When you’re developing web applications, you have to keep in mind that all the pretty user interfaces and fancy JavaScript stuff is the frosting on the cake. Your website can be really good without that stuff, and just like a cake, you need a foundation on which to put your frosting. I’ve met some people who don’t like frosting. They scrape it off the cake. I’ve also met people who use web applications without JavaScript for varying reasons. Bake these people a really awesome cake. Then add frosting.

Internet Explorer Internet Explorer currently has the largest user base, and versions 8 and below have very weak HTML5 and CSS3 support. IE 9 improves this situation, but it’s not widely used yet. That doesn’t mean we can’t use HTML5 and CSS3 in our sites anyway. We can make our sites work in Internet Explorer, but they don’t have to work the same as the versions we develop for Chrome and Firefox. We’ll just provide fallback solutions so we don’t anger users and lose customers.

Accessibility Our users must be able to interact with our websites, whether they are visually impaired, hearing impaired, on older browsers, on slow connections, or on mobile devices. HTML5 introduces some new elements, such as audio, video, and canvas. Audio and video have always had accessibility issues, but the canvas element presents new challenges. The canvas element lets us create vector images within the HTML document using JavaScript. This creates issues for the visually impaired but also causes problems for the 5 percent of web users who have disabled JavaScript.3 3.

http://visualrevenue.com/blog/2007/08/eu-and-us-javascript-disabled-index.html

Report erratum this copy is (P1.0 printing, December 2010)

19

T HE R OAD TO THE F UTURE I S B UMPY

We need to be mindful of accessibility when we push ahead with new technologies and provide suitable fallbacks for these HTML5 elements, just like we would for people using Internet Explorer.

Deprecated Tags HTML5 has introduced a lot of new elements, but the specification also deprecates quite a few common elements that you might find in your web pages.4 You’ll want to remove those moving forward. First, several presentational elements are gone. If you find these in your code, get rid of them! Replace them with semantically correct elements and use CSS to make them look nice. • basefont • big • center • font • s • strike • tt • u Some of those tags are pretty obscure, but you will find a lot of pages out there maintained with visual editors such as Dreamweaver that still contain a lot of font and center tags. Aside from the presentational elements, support for frames has been removed. Frames have always been popular in enterprise web applications such as PeopleSoft, Microsoft Outlook Web Access, and even custom-built portals. Despite the widespread use, frames caused so many usability and accessibility issues that they just had to go. That means these elements are gone: • frame • frameset • noframes You should be looking at ways to lay out your interfaces without frames, using regular CSS or some JavaScript. If you’re using frames to ensure the same header, footer, and navigation appears on each page of your 4.

http://www.w3.org/TR/html5-diff/

Report erratum this copy is (P1.0 printing, December 2010)

20

T HE R OAD TO THE F UTURE I S B UMPY

application, you should be able to accomplish the same thing with the tools provided by your web development framework. A few other elements are gone because there are better options available: • acronym gets replaced by abbr. • applet gets replaced by object. • dir gets replaced by ul. In addition to deprecated elements, there are many attributes that are no longer valid. These include presentational attributes such as the following: • align • link, vlink, alink, and text attributes on the body tag • bgcolor • height and width • scrolling on the iframe element • valign • hspace and vspace • cellpadding, cellspacing, and border on table If you use target on your links, like this:

you’ll want to look at using JavaScript instead, because target is deprecated. The profile attribute on the head tag is no longer supported either, and this is something you tend to see in a lot of WordPress templates. Finally, the longdesc attribute for img and iframe elements is gone, which is a bit of a disappointment to accessibility advocates, because longdesc was an accepted way of providing additional descriptive information to users of screen readers. If you plan on using HTML5 with your existing sites, you’ll want to look for these elements and remove them or replace them with more semantic ones. Be sure to validate your pages with the W3C Validator service,5 because this will help you locate deprecated tags and attributes. 5.

http://validator.w3.org/

Report erratum this copy is (P1.0 printing, December 2010)

21

T HE R OAD TO THE F UTURE I S B UMPY

Competing Corporate Interests Internet Explorer is not the only browser slowing adoption of HTML5 and CSS3. Google, Apple, and the Mozilla Foundation have their own agendas as well, and they’re battling it out for supremacy. They’re arguing over video and audio codec support, and they’re including their opinions in their browser releases. For example, Safari will play MP3 audio with the audio element, but ogg files won’t work. Firefox, however, supports ogg files instead of mp3 files. Eventually these differences will be resolved. In the meantime, we can make smart choices about what we support either by limiting what we implement to the browsers used by our target audiences or by implementing things multiple times, once for each browser until the standards are finalized. It’s not as painful as it sounds. We’ll discuss this more in Chapter 7, Embedding Audio and Video, on page 127.

HTML5 and CSS3 Are Still Works in Progress They’re not final specifications, and that means anything in those specifications could change. While Firefox, Chrome, and Safari have strong HTML5 support, if the specification changes, the browsers will change with it, and this could lead to some deprecated, broken websites. During the course of writing this book, CSS3 box shadows have been removed and re-added to the specification, and the Web Sockets protocol has been modified, breaking client-server communications entirely. If you follow the progress of HTML5 and CSS3 and stay up-to-date with what’s happening, you’ll be fine. A good portion of the things we’ll be discussing in this book are going to work for a long time. When you come across something that doesn’t work in one of your target browsers, you just fill in the gaps as you go, using JavaScript and Flash as your putty. You’ll build solid solutions that work for all our users, and as time goes on, you’ll be able to remove the JavaScript and other fallback solutions without changing your implementations. But before you think too much about the future, let’s start working with HTML5. There are a bunch of new structural tags waiting to meet you over in the next chapter. So, let’s not keep them waiting, shall we?

Report erratum this copy is (P1.0 printing, December 2010)

22

Part I

Improving User Interfaces

Chapter 2

New Structural Tags and Attributes In the first few chapters of this book, we’ll talk about how we can use HTML5’s and CSS’s features to improve the interfaces we present to our users. We’ll see how we can create better forms, easily style tables, and improve the accessibility of our pages for assistive devices. We’ll also see how we can use content generation to improve the usability of our print style sheets, and we’ll explore in-place editing with the new contenteditable attribute. First, though, let’s take a look at how HTML5’s new elements can help us structure our pages better. I’d like to talk to you about a serious problem affecting many web developers today. Divitis—a chronic syndrome that causes web developers to wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer—is rampant. It’s also highly contagious. Developers pass Divitis to each other extremely quickly, and since divs are invisible to the naked eye, even mild cases of Divitis may go unnoticed for years. Here’s a common symptom of Divitis:

C HAPTER 2. N EW S TRUCTURAL T AGS AND A TTRIBUTES

Here we have an unordered list, which is already a block element,1 wrapped with two div tags that are also block elements. The id attributes on these wrapper elements tell us what they do, but you can remove at least one of these wrappers to get the same result. Overuse of markup leads to bloat and pages that are difficult to style and maintain. There is hope, though. The HTML5 specification provides a cure in the form of new semantic tags that describe the content they contain. Because so many developers have made sidebars, headers, footers, and sections in their designs, the HTML5 specification introduces new tags specifically designed to divide a page into logical regions. Let’s put those new elements to work. Together with HTML5, we can help wipe out Divitis in our lifetime. In addition to these new structural tags, we’ll also talk about the meter element and discuss how we can use the new custom attributes feature in HTML5 so we can embed data into our elements instead of hijacking classes or existing attributes. In a nutshell, we’re going to find out how to use the right tag for the right job. In this chapter, we’ll explore these new elements and features:2

Defines a header region of a page or section. [C5, F3.6, IE8, S4, O10]