Way 2 Web

Web development tips


 
Hacking CSS

Cross-browser CSS

The bad news is that CSS isn't implemented the same way across browsers.

The good news is, well, I'm afraid there's not much good news. Browser manufacturers are making an effort to standardize, and move a little closer to web developer utopia.

With the practical demise of Netscape, the major CSS offender, you'll need to test on fewer browsers too: IE and Firefox, possibly Opera and, if you're really feeling energetic, Safari and IE for Mac.

It's a question of how obsessive-compulsive you're feeling.

What's a developer to do?

Until then, we just have to deal with it. Choose designs that won't end in browser civil war and, where necessary, make use of browser-specific conditional statements.

For example,

<!--[if lt IE 7]>
    <style>...</style>    
<![endif]-->    

Worst case scenario, your page will look slightly different in IE and Firefox. You should still sleep at night.

To hack or not to hack?

Then you'll read up on these realy cool and sly "CSS hacks" that bring browsers to their knees.

You'll see code like this:

div.content {
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px; 
}    
html>body .content {
  width:300px;
}

You'll be tempted to use hacks to get just the right look across all browsers.

Don't give in to temptation. These hacks rely on unintended side-effects. Browser makers feel no obligation to support this behavior. In fact, they strive to eradicate these "bugs."

And so, with the next browser release, you may find many such pages "broken" and you'll have to go back to the drawing board.

In short: not to hack.

References