HTML & CSS: The Good Parts

Table of Contents......Page 9
What Are the Good Parts?......Page 19
The Ideal Reader......Page 20
A Warning About Familiarity (or Lack Thereof)......Page 21
Objectives of This Book......Page 22
What Is Not In This Book......Page 23
About Web Standards......Page 24
About Photoshop......Page 25
Nomenclature......Page 26
Conventions Used in This Book......Page 28
Safari® Books Online......Page 29
Acknowledgments......Page 30
The Web Without Links......Page 33
URIs......Page 34
Improving the User Experience with Linking......Page 35
Hypertext Implementation Challenges......Page 36
HTML Syntax......Page 39
Tags, Elements, and Attributes......Page 40
Rendering Modes, Flavors of HTML, and Document Type Declarations......Page 42
HTML or XHTML?......Page 43
A Tale of Two Box Models......Page 44
Choosing the Right Document Type for Your Project......Page 45
Providing Stylesheet Hooks with class and id......Page 46
Describing Content with title and lang......Page 47
The contenteditable Attribute in HTML5......Page 49
Separation in Practice......Page 50
Working with Document Trees......Page 51
Browsers, Parsing, and Rendering......Page 52
Dynamic HTML, Ajax, and Rendering......Page 53
Referencing a Stylesheet with link......Page 55
Targeting Internet Explorer Versions with Conditional Comments......Page 56
Beware of style Attributes!......Page 57
Targeting Rules to Specific Media......Page 58
Choosing the Elements You Want to Style: Writing Selectors......Page 59
Parents, Children, and Siblings: Element/Node Relationships......Page 60
Multiple and Descendant Selectors......Page 61
Selecting Direct Child Elements......Page 62
Selector Priority......Page 63
Avoiding Rule Conflicts......Page 64
CSS Units......Page 65
Pitch and the Value of a Pixel......Page 66
font-size Keywords......Page 68
Key CSS Layout Properties......Page 69
The Broad Landscape of Web-Related Standards......Page 73
Interoperability......Page 74
Accessibility......Page 75
Best Practices (and Lack Thereof)......Page 76
Taking the Middle Road: Standards-Friendliness......Page 77
Rules of Standards-Friendly Development......Page 78
The Four Habits of Effective Stylists......Page 81
Habit #1: Keeping It Simple......Page 82
Habit #2: Keeping It Flexible......Page 84
Flexibility, internal libraries, and code reuse......Page 86
Habit #3: Keeping to Consistency......Page 87
Habit #4: Keeping Your Bearings......Page 89
CSS Zen and the Stylist’s Experience......Page 91
The Functional Principles of CSS Zen......Page 92
Information Architecture and Web Usability......Page 93
Multidimensionality......Page 94
Navigation: Orientation and Wayfinding......Page 95
Visit Strategies......Page 96
Guideposts for Creating Usable Interfaces......Page 98
Predicting Visitor Behavior with Scenarios and User Testing......Page 99
Taxonomy and Nomenclature......Page 100
Applying Taxonomy Through the Cascade......Page 102
New Structural Elements (HTML5)......Page 104
Quirks Mode and Strict Mode......Page 105
auto Values......Page 106
The overflow Property......Page 107
Handling the Unpredictable......Page 109
Margins, Borders, and Padding......Page 110
Negative Margins......Page 111
Collapsed Margins......Page 112
Borders......Page 113
Box Property Dimensions and the % Value......Page 114
Block Elements......Page 115
Using the display Property to Change an Element’s Flow......Page 116
The display Property......Page 117
The Rules of the float Property......Page 118
Canceling float Values with Corresponding clear Values......Page 119
Implementing Multicolumn Layouts......Page 120
Converting the Two-Column Layout from Markup Tables to CSS......Page 121
How the Two-Column Styles Work......Page 122
Benefits of Confining Layout Specifications to Stylesheets......Page 124
Moving from Two Columns to Three......Page 125
Semantically Empty Containers for Multicolumn Layouts......Page 127
How Positioning Works......Page 128
The visibility and z-index Properties......Page 131
Altering Visibility Without Affecting Document Flow......Page 132
Stacking......Page 133
Orienting the List......Page 134
Forcing the Navigation List into the Desired Coordinates......Page 136
Fixed, Proportional, and Flexible Layouts......Page 138
Defining Grids......Page 140
The Rule of Thirds, the Golden Ratio, and the Fibonacci Sequence......Page 142
Implementing a Flexible Page Grid......Page 143
User Agent Default Styles for Ordered and Unordered Lists......Page 147
The list-style-type Property and the type Attribute......Page 148
The nav Element (HTML5)......Page 149
Enabling user agents to present navigation through alternate means......Page 150
Shorter Wavelengths......Page 151
Inline Serial Lists......Page 152
Styling Navigation Elements......Page 153
The Primary Navigation Layout Recipe......Page 154
The Footer Navigation Recipe......Page 155
Styling Definition Lists......Page 156
Dictionary Example......Page 157
Dialogue Example......Page 159
Headings in Print......Page 161
Styling Heading Elements......Page 163
Normalizing Heading Dimensions......Page 164
Link Markup......Page 165
Virtuous Use of the href Attribute......Page 166
Linking to Specific Passages Within Documents......Page 167
Creating Effective Link Content and title Values......Page 168
Link Pseudoclasses......Page 169
Using display: block to Increase the Footprint of a Link......Page 170
The text-decoration Property......Page 171
Adding Semantic Value with Inline Elements......Page 172
Quotations......Page 174
Color Theory and Web Color Practice......Page 175
The Additive Color Model......Page 176
The Subtractive Color Model......Page 177
Design, Contrast, and Complements......Page 178
Identifying Colors, in Brief......Page 179
Display Environments and the Web-Safe Palette......Page 180
Creating Your Own Palettes......Page 181
CSS Backgrounds......Page 182
Setting background-position Values......Page 183
Composing Background Images......Page 184
“Faux Columns”......Page 186
Tiled Background Textures and Patterns......Page 187
Large Background Textures and Nonrepeating Devices......Page 188
Bitmapped Copy and Fahrner Image Replacement......Page 189
Drawbacks of FIR......Page 191
Reducing Server Load with Sprites......Page 192
Source Order: Square Peg, Round Hole......Page 195
Positioning Is Rendered Useless......Page 196
The Parts of a Data Table......Page 197
Example: The Full Smash of Table Markup......Page 198
Composing Cells......Page 200
Table and Data Composition......Page 202
Table Headers, Footers, and Heading Cells......Page 204
Reducing Header and Footer Contrast......Page 205
Adding Rollover Accents to a Table......Page 207
Replaced Elements......Page 209
Preparing Images for Production......Page 210
Image Dimensions and Borders......Page 211
Cropping......Page 212
Matting: Creating a Virtual “Frame”......Page 213
Resampling: Altering the Absolute Size of an Image......Page 214
Level Changes: Optimizing the Contrast of Photographs......Page 215
Working with Color Profiles......Page 217
Choosing the Right Image Format......Page 218
Finding the Happy Medium Between Size and Quality......Page 219
Keeping Images Organized......Page 220
Image Publishing and Management in a CMS......Page 221
Composing Image Layout Within a Column......Page 222
Captioning Images......Page 223
Working with Previews (Thumbnail Images) in a Gallery or Slideshow Setting......Page 224
SlideShowPro......Page 226
Adding Motion and Sound: Using SWFObject to Insert Flash Videos and Presentations......Page 227
Inserting Unwrapped Multimedia......Page 228
Enter Flash......Page 229
A Caveat of Plug-in Content Styling......Page 230
The video and audio Elements (HTML5)......Page 231
Supporting alternative video formats......Page 232
The CanvasRenderingContext2D API......Page 233
SVG as an alternative to canvas......Page 234
A Brief History of Letterforms......Page 235
Gutenberg’s Press and the Art of Typography......Page 236
Different Limitations Without Changed Expectations......Page 237
A Visual Glossary of Typography......Page 238
Aliasing and Anti-Aliasing......Page 242
Styling for Readability......Page 244
“The Fold” and Tiny Type......Page 245
Sizing Type......Page 247
Em/Percentage Size Telescoping......Page 248
The Challenge of Limited Choices......Page 249
Applying Type Choices: the font-family Property......Page 252
Accessing System Default Type with the font Property......Page 254
What Is Character Encoding?......Page 256
Choosing an Encoding Scheme......Page 257
Inserting Entities to Provide Non-ASCII Characters......Page 258
Predictability, Preference, and Panic......Page 260
Assessing Content Scope......Page 261
Distinguishing Type: Face, Size, Weight, Style, Color......Page 262
Styling Passages of Similar Priority......Page 264
Enter Type Treatments......Page 265
The line-height Property......Page 266
The font-variant and text-transform Properties......Page 267
The Practice of Good Web Typography......Page 268
Web Applications, User Perspective, and Design Choices......Page 269
Organizing User Interfaces by Function......Page 270
Ten Rules for Effective Web Forms and Applications......Page 271
Establishing Requirements......Page 273
Markup and Structure......Page 275
Basic Form Structure, Presentation, and Behavior......Page 278
Form-Originated get Requests......Page 279
Manipulating the Size and Appearance of Individual Controls......Page 281
Prototyping 101......Page 283
Design Patterns, Style Resets, and Form Layout......Page 284
Grouping Controls by Appearance......Page 286
Identifying Required Fields......Page 287
Discovering and Identifying User Input Errors......Page 288
The disabled and readonly Attributes......Page 289
Creating Accessible Forms......Page 290
Implementing Forms for Accessibility......Page 291
Supporting Keyboard Navigation of Forms......Page 292
Form Features in HTML5......Page 293
The required Attribute......Page 294
The Numbing Nature of Internet Explorer (Especially IE 6)......Page 297
Browser Wars 2.0......Page 298
Absent or Poor Selector Support......Page 299
Margin Doubling......Page 300
ActiveX Filters and Transitions......Page 301
Poor Property Support......Page 302
Systemic Ugliness......Page 303
“Best Viewed with”......Page 304
Graded Support......Page 305
embed Versus object......Page 306
Form Controls, Plug-in Instances, and Element Stacking......Page 307
HTML’s Bad Neighborhoods and Cul-de-Sacs......Page 308
Frames......Page 309
The strike Element......Page 310
The noscript and noframes Elements......Page 311
Inline Presentation Elements......Page 312
The pre Element Versus the white-space Property......Page 313
Computed Values and Rounding Differences......Page 314
The inherit Value......Page 315
Counters......Page 316
Unicode Code Position Values and the content Property......Page 317
The marquee and blink Elements......Page 318
The style Attribute......Page 319
Event Handler Attributes......Page 320
The http-equiv Attribute......Page 321
Picking Up the Pieces......Page 322
The Underlying Client-Server Architecture......Page 323
What Every Web Developer Should Know About HTTP......Page 324
MIME Types, in Brief......Page 325
Controlling Request Volume......Page 326
Glossary......Page 329
Index......Page 335