Support table

CSS Selectors

FeatureIE6IE7IE8IE9IE10
> (descendant) 7 ✓✓✓✓
[attr] (attribute) 7 ✓✓✓✓
.class1.class2 (multiple classes) 7 ✓✓✓✓
~ (sibling) 7 ✓✓✓✓
+ (adjacent) 7 ✓✓✓✓
:first-child *  8 ✓✓✓
:focus  8 ✓✓✓
:before :after (single colon only)  8 ✓✓✓
:lang  8 ✓✓✓
:first-of-type, :last-of-type   9 ✓✓
:last-child   9 ✓✓
:empty   9 ✓✓
:enabled :disabled :checked   9 ✓✓
:not()   9 ✓✓
:nth-child() :nth-last-child()   9 ✓✓
:nth-of-type() :nth-last-of-type() :only-of-type()   9 ✓✓
:only-child()   9 ✓✓
:target   9 ✓✓
::selection   9 ✓✓
:root   9 ✓✓

first-child: doesn't work for elements inserted via JS.

CSS properties

FeatureIE6IE7IE8IE9IE10IE11
max-width 7 ✓✓✓✓✓
position: fixed 7 ✓✓✓✓✓
outline  8 ✓✓✓✓
display: inline-block *  8 ✓✓✓✓
display: table  8 ✓✓✓✓
border-collapse, border-spacing, table-layout, ...  8 ✓✓✓✓
whitespace: pre-wrap  8 ✓✓✓✓
whitespace: pre-line  8 ✓✓✓✓
box-sizing  8 ✓✓✓✓
background-clip   9 ✓✓✓
background-origin   9 ✓✓✓
background-size   9 ✓✓✓
background: x, y, z (multiple backgrounds)   9 ✓✓✓
opacity   9 ✓✓✓
border-radius   9 ✓✓✓
box-shadow   9 ✓✓✓
rgba()   9 ✓✓✓
transform   9 ✓✓✓
animation    10 ✓✓
transition    10 ✓✓
linear-gradient()    10 ✓✓
text-shadow — polyfill    10 ✓✓
border-image     11 ✓

inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span

Features

FeatureIE6IE7IE8IE9IE10IE11
PNG alpha transparency 7 ✓✓✓✓✓
data URI ⊙  8 ✓✓✓✓
JS: JSON parsing ⊙  8 ✓✓✓✓
JS: Cross-origin resource sharing ⊙  8 ✓✓✓✓
JS: Local storage ⊙  8 ✓✓✓✓
CSS: @media queries — polyfill   9 ✓✓✓
HTML: new HTML5 elements - polyfill   9 ✓✓✓
HTML: <canvas>   9 ✓✓✓
HTML: <svg>   9 ✓✓✓
HTML: <img src='image.svg'>   9 ✓✓✓
CSS: flexbox ⊙ *    10 ✓✓
HTML: <input placeholder='..'> ⊙    10 ✓✓
HTML: <input type='range'>    10 ✓✓
HTML: <input required> ⊙    10 ✓✓
JS: Web sockets    10 ✓✓
JS: Fullscreen mode     11 ✓

flexbox: IE10 only supports the 2012 syntax with -ms- prefix.

Polyfills

IE polyfills

Always install these in almost every project:

<!--[if lt IE 9]>
<script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
<script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'>
<![endif]--> 

You may also need

for CSS3 decorations

Misc

IE Conditional comment HTML

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

IE conditionals

<!--[if IE]>      I'm IE      <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->
0 Comments for this cheatsheet. Write yours!