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