Are There Specific CSS Selectors Targeting Ie10

Are There Specific CSS Selectors Targeting IE10?

The following example shows how to do this

/* 
 #ie10 will only be red in MSIE 10, 
 both in high contrast (display setting) and default mode 
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

Warning: will probably work in IE11+, too.

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

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

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!

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

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

  <style>

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

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

Conditional CSS for Internet Explorer 10 only

Seeing as you're already relying on JavaScript for your menu, you could add a class to the <body> using JavaScript code based on the userAgent string:

JavaScript

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    document.body.classList.add("ie10");
}

..and then target Internet Explorer 10 in your CSS

CSS

/*IE 10 only */
.ie10 .myClass {
    margin-top: 1px;
}

Applying `css` internet explorer 9 specific css property affects ie10

The below should target IE9 only (and not IE10 etc as :root does):

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .back{visibility:hidden;}
}

make specific css code for IE10

I would suggest you look into a webfont generator. It will give you the font types you need to also support IE10 and will make css code which ensures best support cross-platform.

Font Squirrel is the most used/popular out there but there are more

http://www.fontsquirrel.com/tools/webfont-generator

Are There Specific CSS Selectors Targeting Ie10