Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading css (stylesheet) ONLY for IE11 [duplicate]

I want to load a css file only for IE11 browser. How can I do it?

I understand that I can use conditional comments to load stylesheet's for IE <=9. But not for IE 10 & 11.

I could Google and find an alternative as below :

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}

But, it loads for both IE10 and IE11 browsers. I want to load stylesheet only for IE11. Is it possible?

Thanks

like image 574
Shubh Avatar asked Dec 30 '14 10:12

Shubh


People also ask

How to add ie specific style sheet in CSS?

It is very challenging to write only one CSS file to target all the browsers, especially to target IE. We can add the IE specific style sheets using conditional comments. So we have to add one global CSS file for all browsers, and one for IE only to override or add styles specific to IE. Conditional comments work as follows:

Does this stylesheet work with other browsers?

The above stylesheet works only for the Internet Explorer browser and there is no effect on the other browsers like Chrome, Mozilla, etc. If you want to add style or define CSS which works for all the web browsers except Internet Explorer.

How to define CSS only for Internet Explorer (IE)?

How to Define CSS Only for Internet Explorer and Add IE-Only Stylesheet. You can add IE defined the only stylesheet by using the conditional comment inside the <head> tag as given below. Use the starting tag <!--[if IE]> and the closing tag !<[endif]-->.

What CSS features are not available in Internet Explorer 11?

For example, some common CSS features are not available with IE11: Using SVG for favicons - you will have to resort to using the .ico file type. CSS flex layouts. Flex layouts needs to be reviewed when in IE11. As an example, in flex you can space elements evenly with CSS justify-content: space-evenly. This is not available in Internet Explorer 11.


1 Answers

If it's only IE11

@media all and (-ms-high-contrast:none)
 {
 .foo { color: green } /* IE10 */
 *::-ms-backdrop, .foo { color: red } /* IE11 */
 }

If you're targeting IE 9, 10, 11 you can try

@media screen and (min-width:0\0) { 
    /* Enter CSS here */
}

If it's for IE10+

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

Also, a google search came up with this

_:-ms-fullscreen, :root .ie11up { property:value; }
like image 90
paul Avatar answered Sep 25 '22 22:09

paul