Something like the code below then? I have created it as a fully
automated plugin so all you have to do is include the code and it
runs on doc ready without doing anything more. I didn't see the point
in making it chainable or applicable to elements other than the body
element. This is only an outline - you would probably want to add
checks to distinguish between IE6 and IE7:
(function($) {
$.browserTag = function(){
var browserTag';
switch (true){
case $.browser.msie :
browserTag = 'msie';
break;
case $.browser.mozilla :
browserTag = 'mozilla';
break;
case $.browser.opera :
browserTag = 'opera';
break;
case $.browser.safari :
browserTag = 'safari';
break;
default :
browserTag = 'unknownBrowser';
}
$('body').addClass(browserTag);
};
$($.browserTag);
})(jQuery);
Personally I wouldn't use something like this as I want the CSS fixes
to occur when JavaScript is not available. Tying CSS fixes to
javascript (although I have been guilty of it in certain
circumstances) stretches my definition of graceful degradation a
touch too much when there are other methods I could use to ensure the
presentation works perfectly without JS. I just prefer to find
solutions that do not require browser specific hacks, which usually
is doable except for known IE problems, which I use conditional
comments to serve fixes for.
Joel Birch.
On 05/04/2007, at 1:48 PM, Glen Lipka wrote:
Feedback desired:
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.
A simple plugin could be written (has this already been written?)
that tags the BODY (or other node) with a "browser class" resulting
in:
<body class="FF"> or <body class="IE6"> or <body class="Saf"> or
whatever. Then your CSS would be:
body.ie6 div.troublesome {height: 100%} rather than
* html div.troublesome etc
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.
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.
What is your opinion?
Anyone want to write a plugin that allows for $("body").browserTag()?
Personally, I think this would be a cool thing in the basecode, but
I wont push it.
Glen
