On the surface, developing with CSS is relatively easy. But then the reality of browser compatibility issues strikes and things become difficult for all the wrong reasons.
This forces the developer to choose one of four options.
- Try to re-implement all or part of the CSS so that it avoids the compatibility problems.
- Dump the entire feature that is causing the compatibility problems.
- Use CSS hacks.
- Use conditional comments.
People tend to get religious about the above options. Some only use CSS hacks, others only use simplified CSS that works everywhere. A lot of people loath conditional comments. Whatever your religion, there are some undeniable facts.
Riddling CSS files with CSS hacks is bad for two reasons.
- It creates a minefield for future browser developers who have to ensure that new browsers don't break when they encounter the CSS hacks.
- It makes the CSS files difficult to read and update.
Riddling markup files with conditional comments is bad because it also makes the code difficult to read and update. But it won't create a minefield for future browser developers.
With the above points in mind I tend to proceed as follows.
1. I try to avoid browser compatibility issues by refactoring the CSS to a point where it works everywhere.
I recently had to sort out a problem where an unordered list being used in a horizontal menu was causing placement problems on IE 5.5. The list item tags were being set to display as inline in the CSS style. By changing a single line of CSS (from display: inline; to float: left;) I managed to avoid the problem and the code worked in IE 5, up to 7, Firefox 2, Safari and so on.
2. If I can't avoid a browser compatibility issue, I use two conditional comment statements in the markup, and style overrides in the CSS.
When I was setting up the CSS for this blog, I was unhappy with how the page resized in IE 5, 5.5 and 6. By adding two conditional comments to the markup, I was able to provide any number of CSS style overrides to correct the problems. Specifically I added two conditional comments that wrapped the entire page markup as follows.
<body>
<!--[if lte IE 6]> <div class="ie6-below"> <![endif]-->
<form id="Form1" runat="Server">
...
</form>
<!--[if lte IE 6]> </div> <![endif]-->
</body>
Then, I added style overrides in the CSS file where I wanted to correct problems. CSS specificity guarantees that my overrides will take priority over the original styles. For example, below are two styles, one that applies to IE versions 6 and below, and the original style to be used everywhere else.
.container
{
min-width: 1016px;
max-width: 1160px;
margin-left: auto;
margin-right: auto;
}
.ie6-below .container
{
width: 1116;
}
Once the two conditional comments are added to the markup you can override as many styles as you like in your CSS files. These overrides are explicitly defined and don't make the CSS files hard to read.
3. As a last resort, I'll use a CSS hack.
I've seen all of the above problems before with Java ME while leading development at Upstart Games. Java ME is a small simple language that should run everywhere. It doesn't. Not even close.
We solved all of our Java ME porting problems (porting to 700 handsets on some projects) using a middleware solution based on conditional code. The first version of this got a little out of hand because we relied too heavily on conditional code and hacks. The second version was a huge improvement. Conditional code was kept to an absolute minimum. There were no hacks.