Simplifying CSS hacks.

There are many different ways to go about writing your CSS code and at times it’s quite amusing to watch the firefights over who’s approach is THE approach. Like with Rome, there are many ways and different ones that lead to success and at this point I have come to a workflow which has proven to be the most uncomplicated and smoothest approach for myself:

First, design the site for Firefox – this is, if you need to pay attention to the PC world, what still is the case for most businesses – do the layout and build your CSS. Once it works in Firefox, check it out in IE7 on XP and adjust as needed to fix the glitches you will find. Then, face the beast and fire-up IE6 and workout it’s kinks. Last, but not least, take a look how the site looks in Safari on the Mac and adjust as needed.

When it comes to CSS code writing I use the same approach. My ‘normal’ ID’s and classes will not contain hacks and I also do not use a conditional line in the HTML header to address browser specific problems.

To fix and hack away I use the following format:

#idName { 
/* the following is the non-modified styling code */
height: 150px;
}

html*#idName {
/* this group is for all the browser specific hacks as needed */
height: 152px; /* Safari */
*height: 155px; /* IE7 */
_height: 145px; /* IE6 */
}

And this is all that is to it.

I do take into account that the “html*” hack gives browsers a bit of a hiccup, but in the end it keeps all the ‘special rules and hacks’ clean into their own little groups and easy to track down.

And, to make the road even smoother, do the Firefox-IE-Safari circle over and over again and move through all the browsers after each step (basic layout, section completion, further fine tuning), this will prevent a lot of time consuming debugging later on which you undoubtedly will encounter if you first build the site completely in one browser and only then go checking how it looks in the other ones.

CSS3 Selectors: is your browser compatible?

If you want to know which CSS3 selectors will work with your browser there is a quick way to test it. CSS3.info has created a page which runs the test and all you have to do is point your browser to http://www.css3.info/selectors-test/test.html and the test automatically runs.

? Running Safari 3.1.2 under Leopard resulted in all 43 selectors and all 578 tests passing.
● Explorer 6 on XP resulted from 43 selectors only 10 passed, buggy and 32 are unsupported (Passed 276 out of 578 tests).
? Firefox 2 on XP showed from the 43 selectors that 26 have passed, 10 are buggy and 7 are unsupported (Passed 357 out of 578 tests).

I did not expect more from IE6 but that Firefox2 was not up to snuff with Safari, this did astonish me a bit.