9.4 KiB
9.4 KiB
| 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 ✓ | ✓ | ✓ | ✓ | ||
| ---------------------------------------------------------- | - | - | - | - | -- | -- |
CSS: @media queries — 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:
- selectivizr for selectors
- html5shiv for new HTML tags
- json2 for JSON parsing (IE7 below)
- respond for media queries
You may also need these:
- modernizr for feature detection and new HTML tags
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