Ie10 Stylesheet

How to add CSS Hack specifically for IE10?

You can easily track the latest versions of IE (mostly IE 10 and IE 11) using

1. CSS media query hack:

/* 
    #ie10,11 will only be red in MSIE 10, 
    both in high contrast (display setting) and default mode 
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   //-- Put your IE specific css class here 
}

OR

@media screen and (min-width:0\0) {  
    /* IE9 and IE10 rule sets go here */  
}

Read this

Working Example

2. Browser Detection:

if ($.browser.msie && $.browser.version == 10) {
  $("html").addClass("ie10");
}

3. Using script (NOT Tested):

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write('<link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >

Note : I know document.write is considered bad practice.

Conditional comments (ie10 dropped conditional comments):

if you want to load external css file for IE, you can use conditional comments. But as you mentioned in question you wants for IE 10 and ie10 dropped conditional comments.

microsoft drop conditional comments in ie10.

IE 10 specific CSS

You can try this,

IE6 Only
==================
_selector {...}

IE6 & IE7
==================
*html or { _property: }

IE7 Only
==================
*+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector.

IE8
==================
.selector/*\**/ { color:#f00; }
**NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/

IE8 and IE9 (TOTALLY NOT NEEDED - I LEFT HERE FOR REFERENCE ONLY)
==================
.selector { color:#f00\9; } - http://stackoverflow.com/questions/660652/ie8-css-selector

The above solution doesn't work with font-family, so instead you need to use "\0/ !important"
Example: { font-family:Arial \0/ !important; }          
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

Also, using "\9" is picked up by IE10 and IE11 so you need to redeclare the CSS rules with "-ms-high-contrast:". See info below.

IE9 Only
==================
:root .class/#id { property:value \0/IE9; }
**NOTE**: Prepos v4.0.1 shoots out an error when compiling the CSS if you use this hack :/
http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

IE10 Only
http://css-tricks.com/ie-10-specific-styles/
==================
Use this JavaScript: 
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

Then use this CSS:
html[data-useragent*='MSIE 10.0'] h1 { color: blue; }

IE10 and IE11
==================
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .selector { property:value; }
}

Refer https://gist.github.com/ricardozea/5549389

using different stylesheet for IE10 and IE11

Per MSDN:

Important As of Internet Explorer 10, conditional comments are no longer supported by standards mode. Use feature detection to provide effective fallback strategies for website features that aren't supported by the browser.

@yglodt you can not differentiate between 10 and 11 as 10 -- dropped support.

Looked over fallback strategy, not very impressed - you will test for feature availability.

You can use any language (JavaScript, PHP, Python, etc) to check agent and take action. Not the best, but works in desperate mode.

IE10 does not support stylesheet link in iframe

innerHTML of head is read-only in IE, the snippet below does the trick:

$('#dialogIframe')
    .contents().find("head")
    .append($('<link rel="stylesheet" type="text/css" href="/css/main.css">')
);

---

Just in case somebody would need to do this with pure JavaScript, here's the code:

var doc = document.getElementById('dialogIframe').contentWindow.document,
    sheet = doc.createElement('link');
sheet.rel = 'stylesheet';
sheet.type = 'text/css';
sheet.href = '/css/main.css';
doc.documentElement.appendChild(sheet);

Why IE10 loads older IE version stylesheet

As per my comment, load the normal stylsheets.

Then add a media condition in for mobile.

And then load IE9 or less stylesheet

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">

<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='screen and (max-device-width: 480px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='screen and (max-device-width: 480px)'>

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->

How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

Perhaps you can try some jQuery like this:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

To use this method you must include the jQuery Migrate library because this function was removed from the main jQuery library.

Worked out quite fine for me. But surely no replacement for conditional comments!

---

Related Topics