0

My goal is to remove IE conditional comments from my documents' <head>, but I recognize that I still need to use ie6,7,8-specific stylesheets (correct me if I'm wrong).

For example, these IE conditionals are used by HTML5Boilerplate 3.0:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>   <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

So instead I'm thinking that I'd like to use JavaScript to add classes to my html tag resulting in this (as illustrated here):

<html lang="en" class="ie6 ie7 ie8">

So my question: What are the drawbacks (consequences) of using JavaScript to add CSS classes to my documents' html element versus using IE conditional comments?

One effect I can think of right now:

  1. The IE client may have JavaScript disabled. For me this isn't a problem; clients visiting my site are required to have JS enabled.

EDIT: I'm going to go ahead and concede that the most reliable way to add those classes is (sadly) to use IE conditional comments. Thanks all for the dialog.

Jeff
  • 5,535
  • 13
  • 43
  • 72
  • 1
    Why is your goal to remove conditional comments? Is it really that important? – AlienWebguy Jun 28 '12 at 18:14
  • It's purely personal preference. If I can remove them, I will! =) – Jeff Jun 28 '12 at 18:14
  • And how are you going to detect ie from javascript ? – Jashwant Jun 28 '12 at 18:25
  • @Jashwant navigator.userAgent or jQuery does a better job I'm sure with $.browser – Ian Jun 28 '12 at 18:27
  • Detecting IE with JavaScript is easy. See my link "as illustrated here" above for an example. – Jeff Jun 28 '12 at 18:28
  • @ianpgall , from [$.browser](http://api.jquery.com/jQuery.browser/), `We recommend against using this property` – Jashwant Jun 28 '12 at 18:30
  • @Jashwant I understand that, but that's how you determine the browser from javascript...what you asked. I understand the spoofing as pointed out, but that's the only way with javascript. If the user spoofs, it's their fault. – Ian Jun 28 '12 at 18:31

3 Answers3

5

Another thing is, JavaScript alone is not a good idea to perfectly detect the browsers. Have you heard of User Agent Spoofing? JavaScript detects a browser by User Agents. But, if a browser comes with a spoofed User Agent, then Firefox can act like Chrome. Hope you get it!

Praveen Kumar Purushothaman
  • 154,660
  • 22
  • 177
  • 226
1

From the same link you have given,

  1. You don't load the rules that won't be applying because they're not for this browser.
  2. You don't depend on a technology that can be turned off independently of CSS.
  3. You don't depend on a technology where a syntax error could temporarily break your browser detection.
  4. There's no sense in wasting browser time setting the relevant class and recalculating the styles everywhere. Yes, this time is essentially unnoticeable, but from a 'dirty vs clean' stand point I think that make it dirtier.

I personally think , you shouldnt rely on sniffing userAgent and should not load the unnecessary css rules for ie only.

Jashwant
  • 26,663
  • 15
  • 65
  • 99
0

Why can't you add a seperate style sheet with IE specific design for the required classes instead of adding more classes to the html element. You can also refer http://paulirish.com/2009/browser-specific-css-hacks/ where in one css file you can target all the browsers with the css hacks. This would also solve your initial purpose of removing the IE specific condition from the html head tag

user850234
  • 3,003
  • 14
  • 42
  • 79
  • Yes, I have been doing that using an ie-specific stylesheet "ie.css", but I've been loading it using IE conditional comments so other browsers don't choke on it. – Jeff Jun 28 '12 at 18:30
  • You can refer the link in my answer where it is metioned how to target different versions of IE from single css file along with other browsers. Adding and removing classes has sometimes very nasty behavior especially in IE where it slows down the processing – user850234 Jun 28 '12 at 18:32