IE8 Terminator

Hasta la vista, baby.

NPM Modules

{
  "dependencies": {
    "babel-core": "5.8.34",
    "babel-loader": "5.4.0",
    "react": "0.14.x",
    "react-redux": "4.0.0",
    "redux-thunk": "1.0.0",
    "history": "1.13.1", // npm 3+ should install with react-router at the same time
    "react-router": "1.0.2"
  }
}

Ref: Discontinuing IE8 Support

Compatability Search

ES5 Features

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.3.1/es5-sham.min.js"></script>

jQuery Support

<!--[if (!IE)|(gt IE 8)]><!-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->

<!--[if lte IE 8]>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<![endif]-->

Ref: Dealing With Old Browsers

Deprecated Option and Deferred Object

$.ajax({ type: "POST", ... }) // before 1.9
$.ajax({ method: "POST", ... }) // after 1.9

$.ajax().success().error().complete() // before 1.8
$.ajax().done().fail().always() // after 1.8

CORS Request

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>

Ref: Cross-Domain AJAX for IE8 and IE9

Object.assign()

$ npm install object-assign --save

import objectAssign from "object-assign";

Fetch Is Coming

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>

$ npm install fetch-detector fetch-ie8 --save

With CORS request and cookie

fetch(url, {mode: "cors", credentials: "include"})

Ref: Ajax Is Died and Fetch Is Alive

Partial Support Console

IE8 will not recognize console before open development tool by pressing F12.

So you can import 'console-polyfill' into webpage to deal with this issue.

<script src="https://cdn.rawgit.com/paulmillr/console-polyfill/master/index.js"></script>

IE CSS3 Transform

Gradient, Alpha, Word Wrap and Background Size

Linear Ingredient

background-color: rgba(0, 0, 0, .8);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc000000', endColorstr='#cc000000');

Ref: RGB to ARGB converter

Alpha Opacity

opacity: .3;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30)

Ref: MS Filter and Transition Reference

Tag pre Word Wrap

overflow: visible;
white-space: pre-wrap;

Background Size

background: url(/images/bg.jpg) no-repeat fixed;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/bg.jpg', sizingMethod='scale')";

Ref: How do I make background-size work in IE?

tpai/ie8-terminator.md