Handcrafted CSS: More Bulletproof Web Design

Cover......Page 1
Contents......Page 6
Introduction......Page 12
CHAPTER 1 Always Ask, “What Happens If…?”......Page 22
 Block-Level Links......Page 25
  Setting the link style......Page 26
  Positioning the price......Page 27
 Unintentional Overlap......Page 28
 Guessing at Content Length......Page 29
  A situation where absolute positioning makes good sense......Page 30
  Floating the price......Page 31
 A More Optimal Markup Order......Page 32
  Specifying a width for floated elements......Page 34
 How About a Table?......Page 35
  Links around block-level elements......Page 36
  Adding data to the markup......Page 37
  Applying base styles......Page 38
  Hiding the percentage text and creating the bar......Page 39
  Fixing things in Internet Explorer 6......Page 41
 Choosing the Right Solution......Page 43
CHAPTER 2 Rounded Corners with border-radius......Page 44
 Past and Present Rounding......Page 47
  Slicing up a fixed-width rounded box......Page 48
  Slicing up a fluid-width rounded box......Page 49
 The border-radius Property......Page 51
 Vendor-Specific Extensions......Page 53
 Progressive Enrichment with -webkit-border-radius and -moz-border-radius......Page 54
  Rounding specific corners......Page 55
 A Little Choppy in Firefox 2......Page 56
  Perfectly fine if contrast is low......Page 57
 Background Clipping......Page 58
  Creating the PNG background image......Page 59
  Applying the styles that create the button......Page 60
  Easy hover states......Page 61
  Adding a border detail......Page 62
  Simple form markup......Page 63
  Applying basic styles......Page 64
  Creating depth......Page 65
  Adding further detail with borders and border-radius......Page 67
  Declaring a : focus style......Page 68
 What About Other Browsers?......Page 69
  Square button......Page 70
 Wonderful for Prototyping......Page 71
CHAPTER 3 Flexible Color with RGBA......Page 74
 What Is RGBA?......Page 77
 The opacity Property vs. RGBA......Page 79
  Where opacity goes wrong......Page 80
 Compatibility......Page 82
  Providing a backup for challenged browsers......Page 83
  Using tiled PNGs......Page 84
 Not Just for Backgrounds......Page 85
  Blending text with RGBA......Page 86
  wilsonminer.com......Page 87
  Easy hover selection......Page 88
  Painting by numbers......Page 89
  Crafting the markup......Page 91
  Making the list horizontal......Page 92
  Adding the rounded border......Page 93
  Styling the title and price......Page 94
  Adding RGBA to the overlay......Page 95
 Wrapping Up......Page 97
CHAPTER 4 Do Websites Need to Look Exactly the Same in Every Browser?......Page 98
 The Answer I’m Sticking to......Page 101
 Rewarding vs. “This Is Broken”......Page 102
 Decision Makers Who Get It......Page 103
  Easier when you are the decision maker......Page 105
 More Advanced CSS That Works Today......Page 108
  text-shadow......Page 109
  box-shadow......Page 112
  -webkit-transition......Page 115
 Wrapping Up......Page 120
CHAPTER 5 Modular Float Management......Page 122
 Float Refresher......Page 125
  Additional rules for IE6 and 7......Page 127
  Adding .clearfix to the markup......Page 128
  One alternative: a big long list......Page 129
 Setting Up .group in Your Style Sheets......Page 132
  Set it and forget it......Page 134
 Frameworks for Handcrafters......Page 135
  index.html......Page 136
  screen.css......Page 142
  reset.css......Page 143
  master.css......Page 144
  ie.css......Page 147
 Applying .group to Tugboat......Page 148
  Modular moves......Page 149
 Wrapping Up......Page 150
CHAPTER 6 The Fluid Grid......Page 152
 The Assignment......Page 156
  The problem with fixed width......Page 158
  Less soapbox, more solutions!......Page 160
 Flexibility Through…Font Sizing?......Page 161
  A matter of context......Page 163
  Changing our context......Page 166
  Wax on, wax off......Page 168
 Mo’ Fluid, Mo’ Grids, Mo’ Betta......Page 169
  From mockup to markup......Page 171
  Division sign déjà vu......Page 173
  Columns, context, and changes—oh my!......Page 176
 Fluid Media......Page 179
  This ain’t your mama’s img tag......Page 180
  IE and its decidedly imperfect CSS implementation, sitting in a tree…......Page 183
  A problem of platforms (well, one platform)......Page 184
 Wrapping Up......Page 191
CHAPTER 7 Craftsmanship Details......Page 192
 Use the Best Possible Ampersand......Page 195
  Channeling our inner Bringhurst......Page 196
  Guideline 5.1.3......Page 197
  We’ve been progressively enriching since the very beginning......Page 198
  I thought this was about ampersands?......Page 199
  Adding @font-face to Tugboat......Page 201
  The legal stuff......Page 203
  Using free fonts, for now......Page 204
 jQuery......Page 206
  How I use jQuery in Tugboat......Page 207
  Using jQuery to add a .last class......Page 213
 Shifting Backgrounds (Parallax Scrolling for the Lazy)......Page 218
  Guerrilla (or gorilla?) tactics......Page 219
  Parallax effect for the lazy......Page 221
Conclusion......Page 224
 B......Page 228
 C......Page 229
 F......Page 230
 H......Page 232
 L......Page 233
 O......Page 234
 R......Page 235
 S......Page 236
 W......Page 237
 Z......Page 238