Search code examples
javascriptjqueryinternet-explorermodernizrconditional-comments

Add CSS classes targeting IE browsers: JavaScript or Conditional Comments?

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.

Solution

  • 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!