Using hacks while designing a website based on CSS and XHTML is certainly an untamed reality. We all do it. I learnt it the hard way! When I started out with CSS and XHTML, I had a number of problems piling up with a number of Web 2.0 projects. A lot of googling for a LOT of time, I came across a lot hacks, some that worked, some that used to work and some that never worked, but I did have to use or come up with CSS hacks for making my clients happy. Funny what the stomuch makes you do eh?

CSS Hacks a harsh reality

The harsh reality is that hacks, doing more than helping you fix one CSS rendering problem, create more for you. Some of you migh debate this, but how many of us haven’t gone through times when browsers like Chrome were launched by Google, no offence, but I had to rush and check all my work to see how it rendered in chrome. For e.g look at this website itself in chrome, the top links still look a little wierd! There have been other times when browsers like FireFox update themselves and some of our previous hacks, stop working.

Hacks are good, but…

Precisely for reasons like these, I tried learning how to avoid the use of CSS hacks and still work the design right. I agree, Hacks provide a very systematic approach to handling discrepancies where various flavors of browsers are concerned and these little code snippnets do give us proper CSS fixes, but they still bloat up the CSS code and some may not be XHTML standard compliant. Whenever I use a CSS hack, I always think of me as being incapable of conjuring up a more elegant way of addressing the problem fixed by the CSS hack. Another baddie about using CSS hacks is as mentioned maintaining them throughout the life of the web design, for new and old browsers.

Today I go to great lengths to ensure that I avoid using CSS hacks and keep my code as simple and complain with the W3C, along with negligible or no maintaining trips invovled.

Design Considerations to avoid CSS hacks

#1 Avoiding precise pixel dimensioning in your design: In my experience of designing websites, whatever it may be, I have come across using most hacks where defined width and height dimensions using pixel size. Try and design a page that renders the same no matter what browser one uses. You would not require a css hack when your design can easily address design inconsistancies and still look the way you intended too.

#2 Integrate the code behind with your design: I learnt this, again, the hard way. It is much better to make your design work with your code hand in hand. Revisit and redesign every page element if you have to, but avoid using a CSS hack. If you are serious here, you would want to think of the entire process of designing and coding as one single process, instead of thinking of them separately. This would also make you go cycle around the code and the design with mulitple iterations, each refining your code and you design further. Do not approach coding separately than design.

#3 Design with limitations kept in mind: No! I am not asking you to design thinking you have limitations imposed on you because of browser descrepancies. I am saying that find a way to overcome these limitations, without using CSS hacks. If you can not for now, then work within the scope of limitations imposed on you and come back and work on the overcoming these from a complete design point of view. I, for one have always thought of overcoming these limitations, what was more compelling and interesting was thinking of working within the constraints set by browsers descrepancies and still being able to get the desired design to look and feel the way the client or I wanted to. So look at it from a challenging point of view.

#4 Select you css hacks: If you are in precarious position where you have to use a CSS hack, then I would suggest you use the hack for IE and you use the *html selector hack, avoid using the comment characters and comment based hacks within your CSS. I would also go ahead suggest, from personal experience, that any hacks used within your CSS, should be well documented so that six months later if the hack does not work anymore of needs be changed you know what you did!

Resources

Here is how to avoid CSS hacks where IE is concerned…
Further Reading@ http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx