The Modern Web
Multi-Device Web Development with HTML5, CSS3, and JavaScript
Peter Gasston
Published by No Starch Press
Advance Praise for The Modern Web
This is a useful book, and its an important book. If you follow Peter Gasstons advice, then test your sites across all browsers and on a variety of devices, youll impress your bosses and please your users. Youll also be making the Web better and keeping it open.
BRUCE LAWSON, AUTHOR OF INTRODUCING HTML5
Peter Gasston has now done for the modern web platform what he already did for CSS: write a consult-it-first compendium of information for web developers of practically any skill level.
STEPHEN HAY, AUTHOR OF RESPONSIVE DESIGN WORKFLOW
Peter Gasston strikes a great balance between producing fantastic real-world code and staying right on top of the latest developments in web technology. He has a considerable gift for explaining difficult technical topics in a lucid and entertaining manner.
CHRIS MILLS, DEVELOPER RELATIONS MANAGER, OPERA SOFTWARE AND AUTHOR OF PRACTICAL CSS3
Praise for Peter Gasstons The Book of CSS3
I can honestly say I will never need another book on this subject, and I doubt anyone else will either. The Book of CSS3 covers it all and covers it well.
DEVON YOUNG, CSS3.INFO
One of the best technology books Ive read.
CRAIG BUCKLER, OPTIMALWORKS WEB DESIGN
This book deserves a place within easy reach of the developers keyboard and is a must have for anyone looking to join the visual revolution that CSS3 is bringing to the Web.
C.W. GROTOPHORST, CHOICE MAGAZINE
There are a lot of neat things that you can do in CSS3, and this book is a great introduction to these features.
STEVEN MANDEL, .NET DEVELOPERS JOURNAL
An easy-to-read, easy-to-implement handbook of the newest additions to the Cascading Style Sheet specification.
MIKE RILEY, DR. DOBBS JOURNAL
For Dave, Jim, Morena, Nick, Rupert, Steve, and all of the other organizers of the London Web Standards group, who help to keep the London scene active and gave me my first opportunity in public speaking.
About the Author
Peter Gasston has been a web developer for over 12 years in both agency and corporate settings. He was one of the original contributors to CSS3.info, the leading online destination for CSS3. Gasston is the author of The Book of CSS3 (No Starch Press) and has been published in Smashing Magazine , A List Apart , and .net magazine . He gives talks about technologies at developer conferences and runs the web development blog Broken Links ( http://broken-links.com/ ). Gasston lives in London, England.
About the Technical Reviewer
David Storey is an HTML5 evangelist at Plain Concepts, a founding member of the IE userAgents program, and a CSS Working Group member. Prior to this, he was the developer advocate manager on a top-secret skunk works project at Motorola. He also founded the developer relations team at Opera, product managed Opera Dragonfly, and worked at CERN, home of the World Wide Web. His passion is keeping the Web open for all.
Acknowledgments
Huge thanks are due to David Storey, the technical reviewer for this book; his deep knowledge of the field meant his feedback was invaluable to me. Although he corrected and guided me many times, if there are any errors in this book theyre entirely my responsibility.
Keith Fancher, Serena Yang, Bill Pollock, and the rest of the No Starch Press team provided fantastic support and guidance throughout the writing of this book. Their collective contribution is beyond measure.
Dimitri Glazkov helpfully answered a few questions on web components, and Bruce Lawson gave extra feedback on the new HTML5 elements in . His work as well as that of his fellow HTML5 Doctors was a constant reference during the writing of this book.
Although Ive never met him, Id like to thank David Walsh for maintaining an excellent website that I have used a lot.
Stephen Hay and Chris Mills have been generally useful in helping me to consolidate ideas, as well as incredibly nice people to know.
Great thanks to my friends and occasional colleagues Giles McCartney, Richard Locke, and Tom Shirley. Thanks also to all my other colleagues at Preloaded, Poke, Top10, Believe.in, and rehabstudio.
As always the biggest thanks must go to my wife, Ana, for her patience and support during the time I spent writing this book.
Introduction
We are in a time of unprecedented innovation on the Web. Not too long ago, one company, Microsoft, dominated the web landscape; in 2003, Internet Explorer was used on some 95 percent of computers worldwide. This domination brought the advantage of a stable market for developers, but there was also a serious drawback: Microsoft chose to end nonessential work on IE, and innovation on the Web stagnateda consequence of a lack of competition and a closed environment.
Things could not be more different now. There are some four or five key browser vendors, about the same number of major operating systems, and more parties are getting involved all the time. Adobe has switched its focus from Flash and apps to the open web, and technology companies like Samsung and Nintendo are joining key players such as Google, Apple, and Microsoft in shaping the future of the Web and the way we build for it.
And the way we access the Web has changed enormously toothink devices. No longer are we limited to browsing the Web with a desktop or laptop. So many categories of devices exist nowincluding smartphones, tablets, and games consolesthat Im running out of fingers to count them on.
This book is about front-end web development in this new web-everywhere era. Its about learning methods to make first-class websites, apps, or anything built on open web technologies, with the multi-device world aforethought. This is not a book about how to make mobile websites or smart TV apps; its about learning the latest developments in current and near-future web technologies so youll be better able to build sites capable of offering the best experience everywhere.
Ill return to what youll learn from this book in more detail at the end of the introduction, but first I want to talk about the bewildering array of todays web-enabled devices.
The Device Landscape
The year 2008 was a landmark year and not only because of the theatrical release of Indiana Jones and the Kingdom of the Crystal Skull , which introduced the phrase nuking the fridge into our vernacular. This was the year that saw the number of Internet-connected devices exceed the number of people using them. This super-connectivity between devices is commonly known as the Internet of Things ( IoT ), and this book is aimed at an already substantial and fast-growing subset of those things, namely things with web browsers.
The range of web-enabled devices is enormous and getting broader by the day. As I write this, Im the owner of the following devices that have a web browser: a desktop, a laptop, a tablet, a smartphone, an ebook reader, and a games console. I suspect thats not an uncommon scenario to more affluent members of society; many people could add a smart TV and a portable games console to that list.
Of course, with this incredible range of web-enabled devices comes incredible opportunity for web developers, and this book is here to help you make the most of that. But first, lets look at some of the core device categories and define some key terms so youll better understand what youre dealing with.