IE10 CSS Capability Detection

Modified Fork of: http://codepen.io/TimPietrusky/pen/sFICm /** Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/

HTML

<h1>Detect IE10 by CSS Capability Testing</h1>

CSS

body {
    font: 1.25em sans-serif;
}
div {
    background: #d10023;
    color:#fff;
    padding: 1em;
}
.ie10 div {
    background: #50b300;
    margin-bottom:.5em;
}

JavaScript

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

 // IE 10 only CSS properties
 var ie10Styles = [
     '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;
 var b = d.body;
 var s = b.style;
 var isIE10 = false;

 // Test the properties
 for (var i = 0; i < ie10Styles.length; i++) {
     property = ie10Styles[i];

     if (s[property] != undefined) {
         isIE10 = true;
         createEl("Found: " + property);
     }
 }

 if (isIE10) {
     b.className = 'ie10';
 } else {
     createEl('NOT IE10.');
 }

 /*
  * 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
  */