CSS Mastery: Advanced Web Standards Solutions

Prelims......Page 1
Contents at a Glance......Page 7
Contents......Page 9
Foreword......Page 17
About the Authors......Page 18
About the Technical Reviewers......Page 20
Acknowledgments......Page 21
How is this book structured?......Page 23
Conventions used in this book......Page 24
Setting the Foundations......Page 27
A brief history of markup......Page 28
The power of meaning......Page 31
IDs and class names......Page 32
Naming your elements......Page 34
IDs or Classes?......Page 35
Divs and spans......Page 36
Microformats......Page 37
Different versions of HTML and CSS......Page 41
Validation......Page 43
Browser modes......Page 45
DOCTYPE switching......Page 46
Summary......Page 47
Common selectors......Page 49
Unknown......Page 0
The universal selector......Page 51
Child and adjacent sibling selectors......Page 52
Attribute selectors......Page 54
Specificity......Page 59
Using specificity in your style sheets......Page 61
Adding a class or an ID to the body tag......Page 62
Inheritance......Page 63
Applying styles to your document......Page 64
Structuring your code......Page 66
Note to self......Page 68
Style guides......Page 69
Summary......Page 72
Box model recap......Page 75
IE and the box model......Page 77
Margin collapsing......Page 78
The visual formatting model......Page 81
Relative positioning......Page 83
Absolute positioning......Page 84
Fixed positioning......Page 85
Floating......Page 86
Line boxes and clearing......Page 87
Summary......Page 93
Using Backgrounds for Effect......Page 95
Background image basics......Page 96
Rounded-corner boxes......Page 98
Fixed-width rounded-corner boxes......Page 99
Flexible rounded-corner box......Page 102
Mountaintop corners......Page 105
Multiple background images......Page 107
border-radius......Page 109
border-image......Page 110
Easy CSS drop shadows......Page 112
Clagnut......Page 115
Box-shadow......Page 116
CSS opacity......Page 119
RGBa......Page 120
PNG transparency......Page 121
CSS parallax effect......Page 123
Image replacement......Page 126
Phark......Page 127
Scalable Inman Flash Replacement (sIFR)......Page 128
Summary......Page 130
Simple link styling......Page 133
Simple link embellishments......Page 135
Fancy link underlines......Page 136
Styling link targets......Page 137
Highlighting different types of links......Page 139
Highlighting downloadable documents and feeds......Page 142
Creating links that look like buttons......Page 143
Rollovers with images......Page 144
Pixy-style rollovers......Page 145
CSS sprites......Page 147
Rollovers with CSS 3......Page 149
Pure CSS tooltips......Page 152
Summary......Page 154
Styling Lists and Creating Nav Bars......Page 157
Basic list styling......Page 158
Creating a basic vertical nav bar......Page 159
Highlighting the current page in a nav bar......Page 162
Creating a simple horizontal nav bar......Page 163
Creating a graphical nav bar......Page 165
Simplified sliding door tabbed navigation......Page 168
Suckerfish drop-downs......Page 171
CSS image maps......Page 174
Flickr-style image maps......Page 180
Remote rollovers......Page 189
A short note about definition lists......Page 195
Summary......Page 196
Styling Forms and Data Tables......Page 199
Styling data tables......Page 200
thead, tbody, and tfoot......Page 202
Data table markup......Page 203
Styling the table......Page 205
Adding the visual style......Page 206
Simple form layout......Page 209
Useful form elements......Page 210
The basic layout......Page 211
Other elements......Page 213
Embellishments......Page 216
Complicated form layout......Page 217
Accessible date input......Page 219
Multicolumn check boxes......Page 221
Submit buttons......Page 223
Form feedback......Page 225
Summary......Page 227
Layout......Page 229
Planning your layout......Page 230
Setting the foundations......Page 232
Centering a design using margins......Page 234
Float-based layouts......Page 236
Two-column floated layout......Page 237
Three-column floated layout......Page 240
Fixed-width, liquid, and elastic layout......Page 243
Liquid layouts......Page 244
Elastic layouts......Page 247
Liquid and elastic images......Page 250
Faux columns......Page 252
Equal-height columns......Page 255
CSS 3 columns......Page 260
CSS Frameworks vs. CSS Systems......Page 262
Summary......Page 267
Bugs and Bug Fixing......Page 269
Common CSS problems......Page 270
Problems with specificity and sort order......Page 271
Problems with margin collapsing......Page 273
Bug hunting basics......Page 276
Isolate the problem......Page 278
Creating minimal test cases......Page 279
Having layout......Page 280
What is layout?......Page 281
What effect does layout have?......Page 282
Internet Explorer conditional comments......Page 284
A warning about hacks and filters......Page 285
Applying the IE for Mac band pass filter......Page 286
Applying the star HTML hack......Page 287
Double-margin float bug......Page 288
Three-pixel text jog bug......Page 289
IE 6 duplicate character bug......Page 291
IE 6 peek-a-boo bug......Page 292
Absolute positioning in a relative container......Page 293
Stop picking on Internet Explorer......Page 294
Graded browser support......Page 295
Summary......Page 297
Case Study: Roma Italia......Page 299
About this case study......Page 300
The foundation......Page 302
An eye toward HTML 5......Page 303
reset.css......Page 305
The 1080 layout and grid......Page 306
Using grids in web design......Page 307
Dowebsitesneedtolookexactlythesameineverybrowser.com?......Page 309
Attribute selector......Page 312
Box-shadow, RGBa, and text-overflow......Page 313
Setting font-size like it’s 1999......Page 317
Hanging punctuation......Page 318
Multicolumn text layout......Page 320
@font-face......Page 322
Cufón, an interim step toward @font-face......Page 326
AJAX......Page 328
jQuery......Page 329
Using AJAX and jQuery for the search feature......Page 331
Summary......Page 333
Case Study: Climb the Mountains......Page 335
About this case study......Page 336
Style Sheet organization and conventions......Page 338
Describing contents......Page 339
Reset......Page 340
Grid flexibility......Page 341
How does the CTM layout work?......Page 342
Highlighting the current page......Page 343
Layering the blockquote......Page 347
Deep descendent selectors......Page 349
The :first-child pseudo-class......Page 353
Adjacent sibling selectors......Page 355
Our aim......Page 357
Caption image overlay and RGBa transparency......Page 358
Combining classes......Page 361
border-radius......Page 362
box-shadow......Page 363
Positioning lists and revealing content......Page 365
The main elevation chart......Page 368
Summary......Page 376