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='//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
- modernizr for feature detection
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]-->