CSS hacks and filters (was RE: [thelist] NN4.x and IE4.x)

Saila, Craig csaila at globeandmail.ca
Fri Jul 25 08:52:02 CDT 2003


rudy wrote:
> besides, needing to use a css hack is symptomatic of a deeper
> problem, which is usually the (often misguided) desire to make things
> look "the same" in all browsers  

That's very true (and this whole thread encouraged me to a write a brief
piece about the topic), but like all things, it's a double-edged sword.
In many commercial sites, it's impossible to get anything done unless it
looks "identical" in all browsers.

We all know the fallacies in such logic (right?), but it can be one of
the necessary evils that allow sites to abandon nested tables,
pixel-shims, and other David Siegel-inspired atrocities.

Limited use of them, can however be simple to maintain and use, if
properly done (which I don't always do). 

First, I'd suggest avoiding what I call "CSS hacks" (i.e., the ones that
exploit a bug in the browsers rendering engine), and encourage the use
of "CSS filters" (i.e., the ones that exploit a CSS feature a browser
has yet to support) whenever possible.

As an example, Caio's Hack exploits a bug in that prevents Netscape 4
from rendering a rule. However an @import, or preceding a rule with
"html" (e.g., "html body { margin: -10px 0 0 -10px; }")  is a great
example of progressive enhancement:
<http://hotwired.lycos.com/webmonkey/03/21/index3a.html>

Also, when using them, it's a good idea to include a comment explaining
what they do: 
 body { margin: -10px 0 0 -10px; } 
 html body { margin: 0; } /* resets the margin for non-NN4 browsers */ 

Of course, this requires discipline and a bit of time...

-- 
Cheers,

Craig Saila
------------------------------------------
craig at saila.com : http://www.saila.com/
------------------------------------------ 


More information about the thelist mailing list