2 title: Internet Explorer
13 | Feature | IE6 | IE7 | IE8 | IE9 | IE10 |
14 | ---------------------------------------------------------- | - | - | - | - | -- |
15 | `>` _(descendant)_ | | 7 ✓ | ✓ | ✓ | ✓ |
16 | `[attr]` _(attribute)_ | | 7 ✓ | ✓ | ✓ | ✓ |
17 | `.class1.class2` _(multiple classes)_ | | 7 ✓ | ✓ | ✓ | ✓ |
18 | `~` _(sibling)_ | | 7 ✓ | ✓ | ✓ | ✓ |
19 | `+` _(adjacent)_ | | 7 ✓ | ✓ | ✓ | ✓ |
20 | ---------------------------------------------------------- | - | - | - | - | -- |
21 | `:first-child` <sup>\*</sup> | | | 8 ✓ | ✓ | ✓ |
22 | `:focus` | | | 8 ✓ | ✓ | ✓ |
23 | `:before` `:after` _(single colon only)_ | | | 8 ✓ | ✓ | ✓ |
24 | `:lang` | | | 8 ✓ | ✓ | ✓ |
25 | ---------------------------------------------------------- | - | - | - | - | -- |
26 | `:first-of-type`, `:last-of-type` | | | | 9 ✓ | ✓ |
27 | `:last-child` | | | | 9 ✓ | ✓ |
28 | `:empty` | | | | 9 ✓ | ✓ |
29 | `:enabled` `:disabled` `:checked` | | | | 9 ✓ | ✓ |
30 | `:not()` | | | | 9 ✓ | ✓ |
31 | `:nth-child()` `:nth-last-child()` | | | | 9 ✓ | ✓ |
32 | `:nth-of-type()` `:nth-last-of-type()` `:only-of-type()` | | | | 9 ✓ | ✓ |
33 | `:only-child()` | | | | 9 ✓ | ✓ |
34 | `:target` | | | | 9 ✓ | ✓ |
35 | `::selection` | | | | 9 ✓ | ✓ |
36 | `:root` | | | | 9 ✓ | ✓ |
37 {: .-headers.-no-wrap}
39 `first-child:` doesn't work for elements inserted via JS.
43 | Feature | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
44 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
45 | `max-width` | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
46 | `position: fixed` | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
47 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
48 | `outline` | | | 8 ✓ | ✓ | ✓ | ✓ |
49 | `display: inline-block` <sup>\*</sup> | | | 8 ✓ | ✓ | ✓ | ✓ |
50 | `display: table` | | | 8 ✓ | ✓ | ✓ | ✓ |
51 | `border-collapse`, `border-spacing`, `table-layout`, ... | | | 8 ✓ | ✓ | ✓ | ✓ |
52 | `whitespace: pre-wrap` | | | 8 ✓ | ✓ | ✓ | ✓ |
53 | `whitespace: pre-line` | | | 8 ✓ | ✓ | ✓ | ✓ |
54 | `box-sizing` | | | 8 ✓ | ✓ | ✓ | ✓ |
55 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
56 | `background-clip` | | | | 9 ✓ | ✓ | ✓ |
57 | `background-origin` | | | | 9 ✓ | ✓ | ✓ |
58 | `background-size` | | | | 9 ✓ | ✓ | ✓ |
59 | `background: x, y, z` _(multiple backgrounds)_ | | | | 9 ✓ | ✓ | ✓ |
60 | `opacity` | | | | 9 ✓ | ✓ | ✓ |
61 | `border-radius` | | | | 9 ✓ | ✓ | ✓ |
62 | `box-shadow` | | | | 9 ✓ | ✓ | ✓ |
63 | `rgba()` | | | | 9 ✓ | ✓ | ✓ |
64 | `transform` | | | | 9 ✓ | ✓ | ✓ |
65 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
66 | `animation` | | | | | 10 ✓ | ✓ |
67 | `transition` | | | | | 10 ✓ | ✓ |
68 | `linear-gradient()` | | | | | 10 ✓ | ✓ |
69 | `text-shadow` — [polyfill][text-shadow] | | | | | 10 ✓ | ✓ |
70 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
71 | `border-image` | | | | | | 11 ✓ |
72 {: .-headers.-no-wrap}
74 `inline-block:` IE6/7 can only support inline-block for elements that are naturally inline, like span
78 | Feature | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
79 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
80 | PNG alpha transparency | | 7 ✓ | ✓ | ✓ | ✓ | ✓ |
81 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
82 | data URI [⊙][datauri] | | | 8 ✓ | ✓ | ✓ | ✓ |
83 | JS: JSON parsing [⊙][json] | | | 8 ✓ | ✓ | ✓ | ✓ |
84 | JS: Cross-origin resource sharing [⊙][cors] | | | 8 ✓ | ✓ | ✓ | ✓ |
85 | JS: Local storage [⊙][localstorage] | | | 8 ✓ | ✓ | ✓ | ✓ |
86 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
87 | CSS: `@media` queries — [polyfill][respond] | | | | 9 ✓ | ✓ | ✓ |
88 | HTML: new HTML5 elements - [polyfill][html5shiv] | | | | 9 ✓ | ✓ | ✓ |
89 | HTML: `<canvas>` | | | | 9 ✓ | ✓ | ✓ |
90 | HTML: `<svg>` | | | | 9 ✓ | ✓ | ✓ |
91 | HTML: `<img src='image.svg'>` | | | | 9 ✓ | ✓ | ✓ |
92 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
93 | CSS: flexbox [⊙][flexbox] <sup>\*</sup> | | | | | 10 ✓ | ✓ |
94 | HTML: `<input placeholder='..'>` [⊙][placeholder] | | | | | 10 ✓ | ✓ |
95 | HTML: `<input type='range'>` | | | | | 10 ✓ | ✓ |
96 | HTML: `<input required>` [⊙][validation] | | | | | 10 ✓ | ✓ |
97 | JS: Web sockets | | | | | 10 ✓ | ✓ |
98 | ---------------------------------------------------------- | - | - | - | - | -- | -- |
99 | JS: Fullscreen mode | | | | | | 11 ✓ |
100 {: .-headers.-no-wrap}
102 `flexbox:` IE10 only supports the 2012 syntax with -ms- prefix.
108 Always install these in almost every project:
110 - [json2] for JSON parsing (for IE7 below)
111 - [selectivizr] for selectors (for IE8 below)
112 - [html5shiv] for new HTML tags (for IE8 below)
113 - [respond] for media queries (for IE8 below)
114 - See [this article](http://ricostacruz.com/til/ie-polyfills.html) for info
118 <script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script>
119 <script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js'>
120 <script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script>
121 <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'>
122 <script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'>
126 ### You may also need
128 - [modernizr] for feature detection
130 ### for CSS3 decorations
136 See: [Cross-browser polyfills list][fills]
141 ### IE Conditional comment HTML
144 <!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
145 <!--[if IE 7 ]> <html class="ie7"> <![endif]-->
146 <!--[if IE 8 ]> <html class="ie8"> <![endif]-->
147 <!--[if IE 9 ]> <html class="ie9"> <![endif]-->
148 <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
154 <!--[if IE]> I'm IE <![endif]-->
155 <!--[if !IE]> --> Not IE <!-- <![endif]-->
158 [text-shadow]: https://github.com/heygrady/textshadow
159 [ie7.js]: http://ie7-js.googlecode.com/svn/test/index.html
160 [selectivizr]: http://selectivizr.com/
161 [css3pie]: http://css3pie.com/
162 [cssSandpaper]: https://github.com/zoltan-dulac/cssSandpaper
163 [html5shiv]: https://code.google.com/p/html5shiv/
164 [fills]: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
165 [json2]: https://github.com/douglascrockford/JSON-js
166 [modernizr]: https://modernizr.com
167 [ecsstender]: http://ecsstender.org/
168 [respond]: https://github.com/scottjehl/Respond
169 [flexbox]: https://caniuse.com/#feat=flexbox
170 [cors]: https://caniuse.com/#feat=cors
171 [localstorage]: https://caniuse.com/#feat=localstorage
172 [json]: https://caniuse.com/#feat=json
173 [datauri]: https://caniuse.com/#feat=datauri
174 [validation]: https://caniuse.com/#search=validation
175 [placeholder]: https://caniuse.com/#feat=input-placeholder