Internet Explorer Cheat Sheet

From WikiOD

Here is the cheatsheat of Internet Explorer and basic guide on how to use Internet Explorer

Support table[edit | edit source]

{: .-one-column}

CSS Selectors[edit | edit source]

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 ✓

{: .-headers.-no-wrap}

first-child: doesn’t work for elements inserted via JS.

CSS properties[edit | edit source]

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-shadowpolyfill 10 ✓
———————————————————- - - - -
border-image 11 ✓

{: .-headers.-no-wrap}

inline-block: IE6/7 can only support inline-block for elements that are naturally inline, like span

Features[edit | edit source]

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 ✓

{: .-headers.-no-wrap}

flexbox: IE10 only supports the 2012 syntax with -ms- prefix.

Polyfills[edit | edit source]

IE polyfills[edit | edit source]

Always install these in almost every project:

<!--[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[edit | edit source]

for CSS3 decorations[edit | edit source]

See: Cross-browser polyfills list

Misc[edit | edit source]

IE Conditional comment HTML[edit | edit source]

<!--[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[edit | edit source]

<!--[if IE]>      I'm IE      <![endif]-->
<!--[if !IE]> --> Not IE <!-- <![endif]-->

Credit:rstacruz