## 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:

- json2 for JSON parsing (for IE7 below)
- selectivizr for selectors (for IE8 below)
- html5shiv for new HTML tags (for IE8 below)
- respond for media queries (for IE8 below)
- See this article for info

    <!--[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

- modernizr for feature detection

### for CSS3 decorations

- css3pie
- cssSandpaper
- ecsstender

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!