Handcrafted CSS: More Bulletproof Web Design

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