1249 Eighth Street, Berkeley, California 94710
An Imprint of Pearson Education
John Allsopp
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
510/524-2221 (fax)
Find us on the Web at: www.newriders.com
To report errors, please send a note to [email protected]
New Riders is an imprint of Peachpit, a division of Pearson Education
Copyright © 2010 by John Allsopp
Project Editor: Michael J. Nolan
Development Editor: Erin Kissane
Production Editor: Rebecca Winter
Copyeditor: Rose Weisburd
Proofreader: Darren Meiss
Indexer: Rebecca Plunkett
Cover designer: Aren Howell & Mimi Heft
Compositor: Danielle Foster
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on getting permission for reprints and excerpts, contact [email protected].
Notice of Liability
The information in this book is distributed on an “As Is” basis without warranty. While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it.
Trademarks
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 Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark. All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book.
ISBN 13: 978-0-321-64692-7
ISBN 10: 0-321-64692-4
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
Developing with Web Standards is dedicated to
Scarlett Bess, and to the one not quite yet here, whom we’ll know soon enough.
Not only I, but all of us who work with the web, owe Jeffrey Zeldman a huge debt of gratitude for his groundbreaking book, Designing with Web Standards, and his tireless efforts to improve the web for developers, designers, and all its users. Over the last several months, I’ve had many sleepless moments in which I wanted to curse Jeffrey for having suggested that I write this companion to Designing with Web Standards but in truth it was very humbling to be asked to write this book, and I hope I have at least gone some way to living up to his recommendation.
To Erin Kissane—who has worked tirelessly and put up with an erratic schedule caused in equal measure by my far too many commitments and a sequence of personal challenges that were almost comic in their number, though serious in nature—thank you. All’s well that ends well.
To Brian Suda, who from his fortress in Iceland has been the technical editor of both of my books—and whom I’ve yet to meet in person—many thanks for spotting my myriad inaccuracies and suggesting many an improvement.
To Sharon Lee, thank you for very generously giving of your expertise to provide this book’s beautiful illustrations. They are a vast improvement over anything I might have managed, and their presence has saved our readers’ eyes from the crimes against color and form I might have committed in their absence.
To Michael Nolan, who commissioned the book, I hope that it will repay your faith, and that the hair you’ve torn out over the months of development will grow back.
To the editorial and production crew at New Riders, who spent sleepless nights dealing with page overruns and myriad other causes of frustration, thanks for your professionalism and diligence.
To our editorial interns, Henry Li and Nicole Ramsey, who crunched through a larger number of Word files and import glitches than anyone should have to deal with, and who did it all cheerfully and at high speed, thank you.
To the countless web designers and developers, who share their experience and expertise via blogs, meetups, presentations, articles, and more, thanks for making the web a wonderful place, and a great industry to be in. This is a remarkable profession filled with extraordinary generosity—one I feel genuinely privileged to participate in.
I could easily fill a book naming the contributors to our knowledge and still leave many out. Quite a few are named throughout the book, but many more aren’t: thank you to all of you.
And by no means least, to my wife Sara and darling girls ZK and Scarlie, thanks for putting up with yet one more “Daddy’s got to finish his book.” It’s finished now, so hopefully we’ll have a bit more time to play.
John Allsopp had been working with, on, for, and against the web since the first half of the 1990s. He’s a co-founder of westciv.com and developer of Style Master, the web world’s most venerable cross-platform CSS development tool. He’s also the author of numerous courses, tutorials, tools, resources, and articles for web designers and developers, including the influential A List Apart article “The Dao of Web Design.”
John is the co-founder of the web conference series Web Directions (webdirections.org), which is held in Australia, North America, Japan, and the UK. Most recently of all, John co-founded Scroll Magazine (scrollmagazine.com), a print, PDF, and online magazine that explores the big ideas around designing and developing for the web. He is the co-chair of a new W3C Incubator Group that focuses on educating the next generation of web professionals (www.w3.org/2005/Incubator/owea).
John is the father of two darling daughters, who are the light of his life, with another child on the way. In his copious spare time, he does as much mountain biking, surfing, and snowboarding as all these other activities allow, which is to say, very little.
John’s personal site is johnfallsopp.com. Follow him on Twitter, @johnallsopp.
Brian Suda is an informatician currently residing in Reykjavík, Iceland. He has spent a good portion of each day connected to Internet after discovering it back in the mid-1990s. Most recently, he has been focusing more on the mobile space and future predictions: how smaller devices will augment our every day life and what that means to the way we live, work and are entertained.
Brian is the author of Using Microformats (O’Reilly, 2006) and a stack of articles about microformats, the mobile web, and informatics. He was the technical reviewer for John’s previous book, Microformats: Empowering Your Markup for Web 2.0 (friends of ED, 2007).
His own little patch of Internet can be found at suda.co.uk, where many of his past projects and crazy ideas reside.
The seed was sown when Sharon Lee found a box of recipe cards in an op-shop. Ham in aspic. Prawn stuffed apples. Fricassee of rabbit. Oh, the culinary delights!
Inspired, she created a food-themed website and named it after one of the recipes. Her criteria for design success? When it made her laugh. Word of the website spread, making others laugh too. Prospective clients, even.
“Are you based in Sydney? Are you available for work?”
And so, in 2001, Richapplefool the business began.
Over the years, she developed her philosophy and practice to create more effective work, fusing branding with user experience architecture and design so clients could speak with true conviction. She calls the result Human Experience Design.
Developing with Web Standards has its own community online at devwws.com. Here you can find more resources and addenda, contact John, and much more. Come by and say hi.
What Will I Get from This Book?
What You Won’t Get from This Book
How to Develop for the World Wide Web
It Doesn’t Have to Look the Same in Every Browser
Separation of Content, Presentation, and Behavior
Why “It Works in Browsers” Isn’t Enough
Terminology: Elements, Attributes, Tags and More
Links: The “Hyper” in “Hypertext”
Linking to Resources on the Web
A Short History of Style for the Web
Why Separate Content from Appearance?
Selectors, Declaration Blocks, Declarations, and Properties
Getting Specific: class and id Selectors
Combinators: Descendant and Child Selectors
Specificity of Child and Descendant Selectors
How Wide and Tall Is an Element?
The position Property and Positioning Schemes
Embedding Based on Media Types
Specific Challenges and Techniques
Best Practices in Modern Standards-Based DOM Scripting
Yahoo User Interface Library (YUI)
IE Developer Toolbar for IE 6 and 7
Internet Explorer 8 Developer Toolbar
Firefox Firebug and Web Developer Toolbar
The Business Case for Accessibility
Common Accessibility Problems (and Solutions)
Part II > REAL-WORLD DEVELOPMENT
7 Working With, Around, and Against Browsers
Three Kinds of Browser Shortcomings
Quirks Mode and DOCTYPE Switching
IE 8’s New DOCTYPE Switching Model
The Non-Collapsing Margins Bug
How Does an Element Get Layout?
Fixing (and Triggering) Bugs with hasLayout
Bug Fixing: To Hack or Not To Hack?
Hiding Style Sheets from Older Browsers
When Feature Support Is Missing
Dean Edwards’s IE 7 (and IE 8)
8 Best Practices for Modern Markup
Formatting, Commenting, and Consistency
Using HTML Elements, class and id for More Meaningful Semantics
Electronic Commerce Markup Language (ECML)
Absolute Positioning in Action
Horizontal, Floated Navigation Lists
A Border Around the Navigation List
CSS2.1 Table Layout Properties
For and Against CSS Frameworks
Common Frameworks and Their Uses
Part III > Real-World Development
“Threaded” JavaScript with Web Workers
Location-Aware Web Applications with Geolocation
Headers, Footers, Sections, and other New Structural Elements in HTML5
Video, Audio, and Other Embedded Content in HTML5
Video and Audio Browser Support
IE7 and Earlier Versions of Internet Explorer
Should I Be Using HTML5 Today?
Backward and Forward Compatibility “Solved”?
Structural Pseudo Element Selectors
Semi-Transparent Background Images
What Are Media Queries Good For?
But Is This Really Any Better Than User-Agent Sniffing?
A Brief History of Font Linking and Embedding
The Current Technical Situation
@font-face and Embedding Fonts
Embedding Fonts with Internet Explorer
Linking Fonts with Other Browsers