A Perfect Summer's Day

It was a lovely day for a walk in the park. The birds were singing and the kids were all back at school.

If the code is to be found in the book’s code archive, the name of the file will appear at the top of the program listing, like this: example.css .footer { background-color: #CCC; border-top: 1px solid #333; } If only part of the file is displayed, this is indicated by the word excerpt: example.css (excerpt) border-top: 1px solid #333; If additional code is to be inserted into an existing example, the new code will be displayed in bold: function animate() { new_variable = "Hello"; } xxx Where existing code is required for context, rather than repeat all the code, a vertical ellipsis will be displayed: function animate() { ⋮ return new_variable; } Some lines of code are intended to be entered on one line, but we’ve had to wrap them because of page constraints. A ➥ indicates a line break that exists for formatting purposes only, and should be ignored: URL.open("http://www.sitepoint.com/blogs/2007/05/28/user-style-she ➥ets-come-of-age/"); Tips, Notes, and Warnings Hey, You! Tips will give you helpful little pointers. Ahem, Excuse Me … Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information. Make Sure You Always … … pay attention to these important points. Watch Out! Warnings will highlight any gotchas that are likely to trip you up along the way. xxxi Chapter1 Introducing HTML5 and CSS3 This chapter gives a basic overview of how we arrived where we are today, why HTML5 and CSS3 are so important to modern websites and web apps, and how using these technologies will be invaluable to your future as a web professional. Of course, if you’d prefer to just get into the meat of the project that we’ll be building, and start learning how to use all the new bells and whistles that HTML5 and CSS3 bring to the table, you can always skip ahead to Chapter 2 and come back later. What is HTML5? What we understand today as HTML5 has had a relatively turbulent history. You probably already know that HTML is the predominant markup language used to describe content, or data, on the World Wide Web. HTML5 is the latest iteration of that markup language, and includes new features, improvements to existing features, and scripting-based APIs. That said, HTML5 is not a reformulation of previous versions of the language—it includes all valid elements from both HTML4 and XHTML 1.0. Furthermore, it’s been designed with some primary principles in mind to ensure it works on just about every platform, is compatible with older browsers, and handles errors grace- fully. A summary of the design principles that guided the creation of HTML5 can be found on the W3C’s HTML Design Principles page1. First and foremost, HTML5 includes redefinitions of existing markup elements, and new elements that allow web designers to be more expressive in the semantics of their markup. Why litter your page with divs when you can have articles, sections, headers, footers, and more? The term “HTML5” has additionally been used to refer to a number of other new technologies and APIs. Some of these include drawing with the element, offline storage, the new and elements, drag-and-drop functionality, Microdata, embedded fonts, and others. In this book, we’ll be covering a number of those technologies, and more. What’s an API? API stands for Application Programming Interface. Think of an API the same way you think of a graphical user interface—except that instead of being an interface for humans, it’s an interface for your code. An API provides your code with a set of “buttons” (predefined methods) that it can press to elicit the desired behavior from the system, software library, or browser. API-based commands are a way of abstracting the more complex stuff that’s done in the background (or sometimes by third-party software). Some of the HTML5- related APIs will be introduced and discussed in later sections of this book. Overall, you shouldn’t be intimidated if you’ve had little experience with JavaScript or any scripting-related APIs. While it would certainly be beneficial to have some experience with JavaScript, it isn’t mandatory. Whatever the case, we’ll walk you through the scripting parts of our book gradually, to ensure you’re not left scratching your head! It should also be noted that some of the technologies that were once part of HTML5 have been separated from the specification, so technically, they no longer fall under the “HTML5” umbrella. Certain other technologies were never part of HTML5, yet have at times been lumped in under the same label. This has instigated the use of 1 http://www.w3.org/TR/html-design-principles/ HTML5 & CSS3 for the Real World2 broad, all-encompassing expressions such as “HTML5 and related technologies.” Bruce Lawson even half-jokingly proposed the term “NEWT” (New Exciting Web Technologies)2 as an alternative. However, in the interest of brevity—and also at the risk of inciting heated argu- ments—we’ll generally refer to these technologies collectively as “HTML5.” How did we get here? The web design industry has evolved in a relatively short time period. Twelve years ago, a website that included images and an eye-catching design was considered “top of the line” in terms of web content. Now, the landscape is quite different. Simple, performance-driven, Ajax-based web apps that rely on client-side scripting for critical functionality are becoming more and more common. Websites today often resemble standalone software applications, and an increasing number of developers are viewing them as such. Along the way, web markup evolved. HTML4 eventually gave way to XHTML, which is really just HTML 4 with strict XML-style syntax. Currently, both HTML 4 and XHTML are in general use, but HTML5 is gaining headway. HTML5 originally began as two different specifications: Web Forms 2.0 and Web Apps 1.0. Both were a result of the changed web landscape, and the need for faster, more efficient, maintainable web applications. Forms and app-like functionality are at the heart of web apps, so this was the natural direction for the HTML5 spec to take. Eventually, the two specs were merged to form what we now call HTML5. During the time that HTML5 was in development, so was XHTML 2.0. That project has since been abandoned to allow focus on HTML5. Would the real HTML5 spec please stand up? Because the HTML5 specification is being developed by two different bodies (the WHATWG and the W3C), there are two different versions of the spec. The W3C (or World Wide Web Consortium) you’re probably familiar with: it’s the organization that maintains the original HTML and CSS specifications, as well as a host of other 2 http://www.brucelawson.co.uk/2010/meet-newt-new-exciting-web-technologies/ 3Introducing HTML5 and CSS3 web-related standards, such as SVG (scalable vector graphics) and WCAG (web content accessibility guidelines.) The WHATWG (aka the Web Hypertext Application Technology Working Group), on the other hand, might be new to you. It was formed by a group of people from Apple, Mozilla, and Opera after a 2004 W3C meeting left them disheartened. They felt that the W3C was ignoring the needs of browser makers and users by focusing on XHTML 2.0, instead of working on a backwards-compatible HTML standard. So they went off on their own and developed the Web Apps and Web Forms specifica- tions discussed above, which were then merged into a spec they called HTML5. On seeing this, the W3C eventually gave in and created its own HTML5 specification based on the WHATWG’s spec. This can seem a little confusing. Yes, there are some politics behind the scenes that we, as designers and developers, have no control over. But should it worry us that there are two versions of the spec? In short, no. The WHATWG’s version of the specification can be found at http://www.whatwg.org/html/, and has recently been renamed “HTML” (dropping the “5”). It’s now called a “living standard,” meaning that it will be in constant de- velopment and will no longer be referred to using incrementing version numbers.3 The WHATWG version contains information covering HTML-only features, including what’s new in HTML5. Additionally, there are separate specifications being de- veloped by the WHATWG that cover the related technologies. These specifications include Microdata, Canvas 2D Context, Web Workers, Web Storage, and others.4 The W3C’s version of the spec can be found at http://dev.w3.org/html5/spec/, and the separate specifications for the other technologies can be accessed through http://dev.w3.org/html5/. So what’s the difference between the W3C spec and that of WHATWG? Briefly, the WHATWG version is a little more informal and experimental (and, some might argue, more forward-thinking). But overall, they’re very similar, so either one can be used as a basis for studying new HTML5 elements and related technologies. 3 See http://blog.whatwg.org/html-is-the-new-html5/ for an explanation of this change. 4 For details, see http://wiki.whatwg.org/wiki/FAQ#What_are_the_various_versions_of_the_spec.3F. HTML5 & CSS3 for the Real World4 Why should I care about HTML5? As mentioned, at the core of HTML5 are a number of new semantic elements, as well as several related technologies and APIs. These additions and changes to the language have been introduced with the goal of web pages being easier to code, use, and access. These new semantic elements, along with other standards like WAI-ARIA and Mi- crodata (which we cover in Appendix B and Appendix C respectively), help make our documents more accessible to both humans and machines—resulting in benefits for both accessibility and search engine optimization. The semantic elements, in particular, have been designed with the dynamic web in mind, with a particular focus on making pages more modular and portable. We’ll go into more detail on this in later chapters. Finally, the APIs associated with HTML5 help improve on a number of techniques that web developers have been using for years. Many common tasks are now simpli- fied, putting more power in developers’ hands. Furthermore, the introduction of HTML5-based audio and video means there will be less dependence on third-party software and plugins when publishing rich media content on the Web. Overall, there is good reason to start looking into HTML5’s new features and APIs, and we’ll discuss more of those reasons as we go through this book. What is CSS3? Another separate—but no less important—part of creating web pages is Cascading Style Sheets (CSS). As you probably know, CSS is a style language that describes how HTML markup is presented or styled. CSS3 is the latest version of the CSS specification. The term “CSS3” is not just a reference to the new features in CSS, but the third level in the progress of the CSS specification.5 CSS3 contains just about everything that’s included in CSS2.1 (the previous version of the spec). It also adds new features to help developers solve a number of problems without the need for non-semantic markup, complex scripting, or extra images. 5 http://www.w3.org/Style/CSS/current-work.en.html 5Introducing HTML5 and CSS3 New features in CSS3 include support for additional selectors, drop shadows, rounded corners, multiple backgrounds, animation, transparency, and much more. CSS3 is distinct from HTML5. In this publication, we’ll be using the term CSS3 to refer to the third level of the CSS specification, with a particular focus on what’s new in CSS3. Thus, CSS3 is separate from HTML5 and its related APIs. Why should I care about CSS3? Later in this book, we’ll look in greater detail at what’s new in CSS3. In the mean- time, we’ll give you a taste of why CSS3’s new techniques are so exciting to web designers. Some design techniques find their way into almost every project. Drop shadows, gradients, and rounded corners are three good examples. We see them everywhere. When used appropriately, and in harmony with a site’s overall theme and purpose, these enhancements can make a design flourish. Perhaps you’re thinking: we’ve been creating these design elements using CSS for years now. But have we? In the past, in order to create gradients, shadows, and rounded corners, web designers have had to resort to a number of tricky techniques. Sometimes extra HTML elements were required. In cases where the HTML is kept fairly clean, scripting hacks were required. In the case of gradients, the use of extra images was inevitable. We put up with these workarounds, because there was no other way of accomplishing those designs. CSS3 allows you to include these and other design elements in a forward-thinking manner that leads to so many benefits: clean markup that is accessible to humans and machines, maintainable code, fewer extraneous images, and faster loading pages. HTML5 & CSS3 for the Real World6 A Note on Vendor Prefixes In order to use many of the new CSS3 features today, you’ll be required to include quite a few extra lines of code. This is because browser vendors have implemented many of the new features in CSS3 using their own “prefixed” versions of a property. For example, to transform an element in Firefox, you need to use the -moz-transform property; to do the same in WebKit-based browsers such as Safari and Google Chrome, you have to use -webkit-transform. In some cases, you’ll need up to four lines of code for a single CSS property. This can seem to nullify some of the benefits gained from avoiding hacks, images, and nonsemantic markup. But browser vendors have implemented features this way for a good reason: the specifications are yet to be final, and early implementations tend to be buggy. So, for the moment, you provide values to current implementations using the vendor prefixes, and also provide a perennial version of each property using an unprefixed declaration. As the specs become finalized and the implementations refined, browser prefixes will eventually be dropped. Even though it may seem like a lot of work to maintain code with all these prefixes, the benefits of using CSS3 today still outweigh the drawbacks. Despite having to change a number of prefixed properties just to alter one design element, maintain- ing a CSS3-based design is still easier than, say, making changes to background images through a graphics program, or dealing with the drawbacks of extra markup and hacky scripts. And, as we have mentioned, your code is much less likely to become outdated or obsolete. What do we mean by the “real world”? In the real world, we don’t create a website and then move on to the next project while leaving previous work behind. We create web applications and we update them, fine-tune them, test them for potential performance problems, and continually tweak their design, layout, and content. In other words, in the real world, we don’t write code that we have no intention of revisiting. We write code using the most reliable, maintainable, and effective methods available, with every intention of returning to work on that code again to make any necessary improvements or alterations. This is evident not only in websites and web apps that we build and maintain on our own, but also in those we create and maintain for our clients. 7Introducing HTML5 and CSS3 We need to continually search out new and better ways to write our code. HTML5 and CSS3 are a big step in that direction. The Varied Browser Market Although HTML5 is still in development, and does present significant changes in the way content is marked up, it’s worth noting that those changes won’t cause older browsers to choke, or result in layout problems or page errors. What this means is that you could take any of your current projects containing valid HTML4 or XHTML markup, change the doctype to HTML5 (which we’ll cover in Chapter 2), and the page will still validate and appear the same as it did before. The changes and additions in HTML5 have been implemented into the language in such a way so as to ensure backwards compatibility with older browsers—even IE6! But that’s just the markup. What about all the other features of HTML5, CSS3, and related technologies? According to one set of statistics,6 about 47% of users are on a version of Internet Explorer that has no support for most of these new features. As a result, developers have come up with various solutions to provide the equivalent experience to those users, all while embracing the exciting new possibilities offered by HTML5 and CSS3. Sometimes this is as simple as providing fallback content, like a Flash video player to browsers without native video support. At other times, though, it’s been necessary to use scripting to mimic support for new features. These “gap-filling” techniques are referred to as polyfills. Relying on scripts to emulate native features isn’t always the best approach when building high-performance web apps, but it’s a necessary growing pain as we evolve to include new enhancements and features, such as the ones we’ll be discussing in this book. So, while we’ll be recommending fallback options and polyfills to plug the gaps in browser incompatibilities, we’ll also try to do our best in warning you of potential drawbacks and pitfalls associated with using these options. Of course, it’s worth noting that sometimes no fallbacks or polyfills are required at all: for example, when using CSS3 to create rounded corners on boxes in your design, there’s often no harm in users of older browsers seeing square boxes instead. The 6 http://gs.statcounter.com/#browser_version-ww-monthly-201011-201101-bar HTML5 & CSS3 for the Real World8 functionality of the site isn’t degraded, and those users will be none the wiser about what they’re missing. With all this talk of limited browser support, you might be feeling discouraged. Don’t be! The good news is that more than 40% of worldwide users are on a browser that does offer support for a lot of the new stuff we’ll discuss in this book. And this support is growing all the time, with new browser versions (such as Internet Explorer 9) continuing to add support for many of these new features and technologies. As we progress through the lessons, we’ll be sure to inform you where support is lacking, so you’ll know how much of what you create will be visible to your audience in all its HTML5 and CSS3 glory. We’ll also discuss ways you can ensure that nonsupporting browsers have an acceptable experience, even without all the bells and whistles that come with HTML5 and CSS3. The Growing Mobile Market Another compelling reason to start learning and using HTML5 and CSS3 today is the exploding mobile market. According to StatCounter, in 2009, just over 1% of all web usage was mobile.7 In less than two years, that number has quadrupled to over 4%.8 Some reports have those numbers even higher, depending on the kind of analysis being done. Whatever the case, it’s clear that the mobile market is growing at an amazing rate. 4% of total usage may seem small, and in all fairness, it is. But it’s the growth rate that makes that number so significant—400% in two years! So what does this mean for those learning HTML5 and CSS3? HTML5, CSS3, and related cutting-edge technologies are very well supported in many mobile web browsers. For example, mobile Safari on iOS devices like the iPhone and iPad, Opera Mini and Opera Mobile, as well as the Android operating system’s web browser all provide strong levels of HTML5 and CSS3 support. New features and technologies supported by some of those browsers include CSS3 colors and opacity, the Canvas API, Web Storage, SVG, CSS3 rounded corners, Offline Web Apps, and more. 7 http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200901-200912-bar 8 http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201011-201101-bar 9Introducing HTML5 and CSS3 In fact, some of the new technologies we’ll be introducing in this book have been specifically designed with mobile devices in mind. Technologies like Offline Web Apps and Web Storage have been designed, in part, because of the growing number of people accessing web pages with mobile devices. Such devices can often have limitations with online data usage, and thus benefit greatly from the ability to access web applications offline. We’ll be touching on those subjects in Chapter 10, as well as others throughout the course of the book that will provide the tools you need to create web pages for a variety of devices and platforms. On to the Real Stuff It’s unrealistic to push ahead into new technologies and expect to author pages and apps for only one level of browser. In the real world, and in a world where we desire HTML5 and CSS3 to make further inroads, we need to be prepared to develop pages that work across a varied landscape. That landscape includes modern browsers, older versions of Internet Explorer, and an exploding market of mobile devices. Yes, in some ways, supplying a different set of instructions for different user agents resembles the early days of the Web with its messy browser sniffing and code forking. But this time around, the new code is future-proof, so that when the older browsers fall out of general use, all you need to do is remove the fallbacks and polyfills, leaving only the code base that’s aimed at modern browsers. HTML5 and CSS3 are the leading technologies ushering in a much more exciting world of web page authoring. Because all modern browsers (including IE9) provide significant levels of support for a number of HTML5 and CSS3 features, creating powerful, easy-to-maintain, future-proof web pages is more accessible to web de- velopers than ever before. As the market share of older browsers declines, the skills you gain today in under- standing HTML5 and CSS3 will become that much more valuable. By learning these technologies today, you’re preparing for a bright future in web design. So, enough about the “why,” let’s start digging into the “how”! HTML5 & CSS3 for the Real World10 Chapter2 Markup, HTML5 Style Now that we’ve given you a bit of a history primer, along with some compelling reasons to learn HTML5 and start using it in your projects today, it’s time to intro- duce you to the sample site that we’ll be progressively building in this book. After we briefly cover what we’ll be building, we’ll discuss some HTML5 syntax basics, along with some suggestions for best practice coding. We’ll follow that with some important info on cross-browser compatibility, and the basics of page structure in HTML5. Lastly, we’ll introduce some specific HTML5 elements and see how they’ll fit into our layout. So let’s get into it! Introducing The HTML5 Herald For the purpose of this book, we’ve put together a sample website project that we’ll be building from scratch. The website is already built—check it out now at http://thehtml5herald.com/. It’s an old-time newspaper-style website called The HTML5 Herald. The home page of the site contains some media in the form of video, images, articles, and advertise- ments. There’s also another page comprising a registration form. Go ahead and view the source, and try some of the functionality if you like. As we proceed through the book, we’ll be working through the code that went into making the site. We’ll avoid discussing every detail of the CSS involved, as most of it should already be familiar to you: float layouts, absolute and relative positioning, basic font styling, and the like. We’ll primarily focus on the new HTML5 elements, along with the APIs, plus all the new CSS3 techniques being used to add styles and inter- activity to the various elements. Figure 2.1 shows a bit of what the finished product looks like. Figure 2.1. The front page of The HTML5 Herald While we build the site, we’ll do our best to explain the new HTML5 elements, APIs, and CSS3 features, and we’ll try to recommend some best practices. Of course, many of these technologies are still new and in development, so we’ll try not to be too dogmatic about what you can and can’t do. HTML5 & CSS3 for the Real World12 A Basic HTML5 Template As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself a blueprint, or boilerplate, from which you can begin all your HTML5-based projects. In fact, you’ve probably already done something sim- ilar for your existing XHTML or HTML 4.0 projects. We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.1 In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to include every new element or technique, so we’ll also explain some new features that don’t fit into the project. This way, you’ll be familiar with a wide set of options when deciding how to build your HTML5 and CSS3 websites and web apps, so you’ll be able to use this book as a quick reference for a number of techniques. Let’s start simple, with a bare-bones HTML5 page: index.html (excerpt) The HTML5 Herald 1 A few you might want to look into can be found at http://www.html5boilerplate.com/ and http://html5reset.org/. 13Markup, HTML5 Style Look closely at the above markup. If you’re making the transition to HTML5 from XHTML or HTML 4, then you’ll immediately notice quite a few areas in which HTML5 differs. The Doctype First, we have the Document Type Declaration, or doctype. This is simply a way to tell the browser—or any other parsers—what type of document they’re looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of all your HTML files. In the past, the doctype declaration was an ugly and hard-to-remember mess. For XHTML 1.0 Strict: And for HTML4 Transitional: Over the years, code editing software began to provide HTML templates with the doctype already included, or else they offered a way to automatically insert one. And naturally, a quick web search will easily bring up the code to insert whatever doctype you require. Although having that long string of text at the top of our documents hasn’t really hurt us (other than forcing our sites’ viewers to download a few extra bytes), HTML5 has done away with that indecipherable eyesore. Now all you need is this: Simple, and to the point. You’ll notice that the “5” is conspicuously missing from the declaration. Although the current iteration of web markup is known as “HTML5,” it really is just an evolution of previous HTML standards—and future specifications HTML5 & CSS3 for the Real World14 will simply be a development of what we have today. Because browsers have to support all existing content on the Web, there’s no reliance on the doctype to tell them which features should be supported in a given document. The html Element Next up in any HTML document is the html element, which has not changed signi- ficantly with HTML5. In our example, we’ve included the lang attribute with a value of en, which specifies that the document is in English. In XHTML-based syntax, you’d be required to include an xmlns attribute. In HTML5, this is no longer needed, and even the lang attribute is unnecessary for the document to validate or function correctly. So here’s what we have so far, including the closing