Saturday, December 29, 2012

IE10 does not have conditional comments anymore

Probably old news for many of you. Internet Explorer 10 will totally ignore your code similar to this one:

   <!--[if IE]>
  
  <![endif]-->

After some search I found the topic on stackoverflow.com: http://stackoverflow.com/questions/9900311/how-do-i-target-only-ie10-for-certain-situations-like-ie-specific-css-or-ie-spec/14087321#14087321
You can also read my reply there.

Why do we have to address it? The problem is IE10 has its own rendering engine which differs from other browsers, and some specific css styles still require special handling in case of IE10.
The solution for css styles will be using document.documentElement - the root element associated with any document, documentMode property of IE, which says how IE interprets and renders the document, and @cc_on Statement, which activates conditional compilation support in JavaScript in IE.
You include the next one-line script inside of head tag of your html page before your css link.


Then in css file you specify your styles as descendants of "ie10" class:

.ie10 .myclass1 { }

And voilĂ ! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.

2 comments:

  1. I've written a small, vanilla JavaScript plugin called Layout Engine, which allows you to feature detect IE 10 (and every other browser), in a simple way that cannot be faked, unlike user agent sniffing.

    It adds the rendering engine name as a class on the html tag and returns a JavaScript object containing the vendor and version (where appropriate)

    Check out my blog post: http://mattstow.com/layout-engine.html and get the code on GitHub: https://github.com/stowball/Layout-Engine

    ReplyDelete
    Replies
    1. Matt, I looked at your LayoutEngine script. Very good job! I totally see its value, and can use it in my future projects. Thank you!

      Delete