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.