Is there a way to detect the IE11 and change the whole style sheet?

Question

I would like to know if there is a way to detect IE11 and with an IF make the the HTML page use a different style sheet. I don't want to change it one by one, because it's not so professional.

P.S.: I'm not asking a way to detect IE11(unless you do it in a different way :) )

Thanks in advance.

Representation:

var ua = window.navigator.userAgent;
if (ua.indexOf("Trident/7.0") > 0) { //if IE11
    //(set the style sheet 1)
}else{
    //(set the style sheet 2)
}

<style id="s1"> 
    <!--made for ie11-->
</style>

<style id="s2"> 
    <!--made for google chrome-->
</style>

AFAIK IE11 has a user-agent string you can count on that. be carefull though he *tries* to show up as Firefox — Sharky, May 25 '15 at 11:48
Why you need it? There is no reason for different IE styles. — pavel, May 25 '15 at 11:49
You can check it:- See this answer [enter link description here][1] [1]: http://stackoverflow.com/questions/17447373/how-can-i-target-only-internet-explorer-11-with-javascript — Amit Kumar, May 25 '15 at 11:50
@panther, yeah I need to make more than 11 changes just for the IE11, plus a bunch of little changes (Why corporations are still using IE) — Kyle, May 25 '15 at 11:56
@Calne: which ones? Hacks need people who don't know how to achieve the result without them. — pavel, May 25 '15 at 11:56

score 3 · Accepted Answer · answered May 25 '15 at 11:50

3

Hi you can do something like this in css:

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

this will only show the css you insert in the properties when user is on IE11 or above.

You then can put the rest of the css in

IE 9

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

there is IE8, 7, 6 as well.

i would not recommend having multiple stylesheets for the same page. There is no need just assign them different classes in one stylesheet using the css above and it will work fine.

answered May 25 '15 at 11:50

Josh Stevens

3,943
1
15
22

1

That's what I was looking for, thank you :), would it make the page slower? – Kyle May 25 '15 at 11:59
1

no it wouldn't slow it down. This is the best way you will manipulate the css, no speed implications will happen when you apply this. if it has helped you and does work please mark it as accepted so other people can find the answer to this issue quickly :) @Calne – Josh Stevens May 25 '15 at 12:01
1

done, thank you for understanding what I meant :) – Kyle May 25 '15 at 12:02
1

Great answer Josh. Yet, if style is the only concern then this is really a light weight solution. Also works with IE11 emulating some other version (just tested that). – Yogi May 25 '15 at 12:32

score 2 · Answer 2 · answered May 25 '15 at 12:16

2

Here's another thing you can do for detecting IE:

CSS:

html[data-useragent*='MSIE 9.0'] { /* IE 9 */
  /* CSS */
}

html[data-useragent*='MSIE 10.0'] { /* IE 10 */
  /* CSS */
}

html[data-useragent*='rv:11.0'] { /* IE 11 */
  /* CSS */
}

JS: (At the bottom of body.)

document.documentElement.setAttribute('data-useragent', navigator.userAgent);

answered May 25 '15 at 12:16

VuoriLiikaluoma

364
3
11

This is an interesting answer. I tried placing the JS in the head so that the style is applied before page load ... and it worked okay too. – Yogi May 25 '15 at 12:52

Yogi · Answer 3 · 2015-05-25T12:37:08.840

1

Update:

I really like Josh Stevens' solution which specifically targets css and doesn't require any javascript. However, it's good to know about IE's documentMode too as sometimes you need to load different javascript files depending on the mode (though that's usually for IE<10).

Original: Guess I'd just do it the simple way by using IE's built-in documentMode property

if (document.documentMode == 11) {
    // do something awesome 
}

Just tested this in IE8-11, Firefox, and Chrome ... seemed to work okay.

edited May 25 '15 at 12:37

answered May 25 '15 at 12:08

Yogi

6,241
3
24
30

1

Would you do that to detect only? – Kyle May 25 '15 at 12:12
1

I've used it to detect IE in Quirks Mode where styles and javascript are radically different. I've never had a reason to detect IE11. – Yogi May 25 '15 at 12:21
1

I had to change it, because I created a table with a fixed Header, which's not common, that's why I've got a lot of issues with IE11 (of course it was the least affected). – Kyle May 25 '15 at 12:25

score 0 · Answer 4 · answered May 25 '15 at 11:50

0

Bad news. There is no HTML conditional for IE11. You have to handle it with javascript.

answered May 25 '15 at 11:50

Aitor Alejandro

51
2

2

But is there a way to do that, what I did on the "representation"? – Kyle May 25 '15 at 11:52

Is there a way to detect the IE11 and change the whole style sheet?

4 Answers4