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
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:
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 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]-->.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With