Developing with Web Standards

John Allsopp

image

1249 Eighth Street, Berkeley, California 94710
An Imprint of Pearson Education

Developing with Web Standards

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.

Thank You

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.

About John Allsopp, Author

image

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.

About Brian Suda, Technical Editor

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.

About Sharon Lee, Illustrator

image

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.

The Developing with Web Standards Site

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.

Table of Contents

Part I > Foundations

1 Before You Begin

Who Is This Book For?

So Who Isn’t This Book For?

What Will I Get from This Book?

What You Won’t Get from This Book

How to Use This Book

Joining the Community

Next Up

2 Philosophies and Techniques

The Browser Wars

The Dawn of Standards

Web Standards Today

Why Should I Care?

How to Develop for the World Wide Web

It Doesn’t Have to Look the Same in Every Browser

Progressive Enhancement

Separation of Content, Presentation, and Behavior

Once More, with Meaning

For My Next Trick

3 Markup

Why “It Works in Browsers” Isn’t Enough

HTML and XHTML

Syntax and Semantics

A Very Short History of HTML

HTML 4.01

XHTML 1.0, 1.1, 2.0

HTML5

Key Concepts of HTML

What Is a Web Page?

Terminology: Elements, Attributes, Tags and More

Empty HTML Elements

Document Types

Enter the DOCTYPE

The Structural Basics of HTML

The Root html Element

The head Element

The body Element

Inline Elements

Extending HTML Semantics

class

id

span

Links: The “Hyper” in “Hypertext”

Anchors

Absolute and Relative URLs

Linking to Resources on the Web

Embedded Content

Images

Embedding Images

Multimedia Content

Forms

The form Element

The input Element

The button Element

Menus

Disabling Controls

Labeling Controls

Grouping Controls

Tables

Table Structure

Spanning Columns

Frames and iframes

Characters and Entities

Quality Assurance

Validating Your Markup

Checking Links

HTML Tidy

HTML versus XHTML

Syntax Differences

Serving the Document

Error Handling

Which Should You Use?

4 Presentation

A Short History of Style for the Web

Why Separate Content from Appearance?

What Is CSS?

How Is CSS Used?

Inline Style

Embedded CSS

Linking to External CSS

Basic CSS Syntax

Selectors, Declaration Blocks, Declarations, and Properties

The Basics of Selectors

Type Selectors

Grouping Selectors Together

Basic Properties: Font Styles

color

font-family

font-size

font-weight

font-style

text-decoration

Inheritance

Getting Specific: class and id Selectors

class Selectors

id Selectors

Specificity

Common Text Layout Properties

text-align

line-height

Letter and Word Spacing

text-indent

Combinators: Descendant and Child Selectors

Descendant Selectors

Child Selectors

Chaining

Specificity of Child and Descendant Selectors

Common Background Properties

background-color

background-image

URL Values

background-repeat

background-position

background-attach

CSS3 Background Properties

Shorthand Properties

Dynamic Selectors

Basic Page Layout

Block vs. Inline Elements

The Box Model

width

height

Overflowing Content

margin

border

padding

How Wide and Tall Is an Element?

Advanced Page Layout

float

clear

Positioning

The position Property and Positioning Schemes

Advanced Selectors

Adjacent Sibling Selectors

Attribute Selectors

Display Types

visibility

List Items

More Properties

Printing Properties

User Interface Properties

Selectors

Generated Content

Media Types

Media-Specific CSS

Linking with Media Types

Embedding Based on Media Types

@media

Importing Style Sheets

@import

Quality Assurance

Validating Your CSS

Checking Browser Support

Specific Challenges and Techniques

Styling Forms

Image Replacement

Page Layout

Browser Challenges

Formatting CSS

CSS and Site Performance

5 The DOM

DOM Level 0

Intermediate DOM

Level 1 DOM

Level 2

Level 3

The DOM Tree

Core DOM Objects and Methods

Window

Document

Element

Events

Event Listeners

Event Propagation

Best Practices in Modern Standards-Based DOM Scripting

Unobtrusive Scripting

Browser Incompatibilities

innerHTML vs. DOM methods

Security

The Rise of the Libraries

Choosing a Library

JQuery

Prototype

Script.aculo.us

Yahoo User Interface Library (YUI)

Inspecting the DOM

IE Developer Toolbar for IE 6 and 7

Internet Explorer 8 Developer Toolbar

Firefox Firebug and Web Developer Toolbar

DragonFly for Opera

Safari Web Inspector

Ajax?

The Wrap

6 Accessibility

The Business Case for Accessibility

The Global Legal Framework

Accessibility and the W3C

WCAG 1

WCAG 2

ARIA

Common Accessibility Problems (and Solutions)

Links and Titles

Headings

alt text

Color Contrast

Tables

Forms

The Wrap

Part II > REAL-WORLD DEVELOPMENT

7 Working With, Around, and Against Browsers

Three Kinds of Browser Shortcomings

Browser Modes

Quirks Mode and DOCTYPE Switching

Choosing Standards Mode

IE 8’s New DOCTYPE Switching Model

Common Browser Bugs

The Box-Model Bug

The Doubled Float-Margin Bug

The Non-Collapsing Margins Bug

IE and hasLayout

Deep Within Your Browser

How Does an Element Get Layout?

Fixing (and Triggering) Bugs with hasLayout

Bug Fixing: To Hack or Not To Hack?

Know Your Enemy

Targeting Browsers

Hiding Style Sheets from Older Browsers

When Feature Support Is Missing

Dean Edwards’s IE 7 (and IE 8)

The Wrap

8 Best Practices for Modern Markup

Code Readability

Naming

Formatting, Commenting, and Consistency

Plain Old Semantic HTML

Using HTML Elements, class and id for More Meaningful Semantics

Electronic Commerce Markup Language (ECML)

Markup and SEO

Microformats

The Benefits of Microformats

Microformats in Action

Microformats Tools

Much, Much More

The Wrap

9 CSS-Based Page Layouts

Horizontal Centering

Vertical Centering

CSS Positioning

Positioning Schemes

Positioning Properties

Absolute Positioning in Action

Float-Based Layouts

Horizontal, Floated Navigation Lists

Filling the Box

A Border Around the Navigation List

Floated Multi-Column Layouts

The Footer

The Color Conundrum

Grid Layouts

CSS2.1 Table Layout Properties

The Wrap

10 CSS Resets & Frameworks

CSS Resets

Benefits of CSS Resets

Arguments Against Resets

What Do CSS Resets Look Like?

Common CSS Resets

CSS Frameworks

For and Against CSS Frameworks

Common Frameworks and Their Uses

The Wrap

Part III > Real-World Development

11 HTML5

What is HTML5?

Key Features of HTML5

Error Handling

The canvas Element

Local Storage

“Threaded” JavaScript with Web Workers

Multimedia Support

Location-Aware Web Applications with Geolocation

User-Editable Pages

Differences from HTML4

Declaring a DOCTYPE

Headers, Footers, Sections, and other New Structural Elements in HTML5

An Example HTML5 document

Video, Audio, and Other Embedded Content in HTML5

Video

Audio

Video and Audio Browser Support

Video and Audio Accessibility

HTML5 Support in Browsers

IE7 and Earlier Versions of Internet Explorer

Validating and Serving HTML5

Should I Be Using HTML5 Today?

12 CSS3 and the Future of CSS

CSS Reloaded

Enter CSS3

Backward and Forward Compatibility “Solved”?

Vendor-Specific Extensions

New Selectors

Structural Pseudo Element Selectors

Document Structure

first-child

first-of-type

last-child

nth-child

target

The Wrap

13 New Properties in CSS3

Shadow Effects

text-shadow

box-shadow

border-radius

Compatibility

transparency

background-color: transparent

Semi-Transparent Background Images

opacity

RGBa Colors

Compatibility

Multi-Column Text

Transitions

Specifying a Transition

Other Properties

Border Images

Multiple Background Images

CSS Transforms

Gradients

More, More, More!

14 Targeting Media with CSS

User-Agent Sniffing

Hacks

Media Queries

Using Media Queries

What Are Media Queries Good For?

Compatibility

But Is This Really Any Better Than User-Agent Sniffing?

The Wrap

15 Web Fonts

A Brief History of Font Linking and Embedding

The Current Legal Situation

The Current Technical Situation

@font-face and Embedding Fonts

Embedding Fonts with Internet Explorer

Linking Fonts with Other Browsers

Challenges

Mitigating the Problems

Fonts as a Service

The Wrap

16 SVG and the Canvas: Rich Graphics in the Browser

SVG

Core SVG Concepts and Syntax

The SVG Coordinate System

Benefits of SVG

SVG Use Cases

Including SVG in Web Pages

SVG Browser Support

Serving SVG

Beyond SVG

The HTML5 canvas Element

Using canvas

Adding the canvas Element

Getting a Drawing Context

Drawing with the Context

And More...

canvas Use Cases

The Canvas vs. SVG

The Wrap

Resources

Index

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.54.6