How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

Question

I tried this, but it doesn't work:

<!--[if IE 10]>    <html class="no-js ie10" lang="en"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Internet Explorer 10 ignores the conditional comments and uses the <html lang="en" class="no-js"> instead of <html class="no-js ie10" lang="en">.

Any type of situation. Particularly, I have a CSS situation on my hands. I have some CSS that looks nice in webkit, but hideous in IE10. — trusktr, Mar 28 '12 at 02:32
I think a better question would be : How do I get this CSS to look the same on both browsers ? — BentOnCoding, Mar 28 '12 at 02:51
That might possibly be another option, but technically no, because I want to be able to target IE10 for certain scripts as well. — trusktr, Apr 01 '12 at 04:21
IE10 PP4 Still supports the [`@cc_on` statement](http://msdn.microsoft.com/en-us/library/8ka90k2e%28v=vs.94%29.aspx). So, to detect whether IE10 is supported or not, you can use the following code: ``. *(I posted this as a comment, since IE is still in development, so it's not known whether the final release supports this feature as well)* — Rob W, May 13 '12 at 11:14
@trusktr As painful as it may be to hear this, you appear to be doing things *incorrectly*. Post your CSS, and/or your JavaScript and I'm sure we can demonstrate proper alternatives for cross-browser compatibility. IE10 *should not* require any special attention. — Sampson, Jun 04 '12 at 14:49
@RobW - Your example code will be wrong once ie11 is out. Improved version: `` Improvements: doesn't need conditional comments; works even if comment stripping compression/processing; no class added for ie11; will work with ie11 running in ie10 compatibility mode; doesn't need standalone script tag (can just be added to other javascript in head). — robocat, Dec 06 '12 at 23:21
Example of the above code snippet: http://jsbin.com/upofoq/2 — robocat, Dec 06 '12 at 23:29
A more generic solution is: `if(document.documentMode) document.documentElement.className+=' ie'+document.documentMode+'mode';` - which solves 90% of issues (sometimes compatibility modes fail, in which case you need another level of fix on top of that). — robocat, Dec 06 '12 at 23:40

Roni · Answer 1 · 2015-09-25T20:39:44.183

132

I wouldn't use JavaScript navigator.userAgent or $.browser (which uses navigator.userAgent) since it can be spoofed.

To target Internet Explorer 9, 10 and 11 (Note: also the latest Chrome):

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

To target Internet Explorer 10:

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

To target Edge Browser:

@supports (-ms-accelerator:true) {
  .selector { property:value; } 
}

Sources:

edited Sep 25 '15 at 20:39

answered Feb 16 '13 at 23:48

Roni

3,196
3
18
27

That's real nice. But how concerned should we be when testing various document modes against browser modes in IE? In what situations can we expect online users to use a different document mode from their current browser mode? – klewis Apr 05 '13 at 14:19
people don't usually change the document mode. They can, but I haven't come across any site that required the user to change the document mode. If you are using the correct DOCTYPE this isn't an issue at all. – Roni Apr 05 '13 at 16:18
3

You are my hero! Just a note, This also fixed some stuff messed up in IE11 – locrizak Dec 02 '13 at 16:49
8

This affects also IE11 - so if you're looking for solution to target only IE9/10 this one won't work :-( – Lukasz Lenart Mar 13 '14 at 09:15
1

What do you mean by "all of them are detecting the browser via `navigator.userAgent`"? Conditional compilation is a built-in feature of the JScript runtime, which cannot be spoofed via the user-agent string. – BoltClock May 22 '14 at 03:03
@BoltClock I was talking about jquery $.browser solutions that other people suggested. Conditional Compilation is a solid way, but in JS, not in CSS - I have edited my answer to clarify that - thanks for the input :-) – Roni May 22 '14 at 05:51

score 111 · Answer 2 · edited Apr 07 '13 at 15:28

111

I found a solution on this site where someone had a valuable comment:

The solution is:

if (Function('/*@cc_on return document.documentMode===10@*/')()){
    document.documentElement.className+=' ie10';
}

It

doesn’t need conditional comments;
works even if comment stripping compression/processing;
no ie10 class added in Internet Explorer 11;
more likely to work as intended with Internet Explorer 11 running in Internet Explorer 10 compatibility mode;
doesn’t need standalone script tag (can just be added to other JavaScript code in the head).
doesn't need jQuery to test

edited Apr 07 '13 at 15:28

Peter Mortensen

28,342
21
95
123

answered Dec 20 '12 at 12:13

Willem de Wit

8,216
8
54
88

1

What's the advantage of using this over `navigator.userAgent`? – dave1010 Feb 05 '13 at 12:55
3

@dave1010 User agents can easily be spoofed. Conditional comments are only supported by the JScript engine, which is only available in IE4+ (including 10). – Rob W Feb 06 '13 at 18:08
@RobW there's nothing stopping someone writing a browser extension to read the conditional comments (though this is harder and less likely than changing the user agent). My point is that you can't fully trust the browser, so why do something complex and non-standard? – dave1010 Feb 08 '13 at 11:48
2

@dave1010 Writing a working parser which does what you're describing is difficult and extremely unlikely. Anyone who deliberately creates and installs such an extension is most likely intending to "act like" IE (perhaps for automated testing purposes on non-Windows environments?). 100% trust is never guaranteed in browsers, but you can get sufficiently close. Conditional comments are a highly reliable way to detect the JScript engine, which happens to be used by IE. – Rob W Feb 08 '13 at 14:20
3

only disadvantage I can see is that it requires js, which conditionals didnt – James Westgate Mar 21 '13 at 09:23
It requires JS, but I suppose people have JS enabled these days... ;) – Willem de Wit Mar 21 '13 at 09:34
4

This should be the top answer, and the JS requirement should be moot for IE10 users - if JS is disabled it will probably just be the NoScript addon. I think we need more public education about the sheer stupidity of NoScript (as opposed to sane addons like AdBlock or Ghostery). – iono Apr 17 '13 at 04:27
8

I'd suggest using the alternative code provided by the author: `if (/*@cc_on!@*/false && document.documentMode === 10) {}` which gets around eval warnings in linting programs. – ajbeaven Oct 16 '13 at 22:58

Max Sohrt · Accepted Answer · 2015-05-04T09:35:11.910

65

Perhaps you can try some jQuery like this:

if ($.browser.msie && $.browser.version === 10) {
  $("html").addClass("ie10");
}

To use this method you must include the jQuery Migrate library because this function was removed from the main jQuery library.

Worked out quite fine for me. But surely no replacement for conditional comments!

edited May 04 '15 at 09:35

answered Dec 19 '12 at 14:39

Max Sohrt

1,046
9
5

3

I am not sure about you guys but I need to use `== '10.0'` for it to work – lulalala Jan 08 '13 at 10:06
112

Warning: `jQuery.browser` is no longer available in the current version of jQuery (1.9) without a plugin. http://blog.jquery.com/2013/01/15/jquery-1-9-final-jquery-2-0-beta-migrate-final-released/ – dave1010 Jan 18 '13 at 11:01
2

I would recommend: `if (jQuery.browser.msie && jQuery.browser.version < 10) { // do what you will here }` Note the *verion < 10* to detect older versions of IE. IE10 and above works fine with all my CSS3, HTML5, jquery, etc. – Dan Mantyla Mar 12 '13 at 20:45
1

@dan because conditional comments work in all IE browsers less than 10 use them instead of cluttering your JS for all browsers. Just say – edhurtig Apr 28 '13 at 01:25
@lulalala: The actual value is `'10.0'`, and if using CoffeeScript, you should use that, since `==`/`is` is translated to `===`. – Marc-André Lafortune May 06 '13 at 15:34
As Dave said, $.browser is no longer available, so you will be stuck with using outdated jQuery if you want to use it this way. – Vexter Sep 03 '13 at 11:39
1

@Marc-AndréLafortune raises a good point. As a rule of thumb you should always use the === operator and not ==. When writiing javascript you need to be mindful of this. http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons – Stewart Nov 07 '13 at 00:32
Doesn't seem to work for me on ie11, but it works in other browsers, if I change the flag. – Ben Oct 05 '14 at 17:01

BoltClock · Answer 4 · 2017-12-14T04:04:10.603

63

Internet Explorer 10 does not attempt to read conditional comments anymore. This means it will treat conditional comments just like any other browser would: as regular HTML comments, meant to be ignored entirely. Looking at the markup given in the question as an example, all browsers including IE10 will ignore the comment portions, highlighted gray, entirely. The HTML5 standard makes no mention of conditional comment syntax, and this is exactly why they have chosen to stop supporting it in IE10.

Note, however, that conditional compilation in JScript is still supported, as shown in the comments as well as the more recent answers. It's not going away in the final release either, unlike jQuery.browser. And of course, it goes without saying that user-agent sniffing remains as fragile as ever and should never be used under any circumstances.

If you really must target IE10, either use conditional compilation which may still see support in the near future, or — if you can help it — use a feature detection library such as Modernizr instead of (or in conjunction with) browser detection. Unless your use case requires noscript or accommodating IE10 on the server side, user-agent sniffing is going to be more of a headache than a viable option.

Sounds pretty cumbersome, but remember that as a modern browser that's highly conformant to today's Web standards¹, assuming you've written interoperable code that is highly standards-compliant, you shouldn't have to set aside special code for IE10 unless absolutely necessary, i.e. it's supposed to resemble other browsers in terms of behavior and rendering.² And it sounds far-fetched, given IE's history, but how many times have you expected Firefox or Chrome to behave the same way only to be met with dismay?

Firefox did not support box-sizing unprefixed for years
Firefox has historically had weird outline behavior, and this was also the case for years
Firefox refuses to behave reasonably when it comes to positioned table-cells, citing undefined behavior as an excuse, while other browsers appear to cope just fine
Safari and Chrome have lots of trouble with certain CSS selectors, sometimes with fixes that really take you back to the good ol' days of IE5, IE6 and IE7
Chrome seems to have lots of trouble in the repainting department in general, for example not reflowing layouts correctly when media styles are updated; it seems that half of Chrome's bugs can be worked around simply and only by forcing a repaint, again IE5/6/7-level stuff
A few strains of WebKit have been known to outright lie about support for certain features, meaning they actually defeat feature detection mechanisms, of all things

If you do have a legitimate reason to be targeting certain browsers, by all means sniff them out with the other tools given to you. I'm just saying that you're going to be much more hard-pressed to find such a reason today than what it used to be, and it's really just not something you can rely on.

¹ _{Not only IE10, but IE9, and even IE8 which handles most of the mature CSS2.1 standard far better than Chrome, simply because IE8 was so focused on standards compliance (at which time CSS2.1 was already pretty stable with only minor differences from today's recommendation) while Chrome seems to be little more than a half-polished tech demo of cutting-edge pseudo-standards.}

² _{And I may be biased when I say this, but it sure as hell does. If your code works in other browsers but not IE, the odds that it's an issue with your own code rather than IE10 are far better compared to, say, 3 years ago, with previous versions of IE. Again, I may be biased, but let's be honest: aren't you too? Just look at your comments.}

edited Dec 14 '17 at 04:04

answered Mar 28 '12 at 02:24

BoltClock

630,065
150
1,295
1,284

20

Chhhh, yeah, IE10 still lags far behind webkit and gecko. I have some CSS looking all nice in webkit and hideous in IE10. If I can't find a way to selectively apply the styles, then I'll have to abandon such styles. :( – trusktr Mar 28 '12 at 02:34
1

In particular, we need a way to distinguish between IE10 and Chrome/Firefox. – trusktr Mar 28 '12 at 02:34
1

I don't think you can do this without JavaScript or *-gasp-* user agent sniffing... – BoltClock Mar 28 '12 at 02:36
Lol. This is what I was thinking I'd have to resort to. So there's no more using those conditional comments any more I guess. I wish they'd kept conditional comments because IE10 really does lack compared to CHrome and Firefox, although it definitely is much better than IE9. – trusktr Apr 01 '12 at 04:23
1

HAHAHA, It doesn't treat padding properly on selects. This is consistaNT ACROSS ALL IE's. But my conditional won't target it. – Will Hancock Dec 11 '12 at 13:24
2

Its worth pointing out that conditional comments were removed in IE10 as it now has a HTML5 parser. Conditional comments are not valid according to the HTML5 parsing algorithm. See legacy features section of http://blogs.msdn.com/b/ie/archive/2011/07/06/html5-parsing-in-ie10.aspx – David Storey Dec 19 '12 at 01:07
3

@trusktr if you code it well then it will look good in all the latest browsers. – Klevis Miho Jan 03 '13 at 14:40
10

@KlevisMiho Not true, Chrome and Firefox support features that IE doesn't have, even if coded well. If you mean "use only common features" then that's not quite the same as "code well". – trusktr Jan 03 '13 at 21:12
1

I have to agree with @trusktr... there's a difference between coding according to standards, and only using common features. What I'm suggesting in my answer is that IE10 should have caught up enough on both departments, but of course there will still be inconsistencies, and there do exist methods that still work in lieu of conditional comments (i.e. JS). – BoltClock Jan 04 '13 at 02:20
thats exactly *WHY* I need to target IE10, so that I *CAN* display it with the other browsers and *NOT* for IE9 and below. e.g. `if (jQuery.browser.msie) { if (jQuery.browser.version < 10) { alert('BAD BROWSER! BAD!!');}}` – Dan Mantyla Mar 12 '13 at 20:40
5

@Dan Mantyla: In that case, `stuff you don't want IE9 and below to see` – BoltClock Mar 12 '13 at 20:43
@BoltClock: That is a good point. But in the scenario I'm dealing with it had to be in javascript/jquery. – Dan Mantyla Mar 12 '13 at 20:49
@BoltClock its a nice theory but we still need to treat IE special because it doesn't handle cross scheme ajax calls the same way as any other browser. – Yaur May 21 '13 at 19:50
its supposed to but it doesn't – Omu Jun 25 '13 at 16:03
Yeah, when you set a margin on something and it looks correct on chrome, firefox, safari, iphones and androids, but not IE it doesn't really seem like a code problem. Microsoft is far behind standards and their browser is still a laughable product in comparison with every other browser I have to test on. – skrilled Jul 18 '13 at 18:18
In my case there isn't a coding issue, but a webfont rendering issue in ALL IEs. I'd like to target IE and feed it a different font. Something like this would still be useful in some circumstances. – Steve Meisner Aug 02 '13 at 20:16
In the project I'm currently working on, we found that IE 10 was setting document.readyState too early, before all the Javascript was actually loaded. We think we were running into the http://connect.microsoft.com/IE/feedback/details/792880/document-readystate-interactive-firing-too-early-misfiring-in-ie11-9-and-10 bug. It was causing our Angular scripts to sometimes completely fail to load, because IE was saying "Hey, your dependencies are available" when they really weren't. We ended up using browser detection to tell users "If you're using IE, and our site glitches, try Firefox or Chrome." – rmunn Oct 24 '13 at 09:04

score 36 · Answer 5 · edited May 23 '17 at 11:33

36

A good place to start is the IE Standards Support Documentation.

Here is how to target IE10 in JavaScript:

if ("onpropertychange" in document && !!window.matchMedia) {
...
}

Here is how to target IE10 in CSS:

@media all and (-ms-high-contrast: none) {
...
}

In case IE11 needs to be filtered or reset via CSS, see another question: How to write a CSS hack for IE 11?

edited May 23 '17 at 11:33

Community

1
1

answered Jun 14 '13 at 01:57

Paul Sweatte

22,871
7
116
244

5

Your CSS solution also affects IE11 :\ – Lukasz Lenart Mar 13 '14 at 10:10

Eugene Kardash · Answer 6 · 2012-12-30T01:06:21.830

Both solutions posted here (with slight modifications) work:

<!--[if !IE]><!--><script>if(/*@cc_on!@*/false){document.documentElement.className='ie10';}</script><!--<![endif]-->

or

<script>if(Function('/*@cc_on return 10===document.documentMode@*/')()){document.documentElement.className='ie10';}</script>

You include either of the above lines inside of head tag of your html page before your css link. And then in css file you specify your styles having "ie10" class as a parent:

.ie10 .myclass1 { }

And voilà! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.

Matt Stow · Answer 7 · 2013-02-02T03:17:57.637

I've written a small, vanilla JavaScript plugin called Layout Engine, which allows you to feature detect IE 10 (and every other browser), in a simple way that cannot be faked, unlike user agent sniffing.

It adds the rendering engine name as a class on the html tag and returns a JavaScript object containing the vendor and version (where appropriate)

Check out my blog post: http://mattstow.com/layout-engine.html and get the code on GitHub: https://github.com/stowball/Layout-Engine

score 7 · Answer 8 · edited Apr 07 '13 at 15:30

7

I use this script - it's antiquated, but effective in targeting a separate Internet Explorer 10 style sheet or JavaScript file that is included only if the browser is Internet Explorer 10, the same way you would with conditional comments. No jQuery or other plugin is required.

<script>
    /*@cc_on
      @if (@_jscript_version == 10)
          document.write(' <link type= "text/css" rel="stylesheet" href="your-ie10-styles.css" />');
      @end
    @*/
</script >

edited Apr 07 '13 at 15:30

Peter Mortensen

28,342
21
95
123

answered Jan 19 '13 at 22:53

Deborah

3,307
3
26
41

2

Cool. Could you add a little info on what those @statements are? – trusktr Jan 29 '13 at 03:19

Lenny Bruyninckx · Answer 9 · 2013-05-14T20:13:06.203

6

You can use PHP to add a stylesheet for IE 10

Like:

if (stripos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) {
    <link rel="stylesheet" type="text/css" href="../ie10.css" />
}

edited May 14 '13 at 20:13

answered Mar 20 '13 at 13:21

Lenny Bruyninckx

95
1
4

2

It doesn't make sense to upper the string as stripos is not case sensitive ;) – mgutt May 06 '13 at 21:51
2

I always tempt for this, but then remember that it breaks when there is a cdn/cache/proxy at front end. – Johan Dec 08 '13 at 18:40

score 5 · Answer 10 · answered Jan 18 '13 at 11:08

5

If you must do this, you can check the user agent string in JavaScript:

var isIE10 = !!navigator.userAgent.match(/MSIE 10/);

As other people have mentioned, I'd always recommend feature detection instead.

answered Jan 18 '13 at 11:08

dave1010

14,332
6
64
64

what are the ``!!` for ? – Francisco Corrales Morales May 22 '14 at 02:23
4

`String.match()` will return an array for a match or null if it doesn't. `!(String.match())` makes it return false for a match or true for no match. `!(!(String.match()))` makes it return true for a match or false for no match. `!(!(something))` or just `!!something` therefore converts anything to a boolean true/false. http://stackoverflow.com/questions/784929/what-is-the-not-not-operator-in-javascript – dave1010 May 22 '14 at 13:48
@FranciscoCorralesMorales Oh the number of times I've been asked that when my code is under scrutiny. :) As an expansion to dave1010's great comment, it can be used to coerce 'truthy' or 'falsy' values into an intrinsic `boolean` value, e.g. `var name = 'me', hasName = !!name;`. – WynandB Jul 10 '14 at 05:40

score 4 · Answer 11 · answered Feb 18 '13 at 23:37

If you want to target IE 10 with Vanilla JavaScript, you might want to try CSS property detection:

if (document.body.style.msTouchAction != undefined) {
  document.body.className = 'ie10';
}

CSS properties

Instead of msTouchAction you can also use one of these CSS properties, because they are currently only available in IE 10. But this might change in the future.

msTouchAction
msWrapFlow
msWrapMargin
msWrapThrough
msScrollLimit
msScrollLimitXMin
msScrollLimitYMin
msScrollLimitXMax
msScrollLimitYMax
msFlexbox
msFlex
msFlexOrder

Test page

I've put together a test page with all properties on CodePen.

svnm · Answer 12 · 2015-10-21T01:28:14.280

4

CSS for IE10+ and IE9

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

@media screen\0 {
    /* IE8,9,10 styles*/
}

edited Oct 21 '15 at 01:28

answered Oct 21 '15 at 01:17

svnm

17,405
18
82
100

score 3 · Answer 13 · answered Jul 12 '13 at 10:33

3

clipBoardData is a function that is only available in IE, so if you are seeking to target all IE versions you can use

<script type="text/javascript">
if (window.clipboardData)
            alert("You are using IE!");
</script>

answered Jul 12 '13 at 10:33

Njaal Gjerde

633
1
6
14

-1: but what about versions ? how can you tell which version is ? – Francisco Corrales Morales May 22 '14 at 02:24
The Edge browser does not have "window.clipboardData" either – AFD Jun 29 '16 at 11:18
@AFD This question is about IE, not Edge. – TylerH Dec 20 '18 at 15:22

score 1 · Answer 14 · answered Apr 16 '13 at 18:31

1

You could use feature detection to see if browser is IE10 or greater like so:

var isIE = false;
if (window.navigator.msPointerEnabled) {
    isIE = true;
}

Only true if > IE9

answered Apr 16 '13 at 18:31

George Filippakos

14,863
12
75
86

score 1 · Answer 15 · answered Jul 12 '13 at 11:45

1

Conditionizr (see docs) will add browser CSS classes to your html element, including ie10.

answered Jul 12 '13 at 11:45

Astrotim

1,994
17
21

score 1 · Answer 16 · edited Mar 20 '14 at 19:02

1

With JavaScript:

if (/Trident/g.test(navigator.userAgent)) { // detect trident engine so IE
        document.getElementsByTagName('html')[0].className= 'no-js ie'; }

Work for all IE.

IE08 => 'Trident/4.0'

IE09 => 'Trident/5.0'

IE10 => 'Trident/6.0'

IE11 => 'Trident/7.0'

So change /Trident/g by /Trident/x.0/g where x = 4, 5, 6 or 7 (or maybe 8 for the future).

edited Mar 20 '14 at 19:02

jbindel

5,238
2
22
38

answered Mar 20 '14 at 18:38

Ender-events

59
1
4

score 1 · Answer 17 · answered Jun 12 '14 at 08:53

I just wanted to add my version of IE detection. It's based on a snippet found at http://james.padolsey.com/javascript/detect-ie-in-js-using-conditional-comments/ and exteded to also support ie10 and ie11. It detects IE 5 to 11.

All you need to do is add it somewhere and then you can always check with a simple condition. The global var isIE will be undefined if it's not an IE, or otherwise it will be the version number. So you can easily add things like if (isIE && isIE < 10) or alike.

var isIe = (function(){
    if (!(window.ActiveXObject) && "ActiveXObject" in window) { return 11; /* IE11 */ }
    if (Function('/*@cc_on return /^10/.test(@_jscript_version) @*/')()) { return 10; /* IE10  */ }
    var undef,
        v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        );
    return v > 4 ? v : undef;
}());

score 0 · Answer 18 · edited May 22 '14 at 03:06

0

Check out http://suhasrathod.wordpress.com/2013/04/29/ie10-css-hacks/

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

edited May 22 '14 at 03:06

BoltClock

630,065
150
1,295
1,284

answered Mar 18 '14 at 10:54

Tom Senner

526
5
17

score 0 · Answer 19 · answered Apr 27 '14 at 22:56

0

For me the following code works fine, all conditional comments are working in all IE versions:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 11)|!(IE)]><!--> <html> <!--<![endif]-->

<script>
    if (document.documentMode===10){
        document.documentElement.className+=' ie10';
    }
    else if (document.documentMode===11){
        document.documentElement.className+=' ie11';
    }
</script>

I'm on windows 8.1, not sure if it's related to ie11 update...

answered Apr 27 '14 at 22:56

Alex

249
1
3
17

1

The `(gt IE 11)` bit is completely unnecessary. You may as well just do `` instead. – BoltClock May 22 '14 at 03:06
BoltClock if (gt IE 11) is left out, and the user's browser is IE 12 (when it comes out) there would be no html element defined. – Leonardo Gonzalez Dec 30 '14 at 15:52

Francisco Corrales Morales · Answer 20 · 2014-05-22T02:21:53.030

Here is how I do custom CSS for Internet Explorer:

In my JavaScript file:

function isIE () {
      var myNav = navigator.userAgent.toLowerCase();
      return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}

jQuery(document).ready(function(){
    if(var_isIE){
            if(var_isIE == 10){
                jQuery("html").addClass("ie10");
            }
            if(var_isIE == 8){
                jQuery("html").addClass("ie8");
                // you can also call here some function to disable things that 
                //are not supported in IE, or override browser default styles.
            }
        }
    });

And then in my CSS file, y define each different style:

.ie10 .some-class span{
    .......
}
.ie8 .some-class span{
    .......
}

score 0 · Answer 21 · answered Dec 20 '18 at 15:04

use babel or typescript for convert this code js

const browser = () => {
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3576.0 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.17 Safari/537.36"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763"
    // "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0"
    // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko"
    // "Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    // "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)"
    const _userAgent = navigator.userAgent;
    const br = {
        "Chrome": "Chrome",
        "Edge": "Edge",
        "Firefox": "Firefox",
        ".NET CLR": "Internet Explorer 11",
    };
    const nobr = {
        "MSIE 10.0": "Internet Explorer 10",
        "MSIE 9.0": "Internet Explorer 9",
        "MSIE 8.0": "Internet Explorer 8",
        "MSIE 7.0": "Internet Explorer 7"
    };
    let thisBrow = "Unknown";
    for (const keys in br) {
        if (br.hasOwnProperty(keys)) {
            if (_userAgent.includes(keys)) {

                thisBrow = br[keys];

                for (const key in nobr) {
                    if (_userAgent.includes(key)) {
                        thisBrow = nobr[key];
                    }
                }

            }
        }
    }

    return thisBrow;
};

Hi Aliaksandr, thanks for the idea! Not sure why someone downvoted, but I upvoted because the answer is at least a helpful hint. Whoever downvotes, why not help a new user with helpful advice? — trusktr, Dec 21 '18 at 21:28

score -2 · Answer 22 · answered Aug 29 '13 at 12:52

-2

This answer got me 90% of the way there. I found the rest of my answer on the Microsoft site here.

The code below is what I'm using to target all ie by adding a .ie class to <html>

Use jQuery (which deprecated .browser in favor of user agents in 1.9+, see http://api.jquery.com/jQuery.browser/) to add an .ie class:

// ie identifier
$(document).ready(function () {
  if (navigator.appName == 'Microsoft Internet Explorer') {
    $("html").addClass("ie");
  }
});

answered Aug 29 '13 at 12:52

bdanin

723
7
9

"which deprecated .browser in favor of user agents in 1.9+" It doesn't say "in favor of user agents" - whatever that means - it says in favor of *feature detection*. – BoltClock May 22 '14 at 03:04

score -2 · Answer 23 · answered Jun 25 '14 at 17:53

-2

If you don't mind targeting of IE10 and above and non IE browsers, you can use this conditional comment:

<!--[if gt IE 9]><!--> Your code here. <!--<![endif]-->

Derived from http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither

answered Jun 25 '14 at 17:53

user1003757

31
1
8

1

I didn't -1 your answer but the link seems somewhat outd-_eight_-ed. It's also worth noting that OP intended to target IE10 and IE10 only. Regardless, your code snippet won't work for either IE10 and above or any other non-IE browser, because conditional comments are only supported in IE5 up to IE9. – WynandB Jul 10 '14 at 06:20

score -2 · Answer 24 · answered Jul 27 '14 at 22:20

-2

If you really have to, you can make conditional comments work by adding the following line to <head>:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Source

answered Jul 27 '14 at 22:20

nyuszika7h

12,020
5
40
49

score -4 · Answer 25 · answered May 23 '14 at 10:36

-4

modern solution for css

html[data-useragent*='MSIE 10.0'] .any {
  your-style: here;
}

answered May 23 '14 at 10:36

Raphael

3
5

How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

25 Answers25

CSS properties

Test page

Linked

Related