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

Question

How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code   I tried this  but it doesn t work    lt  -- if IE 10  gt      lt html class  no-js ie10  lang  en  gt   lt   endif -- gt   lt  -- if  IE  gt  lt  -- gt   lt html lang  en  class  no-js  gt   lt  -- lt   endif -- gt    Internet nbsp Explorer 10 ignores the conditional comments and uses the  lt html lang  en  class  no-js  gt  instead of  lt html class  no-js ie10  lang  en  gt

User · Answer

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

User · Answer

A good place to start is the IE Standards Support Documentation    Here is how to target IE10 in JavaScript   if   onpropertychange  in document  amp  amp    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

User · Answer

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

User · Answer

Perhaps you can try some jQuery like this   if    browser msie  amp  amp    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

User · Answer

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

User · Answer

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 standards1  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 2 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     1 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   2 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

User · Answer

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    Moving Internet Explorer specific CSS into  media blocks How to Target Internet Explorer 10 and 11 in CSS CSS Hacks for Windows 10 and Microsoft   s Edge Web Browser

User · Answer

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   gt   Trident 4 0   IE09   gt   Trident 5 0   IE10   gt   Trident 6 0   IE11   gt   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

User · Answer

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

User · Answer

I use this script - it s antiquated  but effective in targeting a separate Internet nbsp Explorer nbsp 10 style sheet or JavaScript file that is included only if the browser is Internet nbsp Explorer nbsp 10  the same way you would with conditional comments  No jQuery or other plugin is required    lt script gt         cc on        if    jscript version    10            document write    lt link type   text css  rel  stylesheet  href  your-ie10-styles css    gt            end          lt  script  gt

User · Answer

For me the following code works fine  all conditional comments are working in all IE versions    lt  -- if lt IE 7   gt   lt html class  ie6  gt   lt   endif -- gt   lt  -- if IE 7   gt      lt html class  ie7  gt   lt   endif -- gt   lt  -- if IE 8   gt      lt html class  ie8  gt   lt   endif -- gt   lt  -- if IE 9   gt      lt html class  ie9  gt   lt   endif -- gt   lt  -- if  gt IE 11    IE   gt  lt  -- gt   lt html gt   lt  -- lt   endif -- gt    lt script gt      if  document documentMode   10           document documentElement className    ie10             else if  document documentMode   11           document documentElement className    ie11          lt  script gt    I m on windows 8 1  not sure if it s related to ie11 update

User · Answer

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

User · Answer

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  amp  amp  isIE  lt  10  or alike   var isIe    function        if    window ActiveXObject   amp  amp   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     lt  -- if gt IE        v       gt  lt i gt  lt  i gt  lt   endif -- gt                all 0                 return v  gt  4   v   undef

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

modern solution for css  html data-useragent   MSIE 10 0    any     your-style  here

User · Answer

If you really have to  you can make conditional comments work by adding the following line to  lt head gt     lt meta http-equiv  X-UA-Compatible  content  IE EmulateIE9  gt    Source

User · Answer

clipBoardData is a function that is only available in IE  so if you are seeking to target all IE versions you can use   lt script type  text javascript  gt  if  window clipboardData              alert  You are using IE      lt  script gt

User · Answer

use babel or typescript for convert this code js   x000D   x000D  const browser        gt    x000D          Mozilla 5 0  Windows NT 10 0  Win64  x64  AppleWebKit 537 36  KHTML  like Gecko  Chrome 71 0 3576 0 Safari 537 36  x000D          Mozilla 5 0  Windows NT 10 0  Win64  x64  AppleWebKit 537 36  KHTML  like Gecko  Chrome 72 0 3626 17 Safari 537 36  x000D          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  x000D          Mozilla 5 0  Windows NT 10 0  Win64  x64  rv 64 0  Gecko 20100101 Firefox 64 0  x000D          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  x000D          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   x000D          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   x000D          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   x000D          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   x000D      const  userAgent   navigator userAgent  x000D      const br     x000D           Chrome    Chrome   x000D           Edge    Edge   x000D           Firefox    Firefox   x000D            NET CLR    Internet Explorer 11   x000D         x000D      const nobr     x000D           MSIE 10 0    Internet Explorer 10   x000D           MSIE 9 0    Internet Explorer 9   x000D           MSIE 8 0    Internet Explorer 8   x000D           MSIE 7 0    Internet Explorer 7  x000D         x000D      let thisBrow    Unknown   x000D      for  const keys in br    x000D          if  br hasOwnProperty keys     x000D              if   userAgent includes keys     x000D   x000D                  thisBrow   br keys   x000D   x000D                  for  const key in nobr    x000D                      if   userAgent includes key     x000D                          thisBrow   nobr key   x000D                        x000D                    x000D   x000D                x000D            x000D        x000D   x000D      return thisBrow  x000D     x000D   x000D   x000D

User · Answer

If you don t mind targeting of IE10 and above and non IE browsers  you can use this conditional comment    lt  -- if gt IE 9  gt  lt  -- gt  Your code here   lt  -- lt   endif -- gt    Derived from http   www paulirish com 2008 conditional-stylesheets-vs-css-hacks-answer-neither

User · Answer

You can use PHP to add a stylesheet for IE 10  Like   if  stripos   SERVER  HTTP USER AGENT     MSIE 10           lt link rel  stylesheet  type  text css  href     ie10 css    gt

User · Answer

Both solutions posted here  with slight modifications  work    lt  -- if  IE  gt  lt  -- gt  lt script gt if    cc on    false  document documentElement className  ie10    lt  script gt  lt  -- lt   endif -- gt    or   lt script gt if Function     cc on return 10   document documentMode         document documentElement className  ie10    lt  script gt    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

User · Answer

Conditionizr  see docs  will add browser CSS classes to your html element  including ie10

User · Answer

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  lt html gt   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

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

Examples related to javascript

Examples related to html

Examples related to css

Examples related to internet-explorer-10

Examples related to conditional-comments