HTML5 and CSS3, Second Edition
Level Up with Todays Web Technologies
by Brian P. Hogan
Version: P1.0 (October 2013)
Copyright 2013 The Pragmatic Programmers, LLC. This book is licensed tothe individual who purchased it. We don't copy-protect itbecause that would limit your ability to use it for yourown purposes. Please don't break this trustyou can use this across all of your devices but please do not share this copywith other members of your team, with friends, or via file sharing services. Thanks.
Dave & Andy.
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://pragprog.com.
Table of Contents
Copyright 2013, The Pragmatic Bookshelf.
Early praise for HTML5 and CSS3, Second Edition
In an industry where staying employable means staying current, this book is an essential read and an efficient reference for web designers and developers. This book does not belong on your bookshelf. It belongs on your desk.
Matt Margolis |
Manager, application development, Getty Images |
The whole book feels like a well-stocked toolbox. Its accessible, well-presented, and packed with information. Brian is a confident expert and a masterful educator.
Tibor Simic |
Developer, Inge-mark |
Ive been making websites for more than ten years, and I still learned a few tricks from reading this book. If you havent yet taken advantage of the new features available in HTML5, now is the time. Brians book will explain what you can and should use, and when.
Stephen Orr |
Lead developer, Made Media |
Acknowledgments
Second editions are supposed to be quickjust a chance to correct mistakes or make improvements and updates to the first edition. This, though, was almost like writing a new book, and there are so many people I need to thank who made my work much easier.
First, I want to thank you for reading this book. I hope it helps you tackle some cool and interesting projects of your own when youre done.
Next, the wonderful gang at The Pragmatic Bookshelf deserves not only my gratitude, but also a lot of the credit for this book. Susannah Pfalzer once again ensured that one of my books makes sense. Shes an awesome development editor and Im thankful for her time and attention to detail, especially on a book like this, where thousands of little details need attention. Dave Thomas and Andy Hunt had great feedback, and Im grateful for their continued support. Thank you, all.
I was fortunate to have an absolutely amazing group of technical reviewers on this book. The comments and feedback were excellent, exhaustive, and full of great suggestions for improvement. Thank you to Cheyenne Clark, Joel Clermont, Jon Cooley, Chad Dumler-Montplaisir, Jeff Holland, Michael Hunter, Karoline Klever, Stephen Orr, Dan Reedy, Loren Sands-Ramshaw, Brian Schau, Matthew John Sias, Tibor Simic, Charley Stran, and Colin Yates, for all of your help. Not only were your reviews thorough, but they also offered great advice and insight, and impacted the final version of this book considerably.
Thanks to Jessica Janiuk for providing the screenshots for Android devices.
Thanks to my business associates Chris Warren, Chris Johnson, Mike Weber, Nick LaMuro, Austen Ott, Erich Tesky, Kevin Gisi, and Jon Kinney for their ongoing support.
Finally, my wife Carissa works really hard to make sure that I can work really hard. Shes a silent partner in this and Im eternally grateful for her love and support. Thank you, Carissa, for everything you do.
Copyright 2013, The Pragmatic Bookshelf.
Preface
To a web developer, three months on the Web is like a year in real time. And that means its been twelve web years since the last edition of this book.
We web developers are always hearing about something new. A few years ago HTML5 and CSS3 seemed so far off, but companies are using these technologies in their work today because browsers like Chrome, Safari, Firefox, Opera, and Internet Explorer are implementing pieces of the specifications.
HTML5 and CSS3 help lay the groundwork for solid, interactive web applications. They let us build sites that are simpler to develop, easier to maintain, and more user-friendly. HTML5 has elements for defining site structure and embedding content, which means we dont have to resort to extra attributes, 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. Better accessibility support will improve dynamic JavaScript client-side applications for people with disabilities, and offline support lets us start building working applications that dont need an Internet connection.
In this book, well get hands-on with HTML5 and CSS3 so you can see how to use them in your projects, even if your users dont have browsers that can support all of these features yet. Before we get started, lets take a second to 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 application programming interfaces (APIs), but its 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 and customers. In some cases, pieces 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 Create the site in HTML5.
For the majority of the book, well focus on the HTML5 and CSS3 specifications themselves and how you can use the techniques they describe on all the common web browsers. In the last part of the book, well look into a suite of closely related specifications associated with HTML5 that are in use right now on multiple platforms, such as Geolocation and Web Sockets. Although these technologies arent technically HTML5, they can help you build incredible things when combined with HTML5 and CSS3.
Whats in This Book
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 list summarizing the tags, features, or concepts covered in the chapter. The main content of each chapter is broken 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. Youll find some chapters that specifically focus on CSS3, and youll find CSS3 goodness sprinkled throughout other chapters.