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

Apply target specific styles: IE10 vs Edge

Let's distinguish our targets with precision! For IE10, we stick with our media hack:

@supports (-ms-ime-align: auto) {
  .do-that-IE10-thing {
    property: value; /* IE10-specific */
  }
}


For Edge, it's time to edge out the competition with @supports (-ms-accelerator:true). Sneak in some Javascript for IE10 detection, and don't worry, it won't offend IE11!

if (window.matchMedia("(-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += " its-an-ie10-party";
}


Remember, feature detection is your best friend. Good old Modernizr and jQuery Migrate can be lifesavers when dealing with those tricky deprecated hooks such as $.browser.msie.

Organize that IE-specific CSS

Keep things tidy! Place all your IE-specific styles in neat little @media blocks. This improves readability like grandma's new reading glasses, and skips IE-only styles for non-IE browsers. It's like organizing a secret party that only your IE friends will know about.

The importance of standard compliance and validation

No witch hunt here! Check your code, folks. IE10 is a good sport towards standards-compliance. Yet, sometimes you need to pull out the big guns like CSS hacks or resets for IE11. If your Javascript depends on the IE version, JScript's conditional compilation has your back.

Feature detection vs browser detection

Let’s keep our coding principles straight - feature detection over browser detection. Modernizr allows you to check if a browser plays ball with a certain feature.

element.onpropertychange = function() {
    if (window.event.propertyName === "value") {
        // IE10-specific code goes here. It's a feature, not a bug!
    }
};


Our mission? Creating code that stands the test of time.