Table Of Contents:
Introduction xi

Always Ask, ``What Happens If...?'' 1(22)

A Simple List of Links 4(1)

Block-Level Links 4(3)

The markup 5(1)

Setting the link style 5(1)

Styling the price 6(1)

Positioning the price 6(1)

Unintentional Overlap 7(1)

What Happens if Text Size Is Adjusted? 8(1)

Guessing at Content Length 8(2)

A situation where absolute positioning makes good sense 9(1)

Improving Flexibility with Float 10(1)

A new markup order 10(1)

Floating the price 10(1)

Passing the text size test 11(1)

A More Optimal Markup Order 11(3)

Specifying a width for Floated elements 13(1)

How About a Table? 14(2)

Links around block-level elements 15(1)

Adding Data Visualization 16(6)

Adding data to the markup 16(1)

Applying base styles 17(1)

Hiding the percentage text and creating the bar 18(2)

Fixing things in Internet Explorer 6 20(2)

Choosing the Right Solution 22(1)

Rounded Corners with border-radius 23(30)

Past and Present Rounding 26(4)

Slicing up a Fixed-width rounded box 27(1)

Slicing up a fluid-width rounded box 28(2)

Tied to a palette and a radius 30(1)

The border-radius Property 30(2)

Vendor-Specific Extensions 32(1)

Progressive Enrichment with -webkit-border-radius and -moz-border-radius 33(2)

Future-proofing 34(1)

Rounding specific corners 34(1)

A Little Choppy in Firefox 2 35(2)

Perfectly fine if contrast is low 36(1)

Background Clipping 37(5)

A simple hyperlink 38(1)

Creating the PNG background image 38(1)

Applying the styles that create the button 39(1)

Easy hover states 40(1)

Adding a border detail 41(1)

No background clipping in Firefox 2 42(1)

Rounding Form Elements 42(6)

Simple Form Markup 42(1)

Applying basic styles 43(1)

Adding backgrounds and removing borders 44(1)

Creating depth 44(2)

Adding further detail with borders and border-radius 46(1)

Declaring a: focus style 47(1)

What About Other Browsers? 48(2)

This is okay 49(1)

Square button 49(1)

Square form elements 50(1)

Progressive enrichment 50(1)

Wonderful for Prototyping 50(3)

Flexible Color with RGBA 53(24)

What is RGBA? 56(2)

The opacity Property vs. RGBA 58(3)

Where opacity goes wrong 59(2)

Compatibility 61(1)

What About Other Browsers? 62(2)

Providing a backup for challenged browsers 62(1)

Using tiled PNGs 63(1)

An Excellent Tool for Prototyping 64(1)

Not Just for Backgrounds 64(6)

Blending text with RGBA 65(1)

wilsonminer.com 66(1)

Easy hover selection 67(1)

Painting by numbers 68(2)

Constructing ``This Week's Specials'' 70(6)

Crafting the markup 70(1)

Making the list horizontal 71(1)

Adding the rounded border 72(1)

Positioning the overlay 73(1)

Styling the title and price 73(1)

Adding RGBA to the overlay 74(2)

Wrapping Up 76(1)

Do Websites Need to Look Exactly the Same in Every Browser? 77(24)

The Answer I'm Sticking to 80(1)

Rewarding vs. ``This Is Broken'' 81(1)

Decision Makers Who Get It 82(5)

Easier when you are the decision maker 84(3)

It All Comes Down to Stats 87(1)

More Advanced CSS That Works Today 87(12)

text-shadow 88(3)

box-shadow 91(3)

webkit-transition 94(5)

Wrapping Up 99(2)

Modular Float Management 101(30)

Float Refresher 104(2)

Easy clearing 106(1)

Applying .clearfix 106(2)

Additional rules for IE6 and 7 106(1)

Adding.clearfix to the markup 107(1)

A Semantic Dilemma 108(3)

One alternative: a big long list 108(3)

Choosing a better class name 111(1)

Setting Up .group in Your Style Sheets 111(3)

Set it and forget it 113(1)

Frameworks for Handcrafters 114(13)

Rolling your own 115(1)

index.html 115(6)

screen.css 121(1)

reset.css 122(1)

master.css 123(3)

ie.css 126(1)

Your mileage may vary 127(1)

Applying .group to Tugboat 127(2)

Modular moves 128(1)

Wrapping Up 129(2)

The Fluid Grid 131(40)

The Assignment 135(5)

The problem with fixed width 137(2)

Less soapbox, more solutions! 139(1)

Flexibility Through...Font Sizing? 140(8)

A matter of context 142(3)

Changing our context 145(2)

Wax on, wax off 147(1)

Mo'Fluid, Mo'Grids, Mo'Betta 148(10)

From mockup to markup 150(2)

Division sign deja vu 152(3)

Columns, context, and changes---oh my! 155(3)

Fluid Media 158(12)

This ain't your mama's img tag 159(3)

IE and its decidedly imperfect CSS implementation, sitting in a tree... 162(1)

A Problem of platforms (well, one platform) 163(7)

Wrapping Up 170(1)

Craftsmanship Details 171(36)

Use the Best Possible Ampersand 174(6)

Channeling our inner Bringhurst 175(1)

Guideline 5.1.3 176(1)

We've been progressively enriching since the very beginning 177(1)

I thought this was about ampersands? 178(2)

Font Embedding with CSS 180(5)

Adding @font-face to Tugboat 180(2)

Support for @font-face 182(1)

The legal stuff 182(1)

Using free fonts, for now 183(2)

Typekit 185(1)

¡Query 185(12)

How I use ¡Query in Tugboat 186(6)

Using jQuery to add a last class 192(5)

Scratching the surface 197(1)

Shifting Backgrounds (Parallax Scrolling for the Lazy) 197(6)

Guerrilla (or gorilla?) tactics 198(2)

Parallax effect for the lazy 200(3)

Conclusion 203(4)
Index 207