Web standards solution the markup and style handbook

269 Pages·2009·4.772 MB·English

by  Cederholm, Dan;Zeldman, Jeffrey

Web Standards Solutions
The Markup and Style Handbook
Special Edition
Dan Cederholm
Web Standards Solutions: The Markup and
Style Handbook, Special Edition
Copyright © 2009 by Dan Cederholm
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical,
including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the
copyright owner and the publisher.
ISBN-13 (pbk): 978-1-4302-1920-0
ISBN-13 (electronic): 978-1-4302-1921-7
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name,
we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the
trademark.
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone
1-800-SPRINGER, fax [phone], e-mail (cid:107)(cid:110)(cid:96)(cid:97)(cid:110)(cid:111)(cid:41)(cid:106)(cid:117)(cid:60)(cid:111)(cid:108)(cid:110)(cid:101)(cid:106)(cid:99)(cid:97)(cid:110)(cid:41)(cid:111)(cid:94)(cid:105)(cid:42)(cid:95)(cid:107)(cid:105), or visit (cid:115)(cid:115)(cid:115)(cid:42)(cid:111)(cid:108)(cid:110)(cid:101)(cid:106)(cid:99)(cid:97)(cid:110)(cid:107)(cid:106)(cid:104)(cid:101)(cid:106)(cid:97)(cid:42)(cid:95)(cid:107)(cid:105).
For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705.
Phone [phone], fax [phone], e-mail (cid:101)(cid:106)(cid:98)(cid:107)(cid:60)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105), or visit (cid:115)(cid:115)(cid:115)(cid:42)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105).
Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and
licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at
(cid:100)(cid:112)(cid:112)(cid:108)(cid:54)(cid:43)(cid:43)(cid:115)(cid:115)(cid:115)(cid:42)(cid:93)(cid:108)(cid:110)(cid:97)(cid:111)(cid:111)(cid:42)(cid:95)(cid:107)(cid:105)(cid:43)(cid:101)(cid:106)(cid:98)(cid:107)(cid:43)(cid:94)(cid:113)(cid:104)(cid:103)(cid:111)(cid:93)(cid:104)(cid:97)(cid:111).
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the
preparation of this work, neither the author(s) nor Apress 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 information contained in this work.
The source code for this book is freely available to readers at (cid:115)(cid:115)(cid:115)(cid:42)(cid:98)(cid:110)(cid:101)(cid:97)(cid:106)(cid:96)(cid:111)(cid:107)(cid:98)(cid:97)(cid:96)(cid:42)(cid:95)(cid:107)(cid:105) in the Downloads section.
Credits
Lead Editor Associate Production Director
Ben Renow-Clarke Kari Brooks-Copony
Technical Reviewer Production Editor
Matt Heerema Laura Cheu
Editorial Board Compositor
Clay Andres, Steve Anglin, Mark Beckner, Lynn L’Heureux
Ewan Buckingham, Tony Campbell, Gary Cornell,
Jonathan Gennick, Jonathan Hassell, Proofreader
Michelle Lowman, Matthew Moodie, Duncan Parkes, Lisa Hamilton
Jeffrey Pepper, Frank Pohlmann, Douglas Pundick,
Ben Renow-Clarke, Dominic Shakeshaft, Indexer
Matt Wade, Tom Welsh Broccoli Information Management
Project Manager Interior and Cover Designer
Richard Dal Porto Kurt Krames
Copy Editor Manufacturing Director
Liz Welch Tom Debolski
CONTENTS AT A GLANCE
Foreword ..................................................................xvii
About the Author ........................................................ xviii
About the Technical Reviewer .......................................... xix
Acknowledgments ......................................................... xx
Introduction ............................................................... xxi
PART ONE GET DOWN WITH MARKUP ........................... 1
Chapter 1 Lists .............................................................. 3
Chapter 2 Headings ........................................................ 17
Chapter 3 Tables are Evil? ................................................ 29
Chapter 4 Quotations ..................................................... 49
Chapter 5 Forms ........................................................... 61
Chapter 6 <Strong>, <Em>, and Other Phrase Elements .............. 83
Chapter 7 Anchors ........................................................103
Chapter 8 More Lists .....................................................119
Chapter 9 Minimizing Markup ...........................................133
iv
PART TWO SIMPLEBITS OF STYLE 147
...............................
Chapter 10 Applying CSS .................................................149
Chapter 11 Print Styles ...................................................167
Chapter 12 CSS Layouts ..................................................179
Chapter 13 Styling Text ..................................................207
Chapter 14 Image Replacement .........................................223
Chapter 15 Styling <body> ..............................................243
Chapter 16 Next Steps ...................................................255
Index ...................................................................... 263
v
CONTENTS
Foreword ..................................................................xvii
About the Author ........................................................ xviii
About the Technical Reviewer .......................................... xix
Acknowledgments ......................................................... xx
Introduction ............................................................... xxi
PART ONE GET DOWN WITH MARKUP 1
...........................
Chapter 1 Lists .............................................................. 3
Let’s go shopping ...............................................................4
Quiz time .....................................................................4
Method A: The <br /> breakdown ..............................................4
It’s a wrap ..................................................................5
Method B: The bullet that bites ................................................6
Validation, please ........................................................6
Method C: Getting closer .....................................................6
Method D: Wrapper’s delight ..................................................8
Summary ......................................................................8
Extra credit ....................................................................9
Bite the bullet ..............................................................9
Getting fancier with custom bullets ............................................10
Lists that navigate ..........................................................11
Mini-tab shapes ............................................................14
Chapter 2 Headings ........................................................ 17
What is the best way to mark up the title of a document? .............................18
Method A: Meaningful? ......................................................18
Method B: The p and b combo ................................................19
Difficult to style .........................................................19
vii
CONTENTS
Method C: Style and substance ................................................19
Easily styled ............................................................19
Default distaste .........................................................20
Search engine friendly. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20
An aside on heading order ................................................21
Summary .....................................................................21
Extra credit ...................................................................22
Simple styling .................................................................22
Adding backgrounds ........................................................23
Backgrounds and borders .................................................24
Tiled backgrounds .......................................................24
Swappable icons ...........................................................25
Easy updates ...............................................................25
The chameleon effect .......................................................26
Aligning the <img> element ...............................................26
Wrapping up ..................................................................27
Chapter 3 Tables are Evil? ................................................ 29
Totally tabular .................................................................30
A table that everyone can sit at ..................................................30
Adding a summary .............................................................33
The head(s) of the table ........................................................33
Header and data relationships ....................................................35
Using the abbr attribute ........................................................36
<thead>, <tfoot>, and <tbody> ..................................................37
Are tables evil? ................................................................39
Extra credit ...................................................................39
Creating a grid .............................................................39
Collapsing the gaps .........................................................40
An IE/Mac note .........................................................41
Spaced out .............................................................41
Customizing the headers .....................................................42
Headers with background images ..............................................43
Tiny tile ...............................................................43
The CSS ...............................................................43
Assigning icons to IDs .......................................................44
The icons ..............................................................45
The CSS ...............................................................45
Combining rules for simpler bits ...........................................46
More table style examples .......................................................47
Wrapping up ..................................................................47
Chapter 4 Quotations ..................................................... 49
Method A: Lacks meaning .......................................................50
Method B: A class act? ..........................................................50
Method C: <blockquote> is best ..................................................51
Using a screwdriver to hammer a nail ..............................................51
Summary .....................................................................52
viii
CONTENTS
Extra credit ...................................................................52
A cite for curious eyes .......................................................52
Inline quotations ...........................................................53
No need for marks ......................................................53
Nesting inline quotations .................................................54
Styling <blockquote> .......................................................54
Background quote marks .................................................54
Three images ...........................................................55
Tagging the elements ....................................................55
Three elements, three backgrounds .........................................55
The results .............................................................57
Calling out special words .................................................58
How does it degrade? ....................................................59
Wrapping up ..................................................................59
Chapter 5 Forms ........................................................... 61
What are our options when marking up a form? .....................................62
Method A: Using a table .....................................................62
Method B: Tableless, but cramped .............................................63
Method C: Simple and more accessible .........................................64
The <label> element .....................................................65
Why <label>? ...........................................................65
Method D: Defining a form ...................................................66
Defining style ...........................................................67
Summary .....................................................................68
Extra credit ...................................................................69
The fabulous tabindex .......................................................69
Why tabindex? ..........................................................70
accesskey for frequented forms ...............................................70
Easily accessed search ....................................................71
Styling forms ..............................................................71
Setting the width of text inputs ............................................71
Using <label> to customize fonts ...........................................72
No need to be redundant .................................................74
Use <fieldset> to group form sections ......................................74
Adding style to <fieldset> and <legend> .....................................75
Three-dimensional <legend> ..............................................76
Borders and backgrounds on form elements .................................78
Wrapping up ..................................................................80
Chapter 6 <strong>, <em>, and Other Phrase Elements .............. 83
Presentational vs. structural ......................................................84
Why are <strong> and <em> better than <b> and <i>? ............................84
Check in with the experts .................................................84
Method A ..............................................................85
Method B ..............................................................85
Bold and beautiful .......................................................85
ix
CONTENTS
What about <em>? .........................................................85
Method A ..............................................................85
Method B ..............................................................86
Emphasis mine ..........................................................86
Just bold or italic, please .....................................................86
Worth its (font- )weight in bold .............................................87
That’s italic! ............................................................87
Both bold and italic .........................................................87
Generic <span> .........................................................88
Emphasis with class ......................................................88
Summary .....................................................................89
Extra credit ...................................................................89
The phrase elements ........................................................89
<cite> design ..............................................................90
The specification ........................................................90
A change in <cite> style ..................................................91
Leveraging the structure ..................................................91
<abbr> and <acronym> .....................................................92
Define once ............................................................93
The presentation ........................................................93
Compatibility issues ......................................................94
<code> ...................................................................94
<samp> ..................................................................95
<var> ....................................................................95
<kbd> ....................................................................95
Microformats .................................................................96
New growth ...............................................................96
A simple explanation ........................................................96
An hCard example ..........................................................97
Code Creator ...........................................................97
The markup ............................................................98
The power of microformats ...............................................99
Final phrase .................................................................101
Chapter 7 Anchors ........................................................103
When pointing to a specific portion of a page, what is the best way to mark up an anchor? 104
Method A: An empty name ..................................................104
Method B: It’s all in a name .................................................105
Beware of global <a> styling .............................................105
Richer name attribute ...................................................106
Method C: Lose the name ...................................................106
Two birds with one stone ................................................107
Older browsers and the id attribute ........................................107
Method D: The a ll-in- one ...................................................108
Sharing names .........................................................108
Summary ....................................................................108
x
CONTENTS
Extra credit ..................................................................109
The title attribute ..........................................................110
Title in action ..........................................................110
Tooltip titles ...........................................................110
Titles are spoken .......................................................111
Styling links ..............................................................111
Backgrounds ..........................................................112
Dotted borders ........................................................112
Where you been? ......................................................113
Hovering .............................................................113
Active state ...........................................................114
LoVe/HAte your links ...................................................114
Fitts’ Law .............................................................115
A hack for IE6 .........................................................116
Anchors aweigh ..............................................................117
Chapter 8 More Lists .....................................................119
What is the best way to mark up a numbered list of items? ...........................120
Method A: Unordered order .................................................120
The numbers game .....................................................121
Rendered bullets .......................................................121
Method B: An ordered list ...................................................121
Automatic numbering ...................................................121
Wrapper’s delight II .....................................................122
List types .............................................................122
What is the best way to mark up a set of terms and descriptions? ......................123
Method A ................................................................124
Method B ................................................................124
Structure leads to style ..................................................125
Adding icons ..........................................................125
Other applications ......................................................126
Summary ....................................................................127
Extra credit ..................................................................127
Identify the parts ..........................................................127
Custom numbers ..........................................................128
Adding the numbers to the CSS ..............................................128
The results ...............................................................130
Wrapping up .................................................................130
Chapter 9 Minimizing Markup ...........................................133
How can we minimize markup when building sites with web standards? .................134
Descendant selectors .......................................................134
Method A: Class happy .....................................................134
Classified CSS ..........................................................135
xi