Support table

CSS Selectors

Feature IE6 IE7 IE8 IE9 IE10
> (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

Feature IE6 IE7 IE8 IE9 IE10 IE11
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

Feature IE6 IE7 IE8 IE9 IE10 IE11
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='//cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
<script src='//cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js'>
<script src='//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'>
<![endif]--> 

You may also need

for CSS3 decorations

See: Cross-browser polyfills list

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!