Search code examples
cssinternet-explorermedia-queriesstylesheet

IE 10 specific CSS


Can I have CSS which is IE specific?

In this situation, I can't include another script.

So I can't do this:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

and this does not work:

<!--[if IE]>
    <style>
        @media only screen and (min-width: 943px) and (orientation:portrait){
            .ele{
                width:100px;
            }
        }
    </style>
<![endif]-->

Is there any other way of adding IE specific CSS?


Solution

  • 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