[jQuery] Body Browser Classes

[jQuery] Body Browser Classes

<div>Feedback desired:</div>
<div> </div>
<div>Lately, I have been developing CSS and HTML for a deep Web 2.0 complex app.  Usually, I avoid CSS hacks like the plague.  But recently, I have had to resort to the Holly Hack or the StarHTML Hack.  But then it occured to me that jQuery provides a better way.
</div>
<div> </div>
<div>A simple plugin could be written (has this already been written?) that tags the BODY (or other node) with a "browser class" resulting in:</div>
<div><body class="FF"> or <body class="IE6"> or <body class="Saf"> or whatever.  Then your CSS would be:</div>
<div> </div>
<div>body.ie6 div.troublesome {height: 100%} rather than</div>
<div>* html div.troublesome etc</div>
<div> </div>
<div>This makes your CSS avoid bizarre invalid hacks and use normal "conditional" classes that are self-documenting.  Everyone knows that body.IE6 means you are adjusting for browser differences.  And jQuery is much better at detection than crazy hacks.
</div>
<div> </div>
<div>I wish all my CSS could do it right and find the common ground that all the browsers love.  But this seems like a better way.</div>
<div> </div>
<div>What is your opinion?</div>
<div> </div>
<div>Anyone want to write a plugin that allows for $("body").browserTag()?</div>
<div>Personally, I think this would be a cool thing in the basecode, but I wont push it.</div>
<div> </div>
<div>Glen</div>