HTML & CSS: The Good Parts

Table of Contents
Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
1. Hypertext at the Core . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Web Without Links 1
URIs 2
Managing Links 3
Improving the User Experience with Linking 3
Hypertext Implementation Challenges 4
2. Working with HTML Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
HTML Syntax 7
Tags, Elements, and Attributes 8
Page Structure 10
Rendering Modes, Flavors of HTML, and Document Type Declarations 10
HTML or XHTML? 11
Strict, Transitional, or Frameset? 12
A Tale of Two Box Models 12
Choosing the Right Document Type for Your Project 13
Beautiful Parts: Universal Attributes 14
Providing Stylesheet Hooks with class and id 14
Describing Content with title and lang 15
The contenteditable Attribute in HTML5 17
Separating Content, Structure, Presentation, and Behavior 18
Making Your Sites “Safe As Houses” 18
Separation in Practice 18
Working with Document Trees 19
Browsers, Parsing, and Rendering 20
Dynamic HTML, Ajax, and Rendering 21
3. CSS Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Connecting Stylesheets to HTML Documents 23

Referencing a Stylesheet with link 23
Targeting Internet Explorer Versions with Conditional Comments 24
Replacing link with style 25
Using @import 25
Beware of style Attributes! 25
Targeting Rules to Specific Media 26
Choosing the Elements You Want to Style: Writing Selectors 27
Parents, Children, and Siblings: Element/Node Relationships 28
Simple Selectors 29
Multiple and Descendant Selectors 29
Selecting Direct Child Elements 30
Rule Conflicts, Priority, and Precedence 31
Selector Priority 31
Avoiding Rule Conflicts 32
Value Inheritance 33
CSS Property and Value Survey 33
CSS Units 33
Cross-Media Length and Size Units 34
Pitch and the Value of a Pixel 34
Print-Friendly Length Units 36
font-size Keywords 36
Color Units 37
Key CSS Layout Properties 37
4. Developing a Healthy Relationship with Standards . . . . . . . . . . . . . . . . . . . . . . . . . . 41
The Broad Landscape of Web-Related Standards 41
Why Web Standards? 42
Interoperability 42
Market Forces 43
Forward Compatibility 43
Accessibility 43
Vendor Priorities 44
Legacy Asset Inertia 44
Best Practices (and Lack Thereof) 44
Strict Constructionism 45
Taking the Middle Road: Standards-Friendliness 45
Benefits of Standards-Friendliness 46
Rules of Standards-Friendly Development 46
5. Effective Style and Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
The Four Habits of Effective Stylists 49
Habit #1: Keeping It Simple 50
Habit #2: Keeping It Flexible 52

Habit #3: Keeping to Consistency 55
Habit #4: Keeping Your Bearings 57
CSS Zen and the Stylist’s Experience 59
The Functional Principles of CSS Zen 60
Information Architecture and Web Usability 61
Multidimensionality 62
Navigation: Orientation and Wayfinding 63
Visit Strategies 64
Guideposts for Creating Usable Interfaces 66
Predicting Visitor Behavior with Scenarios and User Testing 67
Taxonomy and Nomenclature 68
Applying Taxonomy Through the Cascade 70
New Structural Elements (HTML5) 72
6. Solving the Puzzle of CSS Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
The CSS Box Model and Element Size Control 73
Quirks Mode and Strict Mode 73
auto Values 74
The overflow Property 75
Limiting But Not Fixing Element Dimensions 77
Handling the Unpredictable 77
Margins, Borders, and Padding 78
Negative Margins 79
Collapsed Margins 80
Borders 81
Padding 82
The Box Behavior of the Document Root Elements 82
Box Property Dimensions and the % Value 82
Element Flow 83
Inline Elements 83
Block Elements 83
Inline-Block Elements 84
Using the display Property to Change an Element’s Flow 84
The display Property 85
The float and clear Properties 86
The Rules of the float Property 86
Canceling float Values with Corresponding clear Values 87
float Context 88
Implementing Multicolumn Layouts 88
Converting the Two-Column Layout from Markup Tables to CSS 89
How the Two-Column Styles Work 90
Benefits of Confining Layout Specifications to Stylesheets 92
Moving from Two Columns to Three 93

Dealing with More Than Three Columns 95
Semantically Empty Containers for Multicolumn Layouts 95
Advanced Layout in CSS3 96
CSS Positioning Properties 96
How Positioning Works 96
Bounding Positioned Elements 99
The visibility and z-index Properties 99
Altering Visibility Without Affecting Document Flow 100
Stacking 101
Obtaining Precise Navigation Source Order and Layout 102
Orienting the List 102
Forcing the Navigation List into the Desired Coordinates 104
Layout Types and Canvas Grids 106
Fixed, Proportional, and Flexible Layouts 106
Defining Grids 108
The Rule of Thirds, the Golden Ratio, and the Fibonacci Sequence 110
Implementing a Flexible Page Grid 111
7. Working with Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Ordered and Unordered Lists 115
User Agent Default Styles for Ordered and Unordered Lists 115
Creating Valid Ordered and Unordered Lists 116
The list-style-type Property and the type Attribute 116
The nav Element (HTML5) 117
Changing the Range of an Ordered List 119
Other Uses for Lists 120
Outlines 120
Inline Serial Lists 120
Altering the Layout of Footer Links 121
Bullets in Backgrounds? 121
Styling Navigation Elements 121
Placing the Primary Site Navigation Within the Source Order 122
The Primary Navigation Layout Recipe 122
The Footer Navigation Recipe 123
Definition Lists 124
Styling Definition Lists 124
Dictionary Example 125
Dialogue Example 127
8. Headings, Hyperlinks, Inline Elements, and Quotations . . . . . . . . . . . . . . . . . . . . . 129
Headings and Good Writing 129
Headings in Print 129
Optimal Heading Insertion 131

Styling Heading Elements 131
Heading Sizes and Type Treatments 132
Normalizing Heading Dimensions 132
Heading Accents 133
Link Markup 133
Link Attributes 134
Virtuous Use of the href Attribute 134
Linking to Specific Passages Within Documents 135
Creating Effective Link Content and title Values 136
Styling Links 137
Link Pseudoclasses 137
Using display: block to Increase the Footprint of a Link 138
The text-decoration Property 139
The cursor Property 140
Adding Semantic Value with Inline Elements 140
Quotations 142
9. Colors and Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Color Theory and Web Color Practice 143
Usability, Accessibility, and Color 144
The Additive Color Model 144
The HSB Color Model 145
The Subtractive Color Model 145
Design, Contrast, and Complements 146
Identifying Colors, in Brief 147
Display Environments and the Web-Safe Palette 148
Creating Your Own Palettes 149
CSS Backgrounds 150
Setting background-position Values 151
The CSS background Shorthand Property 152
Composing Background Images 152
“Faux Columns” 154
Tiled Background Textures and Patterns 155
Large Background Textures and Nonrepeating Devices 156
Drop Shadows, Gel Effects, and Rounded Corners 157
Bitmapped Copy and Fahrner Image Replacement 157
The FIR Stylesheet Rules 159
Drawbacks of FIR 159
Reducing Server Load with Sprites 160
10. (Data) Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
The Disadvantages of Layout Tables 163
Source Order: Square Peg, Round Hole 163

CSS Zen Becomes a Myth 164
Template Slavery Is Unavoidable 164
Positioning Is Rendered Useless 164
The Parts of a Data Table 165
Example: The Full Smash of Table Markup 166
Composing Cells 168
Table and Data Composition 170
Table Headers, Footers, and Heading Cells 172
Attribute and Child Selectors 173
Reducing Header and Footer Contrast 173
Adding Rollover Accents to a Table 175
11. Images and Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Replaced Elements 177
Preparing Images for Production 178
The alt Attribute Explained 179
Image Dimensions and Borders 179
Image Production 180
Cropping 180
Matting: Creating a Virtual “Frame” 181
Resampling: Altering the Absolute Size of an Image 182
Level Changes: Optimizing the Contrast of Photographs 183
Applying Multiple Adjustments 185
Working with Color Profiles 185
Image Optimization 186
Choosing the Right Image Format 186
Finding the Happy Medium Between Size and Quality 187
Publishing Images 188
Keeping Images Organized 188
Image Publishing and Management in a CMS 189
Image Publication Etiquette 190
Styling Images and Plug-in Content 190
Composing Image Layout Within a Column 190
Captioning Images 191
Working with Previews (Thumbnail Images) in a Gallery
or Slideshow Setting 192
Lightbox: Previews, Galleries, and Slideshows 194
SlideShowPro 194
Adding Motion and Sound: Using SWFObject to Insert Flash Videos
and Presentations 195
Inserting Unwrapped Multimedia 196
A Tale of Three Companies 197
Enter Flash 197

Using Bare Markup to Publish Multimedia Content 198
A Caveat of Plug-in Content Styling 198
Sidestepping Plug-ins with the HTTP Content-Disposition
Header Field 199
Keeping an Open Mind 199
The video and audio Elements (HTML5) 199
The canvas Element (HTML5) 201
12. Web Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
A Brief History of Letterforms 203
Origins of Modern Western Letterforms 204
Gutenberg’s Press and the Art of Typography 204
The Emergence of Digital Typesetting 205
Different Limitations Without Changed Expectations 205
A Visual Glossary of Typography 206
Aliasing and Anti-Aliasing 210
Type Styles, Readability, and Legibility 212
Styling for Readability 212
Styling for Legibility 213
“The Fold” and Tiny Type 213
Sizing Type 215
Choosing the Right Units for Sizing Type 216
Em/Percentage Size Telescoping 216
Size Keywords 217
Working with Typefaces and Fonts 217
The Challenge of Limited Choices 217
Applying Type Choices: the font-family Property 220
Finding Canonical Typeface Names 222
Accessing System Default Type with the font Property 222
Character Encoding in Brief 224
What Is Character Encoding? 224
ASCII, ISO 8859-1, Unicode, and UTF-8 225
Choosing an Encoding Scheme 225
Inserting Entities to Provide Non-ASCII Characters 226
Creating Balanced Type Treatments 228
Predictability, Preference, and Panic 228
Assessing Content Scope 229
Distinguishing Type: Face, Size, Weight, Style, Color 230
Setting Type Around Blowouts 232
Styling Passages of Similar Priority 232
Enter Type Treatments 233
Typographical Miscellany in CSS 234
The line-height Property 234

The font-variant and text-transform Properties 235
The letter-spacing and word-spacing Properties 236
The white-space Property 236
The Practice of Good Web Typography 236
13. Clean and Accessible Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Building Effective Forms 237
Web Applications, User Perspective, and Design Choices 237
Organizing User Interfaces by Function 238
Ten Rules for Effective Web Forms and Applications 239
Assessment and Structure 241
Establishing Requirements 241
Markup and Structure 243
Basic Form Structure, Presentation, and Behavior 246
Form-Originated get Requests 247
The post Method and File Uploads 249
Manipulating the Size and Appearance of Individual Controls 249
Prototyping and Layout 251
Prototyping 101 251
Design Patterns, Style Resets, and Form Layout 252
Grouping Controls by Appearance 254
Required Fields and Other Submission Constraints 255
Identifying Required Fields 255
Discovering and Identifying User Input Errors 256
The disabled and readonly Attributes 257
Creating Accessible Forms 258
Implementing Forms for Accessibility 259
Supporting Keyboard Navigation of Forms 260
Form Features in HTML5 261
New Input Types 262
The required Attribute 262
14. The Bad Parts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
The Numbing Nature of Internet Explorer (Especially IE 6) 265
Browser Wars 2.0 266
Absent or Poor Selector Support 267
hasLayout 268
Margin Doubling 268
expression() Values 269
ActiveX Filters and Transitions 269
PNG Support (or Lack Thereof) 270
Poor Property Support 270
Issues with XHTML and XML 271

Systemic Ugliness 271
Template Fragility and Third-Party Content 272
Markup Validation As a Prerequisite to Proper Style Implementation 272
“Best Viewed with” 272
Graded Support 273
embed Versus object 274
Form Controls, Plug-in Instances, and Element Stacking 275
Invalid Markup for Stupid Reasons 276
HTML’s Bad Neighborhoods and Cul-de-Sacs 276
Frames 277
The strike Element 278
The name Attribute 279
The noscript and noframes Elements 279
Semantic Contortions and the Limited Vocabulary of HTML 280
Inline Presentation Elements 280
Manipulating Vertical Space: hr and br 281
The pre Element Versus the white-space Property 281
CSS Travesties 282
@-Rules 282
Computed Values and Rounding Differences 282
Vendor-Specific -moz and -webkit Property Prefixes 283
The inherit Value 283
Hiding Stuff: z-index and clip 284
Counters 284
Element Flow Rules 285
Unicode Code Position Values and the content Property 285
The Awful Parts 286
The marquee and blink Elements 286
MSIE User Interface Properties 287
The align Attribute 287
The style Attribute 287
div-itis 288
Event Handler Attributes 288
Gratuitous Underlining 289
The http-equiv Attribute 289
Picking Up the Pieces 290
Appendix: URIs, Client-Server Architecture, and HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291
Glossary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303