| title |
layout |
| Internet Explorer |
default |
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 ✓ |
✓ |
| {:.wide.greycode} |
|
|
|
|
|
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-shadow — polyfill |
|
|
|
|
10 ✓ |
✓ |
| ---------------------------------------------------------- |
- |
- |
- |
- |
-- |
-- |
border-image |
|
|
|
|
|
11 ✓ |
| {:.wide.greycode} |
|
|
|
|
|
|
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 ✓ |
| {:.wide.greycode} |
|
|
|
|
|
|
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
<!--[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]-->
- (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