CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-11
Sachin B. R.
Sachin B. R.

Reputation: 959

How do I specify IE 11 specific css file?

I currently have a page for which I am applying some browser specific CSS styling when user clicks print button using the following html syntax. But the following html code wont apply the css specified for IE11(ie11print.css) instead it applies the css that is specified for rest of the IE versions(ieprint.css). 

<!--[if IE 11]> <link rel="stylesheet" media="print" title="Print" type="text/css" href="/styles/ie11print.css" /><![endif]-->
<!--[if lte IE 10]> <link rel="stylesheet" media="print" title="Print" type="text/css" href="/styles/ieprint.css" /><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" media="print" title="Print" type="text/css" href="/styles/print.css" /><!--<![endif]-->

Does anybody know how to specify a CSS file only for IE11? Thanks in advance.

Upvotes: 4

Views: 10342

Answers (3)

pareshm
pareshm

Reputation: 4984

check for if browser is ie11

then directly add link tag from javascript

         window.location.hash = !!window.MSInputMethodContext;
            if (window.location.hash) 
            {
                var $head = $("head");
                var $headlinklast = $head.find("link[rel='stylesheet']:last");
                var linkElement = "<link rel='stylesheet' href='/styles/ie11print.css' type='text/css' media='screen'>";
                if ($headlinklast.length){
                   $headlinklast.after(linkElement);
                }
                else {
                   $head.append(linkElement);
                }
            }

let me know if any concern. window.location.hash will return true for ie11

Upvotes: 1

Disha
Disha

Reputation: 392

Just add below in your CSS stylesheet and see in Internet Explorer 11

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

Upvotes: 5

rajesh
rajesh

Reputation: 1485

Use the below hack and followed by your css style:

*::-ms-backdrop,

Example:

*::-ms-backdrop,/*Your element*/ {
       /*Your styles*/
    }

Note:It will only affects in IE browsers.So You need to apply your normal style before this.

Upvotes: 6

Related Questions