I’ve seen a few times some conditional markup comments as so:
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if (gt IE 6)|!(IE)]> <!--><html lang="en" class="no-js"> <!--<![endif]-->
-- head and body --
</html>
I can understand using conditional blocks to load different css or js libraries for targeted browsers, but what is the benefit in adding a different class name the <html> tag?
The benefit of using conditional statements is you can target IE using one stylesheet and JavaScript without worrying about extra syntax to do the same job, it has been long debated whether or not it’s good or not for performance but personally i have never noticed any speed differences between using and not using them.
Whether you use them or not is up to you but personally i always recommend them where i can as it really helps when trying to fix bugs in IE without worrying about updating up to 3 separate stylesheets depending on your target browsers.
To me I see no benefit as if your page needs that level of targeting for every blasted version of IE, there is something DISASTROUSLY WRONG with how you wrote the page. (I’m the same way about conditional comments when used to load stylesheets!) It’s massive bloat used as a crutch by people who can’t be bothered to write pages properly or are bloating out the simplest pages with scripting and “gee ain’t it neat” nonsense for no good reason.
I cringe every time I see it almost as much as I cringe every time I see the HTML 5 lip service doctype… It’s pretty much the mark of people who don’t know how to write code properly and need to go back, and learn how HTML and CSS actually works. Really it seems to be for the same folks – the ones who continue to vomit up HTML 3.2 and until recently were slapping a tranny doctype on it, and now slap a 5 on it while still having their head permanently wedged up 1997’s backside.
In other words, the same type of coding I expect from people who still don’t use media targets, inline massive amounts of CSS in every page with the STYLE tag, don’t know how to use heading tags properly with multiple H1 and skipping over heading levels, still using tables for layout on non-tabular data, still use tags like FONT and CENTER, and the dozen other things that basically say “Hey look, we’re in transition from 1997 to 1998”
See: People who let turdpress dictate their markup or think PHP-Nuke is the best thing since sliced bread.
I can’t say enough of much I agree with you (and I think “tranny doctype” is now a part of my everyday vocabulary), but the big counterpoint is that Paul Irish loves this technique. He argues that when you do something like this, you no longer need CSS hacks or conditional stylesheets.
You still end up with the same number of conditional comments in the HTML. Where it makes the difference is that you only have one stylesheet instead of one for each alternative condition. That’s what makes it easier to maintain.
Of course now that IE6 is effectively dead and IE7 is rapidly dying it shouldn’t even be necessary for much longer as IE8 supports as much CSS 2.1 as the other browsers do and all the CSS 3 are nice to have features that pages can still work without when viewed in browsers that don’t support them.
… and? given you’re talking about the guy who’s site is all in absurdly undersized px metric fonts in fixed width with non-existant and/or nonsensical heading orders, invalid/inaccessibly forms, saying he has no business writing HTML in the first place… Wasting bandwidth on massive comments and like most coders who are stuck in 1997 slaps DIV around everything for no good reason and pimping jquery like it’s actually useful – Excuse me if that doesn’t blow my skirt up. Honestly having seen the things his name is attached to, I’m still trying to figure out how the blue blazes he became a “name” in this industry… Gotta love the 255K of HTML to deliver 68k of plaintext. (basically doing 110k’s job) with a hundred + K of scripting slapped on top for NOTHING that seems to be his bread and butter.
Which sounds all rosy until you realize it’s more code, more code someplace that isn’t cached across pages or able to be pre-fetched on firstload, and to be brutally frank (ME? Never…) sounds like the type of thing I expect from someone who builds sites using broken methodologies with CTC’s in excess of three to one and then blames the browser for their own ineptitude or ignorance.
It’s WHY I don’t like CC’s – it’s stuff that has no business in the HTML in the first place! Using it on HTML and then claiming it saves you from using them? Shtup the snake oil, that’s some real special kool-aid right there.
Actually, for laughs – I’m going to use someone’s page I just did a rewrite on as an example – if I took just the IE specific code out, WITH it’s comments:
text-align:center; /* center #pageWrapper IE 5.x */
* html body {
/* get :hover and :focus working in IE6- */
behavior:url(csshover3.htc);
}
display:inline; /* prevent IE margin doubling */
display:inline; /* prevent IE margin doubling */
zoom:1; /* trip haslayout, fix IE after float bug */
.
304 bytes… The full blown “for every IE” nonsense I’ve been seeing lately?
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
224 bytes in the markup where it ISN’T CACHED ACROSS PAGES, and I’d STILL have to declare all those properties someplace! Meanwhile if you’re talking for scripting – that’s browser sniffing instead of capabilities detection – which just means somebody doesn’t know how to write javascript.
Snake oil…
Meanwhile OH GODS NO!!! NOT one text-align, display:inline on two floated elements and zoom:1 to fix positioning of a few things all the way back to IE 5.x!!! WAH WAH WAH