Browser Specific CSS Rules

Here is an idea that I had, when I was designing a website for a friend, about CSS standards and browser implementations. Opera, Safari and konqueror all render extremely well; Firefox is pretty good but still has some bugs; and Internet Explorer just sucks ass. I always have to break the standard by adding special '_' css rules that only IE parses. It annoys me slightly because it is not standards compliant, but it is incredible useful because I can now override the real rules with special IE rules.

This got me thinking, why doesn't this exist for every browser. Lets put asside notions of a perfect world where ever browser renders each page exactly because that will never happen. There will always be bugs and differences between browsers. The current solution is to use hacks that exploit bugs in the parsing engines or to detect the browser and pass it a special .css file. Hacks, like the box model hack shown below are not good solutions.

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

html>body .content {
  width:300px;
}

Now imagine being able to use a simple single css rule instead of the hack?

div.content {
  width: 300px;
  ie5_width: 400px;
}

Browser directed rules could be any valid CSS rule but with a special browser specific prefix. This prefix could consist of a browser code (IE, MOZ, FF, SAF, OP, KON, etc.), optionally a verions number and an underscore ('_').

Examples:

op_border: 4px;
ie_width: 400px;
ff1.5_padding: 4em;

If every browser implemented a scheme like this it would be much easier to work around their quirks and bugs. It would also be much cleaner than resorting to hacks.