Making Cascading
Style Sheets Work
Joseph Lowery
Published by
 |
| CSS Hacks and Filters |
Joseph Lowery is the author of the Dreamweaver MX 2004 Bible (Indianapolis, IN,Wiley
Publishing, 2004) and the Fireworks MX Bible (Indianapolis, IN:Wiley Publishing, 2002),
as well as Design and Deploy (San Francisco: Macromedia Press, 2004) and Joseph Lowery’s
Beyond Dreamweaver (Berkeley, CA: New Riders Press, 2002). In recent years, he co-authored
Dreamweaver MX 2004 Web Application Recipes (Berkeley, CA: New Riders Press, 2003) with
Eric Ott and the Dreamweaver MX Killer Tips book (Berkeley, CA: New Riders Press, 2003)
with Angela Buraglia. His books are international bestsellers, having sold more than 400,000
copies worldwide in nine different languages. As a programmer, he has developed numerous
extensions for the Dreamweaver community, both free and commercial, including FlashBang!
and Deva Tools for Dreamweaver. He also has presented at MacDesign in Chicago, Seybold in
both Boston and San Francisco, and Macromedia MAX conferences in the U.S. and Europe.
Acknowledgments
I’d like to thank Wiley’s Chris Webb for first opening the door to this book and then encouraging
the idea and execution. I also owe Chris for bringing in Kevin Shafer as editor. Kevin has
been a terrific guide and has helped focus the work time and again. My greatest debt of gratitude
goes out to Mark Fletcher, who, as Technical Editor, has shared his enthusiasm, encyclopedic
knowledge, and real-world experience since the project’s inception. Throughout the writing
process, Mark has generously pointed out resources, breaking trends, and hard-earned insights.
I feel honored to have Mark by my side and look forward to working together with him in the near future.
Introduction
I’ll be upfront about it: I wrote this book for myself. I was working on one too many sites with
impossible browser-spanning specs while trying to harness the demanding CSS requirements,
both self- and client-driven.While I found a wealth of information about CSS hacks and filters
on the Web, it was overwhelming. I wanted a central resource that I could rely on to quickly
give me the solutions I needed with the deeper understanding I craved. I couldn’t find it in any
one place—so I wrote it.
My hope, and fervent belief, is that there are a lot of designers in the same boat. CSS has come
on in a whirlwind and the reality of the browser situation demands that you deal with it on its
own terms or get blown away. There are, of course, numerous ways to handle CSS display issues.
Rather than try to force one method to the exclusion of others, this book offers the full gamut
of techniques. For example, if you don’t feel comfortable applying multiple hacks to adapt a
single style sheet, you can use any of the JavaScript or server-side methods for serving the right
CSS file to the right browser. I did, however, attempt to ensure that whatever suggestions I made
validated; where there was no recourse, the invalid technique is noted as such.
CSS Hacks and Filters follows, roughly, an old-to-new, simple-to-complex structure. The oldest
browsers CSS designers are still struggling with are covered first, followed by more up-to-date,
standards-based browsers. Internet Explorer’s proprietary conditional comment technology is
important enough (given Internet Explorer’s continued prevalence and CSS bugs) to deserve a
chapter by itself. In all these early chapters, I tackled real-world CSS problems and explained
how the hacks covered can solve them. Later chapters explore the intersection of CSS with other
Web technologies such as JavaScript, the Document Object Model (DOM), and application
servers. Graphics and other visual media weigh heavily in the modern Web, and manipulating
them properly with CSS is the subject of Chapter 7. Accessibility is a well-deserved hot button
and techniques for applying CSS in a responsible fashion are explored in Chapter 8.
The latter portion of the book is intended to offer practical examples for designers trying to
put it all together—and keep it there. You’ll find separate chapters on CSS layouts, navigations
systems, and debugging. My ongoing work with Dreamweaver persuaded me to present a couple
of additional real-world chapters to address the use of CSS in Macromedia’s world-class and
widely used authoring tool: one chapter is on core CSS use in Dreamweaver and the other concerns
Dreamweaver templates and CSS. This “getting-it-done” attitude is carried over into the
two appendixes. The resources listed in Appendix A should give you a full spectrum of jumpingoff
places, and the tables in Appendix B are intended to help you find a safe place to land.
Knowing the passionate nature of the CSS community, I fully expect to get an earful or two.
If you’d like to get in touch with me to share an opinion or ask a question, please feel free to
write me at jlowery@idest.com. You’ll find more book-related information on my site at
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 10,676 KB |
Pages
|
286 p |
File Type
|
PDF format |
ISBN-13
ISBN-10 | 978-0-7645-7985-1 0-7645-7985-1 |
Copyright
| 2005 by Wiley Publishing, Inc |
Contents at a Glance
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Chapter 1:Why Hack CSS?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Chapter 2: Filtering CSS for Older Browsers . . . . . . . . . . . . . . . . . . . . . . . . 11
Chapter 3: Hiding CSS from Newer Browsers. . . . . . . . . . . . . . . . . . . . . . . . 33
Chapter 4: Applying Conditional Comments . . . . . . . . . . . . . . . . . . . . . . . . 57
Chapter 5: Scripting JavaScript and Document Object Model Hacks. . . . . . . . . . . . 71
Chapter 6: Coding Server-Side Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Chapter 7: Enhancing Graphics and Media with CSS . . . . . . . . . . . . . . . . . . . 99
Chapter 8: Maintaining Accessibility with CSS . . . . . . . . . . . . . . . . . . . . . . 121
Chapter 9: Integrated CSS Hack Layouts . . . . . . . . . . . . . . . . . . . . . . . . . 131
Chapter 10: Building Navigation Systems . . . . . . . . . . . . . . . . . . . . . . . . . 159
Chapter 11: Troubleshooting CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Chapter 12: Implementing CSS Hacks in Dreamweaver. . . . . . . . . . . . . . . . . . 191
Chapter 13: Creating CSS-Savvy Dreamweaver Templates . . . . . . . . . . . . . . . . 219
Appendix A: Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
Appendix B: CSS Hacks and Filters Charts . . . . . . . . . . . . . . . . . . . . . . . . 243
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Contents
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix
Chapter 1: Why Hack CSS?
The Cascading Style Sheets Promise . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Separate Presentation from Content . . . . . . . . . . . . . . . . . . . . . . . 2
Flexible Design Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Faster Loading Times . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Easy, Instant Maintenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Portability. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Advanced Design Possibilities . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Enhanced User Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Why CSS Is Broken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
To Hack or Not to Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Chapter 2: Filtering CSS for Older Browsers
Hacking Netscape 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Linking vs. Importing Style Sheets . . . . . . . . . . . . . . . . . . . . . . . 13
Hiding Individual Rules from Netscape 4 . . . . . . . . . . . . . . . . . . . 14
Dealing with Fonts Properly . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Adjusting Margins and Borders. . . . . . . . . . . . . . . . . . . . . . . . . 21
Working Through Background Problems. . . . . . . . . . . . . . . . . . . . 23
Correcting List Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Handling Table Discrepancies . . . . . . . . . . . . . . . . . . . . . . . . . 26
Fixing Internet Explorer 3 and 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Hiding Style Sheets from Internet Explorer 3 and 4 . . . . . . . . . . . . . . 27
Concealing Individual Rules . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Adjusting for Table Properties . . . . . . . . . . . . . . . . . . . . . . . . . 29
Font Problems to Avoid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Making Margins and Padding Useful. . . . . . . . . . . . . . . . . . . . . . 30
Chapter 3: Hiding CSS from Newer Browsers
Controlling Internet Explorer 5 and Above . . . . . . . . . . . . . . . . . . . . . . 34
Managing CSS in Internet Explorer 5.x for Mac. . . . . . . . . . . . . . . . 34
Balancing Internet Explorer 5, 5.5, and 6. . . . . . . . . . . . . . . . . . . . 37
Taming Gecko-Based Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
CSS Hack Strategies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Float Clearing with the :after Pseudo-Element . . . . . . . . . . . . . . . . 49
Filtering Out Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
The Lang Pseudo-Class Hack . . . . . . . . . . . . . . . . . . . . . . . . . 52
The Exclamation Mark Hack. . . . . . . . . . . . . . . . . . . . . . . . . . 52
Handling Opera Problems. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Be Nice to Opera Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Media Queries Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Applying the Owen Hack. . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Chapter 4: Applying Conditional Comments
About Conditional Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Showing/Hiding Styles from Individual Versions . . . . . . . . . . . . . . . . . . . 59
Showing or Hiding a Range of Versions. . . . . . . . . . . . . . . . . . . . . . . . 60
Working with Non–Internet Explorer Browsers . . . . . . . . . . . . . . . . . . . 62
Practical Applications of Conditional Comments . . . . . . . . . . . . . . . . . . 63
Three-Pixel Gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Italics Float Bug. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
First Letter Bug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Chapter 5: Scripting JavaScript and Document Object Model Hacks
Dynamically Loading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Determining Browsers with JavaScript Objects . . . . . . . . . . . . . . . . 72
Reading the userAgent Property . . . . . . . . . . . . . . . . . . . . . . . . 73
Styling for a Detected Browser . . . . . . . . . . . . . . . . . . . . . . . . . 75
Switching Style Sheets with the DOM . . . . . . . . . . . . . . . . . . . . . . . . 76
Style Value Switching for Interactivity . . . . . . . . . . . . . . . . . . . . . . . . 81
Chapter 6: Coding Server-Side Solutions
Styling with ASP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Controlling CSS with PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
ColdFusion Integration with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Chapter 7: Enhancing Graphics and Media with CSS
Styling Images for Controlled Layout . . . . . . . . . . . . . . . . . . . . . . . . . 99
Replacing Styles with Images Automatically. . . . . . . . . . . . . . . . . . . . . 103
Scaling Images for Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Making Rounded Rectangles with CSS . . . . . . . . . . . . . . . . . . . . . . . 106
Adding Drop-Shadow Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Extending PNG Support. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Implementing Flash Replacement . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Chapter 8: Maintaining Accessibility with CSS
Setting Up for Accessible Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Handling Print Media Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . 125
Attaching a Print Media Style Sheet . . . . . . . . . . . . . . . . . . . . . 125
Defining General Properties. . . . . . . . . . . . . . . . . . . . . . . . . . 126
Correcting Print-Specific Problems . . . . . . . . . . . . . . . . . . . . . . 127
Adding CSS Hacks for Screen Readers . . . . . . . . . . . . . . . . . . . . . . . 128
Chapter 9: Integrated CSS Hack Layouts
Positioning with CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Position: Relative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Position: Absolute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Position: Fixed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Managing the Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Crafting Two- and Three-Column Designs . . . . . . . . . . . . . . . . . . . . . 146
Two-Column Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Three-Column Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Placing Footers Correctly. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Centering Page Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Chapter 10: Building Navigation Systems
Designing CSS Navigation Bars . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Vertical Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Horizontal Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Creating Multilevel Drop-Downs . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Crafting CSS Tabs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Chapter 11: Troubleshooting CSS
Avoiding the Flash of Unstyled Content. . . . . . . . . . . . . . . . . . . . . . . 177
Debugging CSS Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
CSS Usual Suspects Checklist . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Verifying Server-Side Setup . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Approaching Document-Level Issues . . . . . . . . . . . . . . . . . . . . . 182
Avoiding General CSS Errors . . . . . . . . . . . . . . . . . . . . . . . . . 185
Targeting Design Problems . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Chapter 12: Implementing CSS Hacks in Dreamweaver
Working with CSS in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . 191
Setting Up CSS Preferences . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Attaching External Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . 196
Defining CSS Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Applying Style Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Modifying Styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Using the CSS Relevant Panel. . . . . . . . . . . . . . . . . . . . . . . . . 211
Working with Design Time Style Sheets . . . . . . . . . . . . . . . . . . . 212
Using Snippets for CSS Hacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Chapter 13: Creating CSS-Savvy Dreamweaver Templates
Setting Up Basic Templates for CSS . . . . . . . . . . . . . . . . . . . . . . . . . 220
Embedding Design Time CSS Style Switching . . . . . . . . . . . . . . . . . . . 222
Adjusting Layout Styles via Template Parameters . . . . . . . . . . . . . . . . . . 225
Constructing Contribute-Friendly CSS Designs . . . . . . . . . . . . . . . . . . 229
CSS Basics in Contribute . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Limiting Available Classes. . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Applying Template Features in Contribute . . . . . . . . . . . . . . . . . . 232
Appendix A: Resources
General CSS Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
CSS Hack Information. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
CSS and JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
Server-Side CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
CSS and Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
CSS and Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239
CSS Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
CSS in Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
CSS Example Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
Appendix B: CSS Hacks and Filters Charts
Hiding CSS from a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Revealing CSS to a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
