CSS Selectors

Feature IE6 7 8 9 10
> (descendant)   7 ✓
[attr] (attribute)   7 ✓
.class1.class2 (multiple classes)   7 ✓
~ (sibling)   7 ✓
+ (adjacent)   7 ✓
:first-child 1     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 ✓

CSS properties

Feature IE6 7 8 9 10 11
max-width   7 ✓
position: fixed   7 ✓
outline     8 ✓
display: inline-block 2     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-shadowpolyfill         10 ✓
border-image           11 ✓

Features

Feature IE6 7 8 9 10 11
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 3         10 ✓
HTML: <input placeholder='..'>         10 ✓
HTML: <input type='range'>         10 ✓
HTML: <input required>         10 ✓
JS: Web sockets         10 ✓
JS: Fullscreen mode           11 ✓

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

Also see:

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]-->

Footnotes

  • (1) = first-child: doesn’t work for elements inserted via JS
  • (2) = inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span
  • (3) = CSS flexbox: IE10 only supports the 2012 syntax with -ms- prefix