CodePen

HTML

            
              <h1>Detect IE 10</h1>
            
          
!
via HTML Inspector

CSS

            
              body {
  font: 1.25em sans-serif;
  
  div {
    background: #d10023;
    color:#fff;
    padding: 1em;
  }
  
  &.ie10 {
    div {
      background: #50b300;
      margin-bottom:.5em;
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               /**
  Target IE 10 with JavaScript and CSS property detection.
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
 **/

/*
 * I use "msTouchAction" as an example, but you can use
 * any of the values specified below. 
 */
if (document.body.style.msTouchAction != undefined) {
  // Maybe a sweet class for IE 10? 
  document.body.className = 'ie10';
}

// IE 10 only CSS properties
var p = [
  'msTouchAction', 
  'msWrapFlow',
  'msWrapMargin',
  'msWrapThrough',
  'msOverflowStyle',
  'msScrollChaining',
  'msScrollLimit',
  'msScrollLimitXMin',
  'msScrollLimitYMin',
  'msScrollLimitXMax',
  'msScrollLimitYMax',
  'msScrollRails',
  'msScrollSnapPointsX',
  'msScrollSnapPointsY',
  'msScrollSnapType',
  'msScrollSnapX',
  'msScrollSnapY',
  'msScrollTranslation',
  'msFlexbox',
  'msFlex',
  'msFlexOrder'
];

/*
 * Test all IE 10 only CSS properties
 */
var d = document,
    b = d.body,
    s = b.style,
    isIE10 = false;

// Test the properties
for (var i = 0; i < p.length; i++) {
  property = p[i];
  
  if (s[property] != undefined) {
    isIE10 = true;
    createEl(property);
  }
}

if (isIE10) {
  b.className = 'ie10';
} else {
  createEl('Shame on you! This is NOT IE 10... D:<'); 
}

/*
 * Just a little helper to create a DOM element
 */
function createEl(content) {
  el = d.createElement('div'); 
  el.innerHTML = content;
  b.appendChild(el);
}

/*
 * List of IE CSS stuff:
 * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx
 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................