Conditional style loading in IE10+

I learned this recently when trying to load a conditional stylesheet into an XPage. IE9 worked but IE11 failed on me and I couldn’t see why. It was only a small change so I ended up putting it in the main stylesheet as a media query.

 

Apparently IE10 and above does not understand conditional HTML code like this

  <!--[if IE]>
    This content is ignored in IE10 and other browsers.
    In older versions of IE it renders as part of the page.
  <![endif]-->

http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

So to load a style conditionally in IE11 you can do it like this

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  Add your IE10+ specific styles here
}

thanks to http://www.adaodesign.com/css-styles-for-ie10-and-ie11-only

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s