Section 25.3. Hack and Workaround Management 101


25.3. Hack and Workaround Management 101

Now that your head is spinning with all of the browser hacks and workarounds needed to make most of the modern browsers fall in line, it's time to bring some order to the chaos. In the browser world, change is steady, if not rapid. You need to plan for the future and for the eventuality of "retiring" certain browsers. You need to craft a strategy for long-term hack management .

Molly E. Holzschlag wrote an excellent article on long-term hack management for InformIT called "Integrated Web Design: Strategies for Long-Term CSS Hack Management," which you can find at www.informit.com/articles/article.asp?p=170511&rl=1. As her article outlines, you can manage the use of browser hacks and workarounds by making deliberate and thoughtful choices about what hacks you use and how you integrate them with the rest of your CSS. How might you organize your screen media CSS for a site that has the following requirements?

  • Full support for IE 5.5+/Win, Netscape 7.1+, Firefox, Safari, and Opera

  • Degraded support for NN4.x (typography) and IE 5.x/Mac (typography and color)

  • Easy-to-add/change the color information for the site

Sometimes drawing the page out on paper gives the clearest picture. Figure 25-3 outlines one way you might address the requirements.

Figure 25-3. A basic outline of CSS file and rule management


If you start on the left with the (X)HTML page, you see this link to a single CSS file (main.css)

     <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 

That file includes the basic rules you want to show NN4.x and IE 5.x/Mac as well as two @import rules. The first @import uses single quotes (') to hide the import of layout.css from IE 5.x/Mac; the second uses double quotes (") to allow IE 5.x/Mac to see the color.css file.

     /*---------------------------------------------     Main CSS for MySite.com     ---------------------------------------------*/           /* =LAYOUT (HIDDEN FROM IE5.x/MAC USING ') */     @import 'layout.css';           /* =COLOR */     @import "color.css";           /* =START CSS FOR TYPOGRAPHY */ 

Continuing along the outline brings you to the layout.css file, which contains a series of @import rules but little else. Here is how that file might look:

     /*---------------------------------------------     Layout CSS for MySite.com     Notes: This file links to the other files            we need for layout     ---------------------------------------------*/           /* =W3C COMPLIANT BROWSERS */     @import "/css/w3c.css";           /*---------------------------------------------                  HACKS & WORKAROUNDS     ---------------------------------------------*/     /* =IE 6 (ALL RULES BEGIN * html) */     @import "hacks.ie6.css";     /* =IE 5.5 (FILTER) */     @media tty {       i{content:"\";/*" "*/}}@m; @import 'hacks.ie55.css'; /*";}     }/* */ 

Notice how much commenting there is.[*] This ensures that whoever views this filebe it a colleague, client, or a new developer on the projectsees and immediately understands what is going on at any given point.

[*] These code samples also make use of Douglas Bowman's CSS comment flags (www.stopdesign.com/log/2005/05/03/css-tip-flags.html).

Now imagine the site has launched and you see a large influx of users on IE 5.x/Mac, so a decision is made to offer that browser full layout support. Adding it in becomes a snap: you change @import for the layout.css file to use double instead of single quotes:

     /* =LAYOUT */     @import "layout.css"; 

and add the IE 5.x/Mac Band Pass filter under the "Hacks & Workarounds" heading:

     /*---------------------------------------------                  HACKS & WORKAROUNDS     ---------------------------------------------*/     /* =IE6 (ALL RULES BEGIN * html) */     @import "hacks.ie6.css";     /* =IE5.5 (FILTER) */     @media tty {       i{content:"\";/*" "*/}}@m; @import 'hacks.ie55.css'; /*";}     }/* */     /* =IE5.x/Mac (FILTER) */     /*\*//*/       @import "hacks.mac.ie5.css";     /**/ 

Similarly, if the stats showed IE 5.5/Win was not being used and, therefore, not worth supporting anymore, you might simply drop the IE 5.5 filter block altogether.

By organizing your files using this technique (a technique Tantek Çelik dubbed surgical correction ), you can save yourself some grief later. You won't need to hunt through hundreds of lines of CSS looking for a hack you used for a particular problem browser when you no longer need to support it. With your CSS neatly organized and prepared, you can easily remove hacks once they become obsolete, leaving behind clean, hack-free CSS, which is ideal.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net