Targeting IE without conditionals

Posted on 1st August 2014 in Code, Tips.

Since the release of IE11, Microsoft have confirmed that they have discontinued conditional comments. This means that you can no longer fix bugs for certain versions of IE without using some form of feature detection or parsing the user agent string, since IE11’s document mode doesn’t emulate the support of conditional comments.

Parsing user agent strings is generally frowned upon, so feature detection is the best way forward. Using a JavaScript feature detection library such as Modernizr allows you to detect certain features that the browser in use supports. Once it has run the tests required on your browser, Modernizr will add the results of the tests to your page’s HTML tag, in the form of classes.

Using Modernizr, you can target specific versions of IE by using the following classes:

  • .no-flexboxlegacy.webgl – IE11 (credit to Matt Royce)
  • .websockets.no-webgl – IE10
  • .canvas.no-websockets – IE9
  • .hashchange.no-canvas – IE8
  • .no-hashchange – IE7

You can also test these classes in action by clicking here, remember to view the site on Internet Explorer and then change your document mode.

Tags

Sharing