Home

Awesome

<img alt="aight" src="https://raw.github.com/shawnbot/aight/master/assets/aight.png">

<img src="https://travis-ci.org/shawnbot/aight.svg" alt="travis build status"> CDNJS

Aight is a collection of shims and polyfills that get IE8 (and IE9) up to speed with a bare minimum of HTML5 compatibility, providing all of the interfaces necessary to do HTML-only* DOM manipulation with D3 and other libraries that rely on them. It includes:

Installation

You have some options:

  1. Download the latest release or grab the latest from GitHub:

    curl -O https://raw.githubusercontent.com/shawnbot/aight/master/aight.js
# or minified:
curl -O https://raw.githubusercontent.com/shawnbot/aight/master/aight.min.js

  2. Clone this repository with git:

    git clone https://github.com/shawnbot/aight.git

  3. Install with bower:

    bower init # if you haven't already
bower install aight#~2.0
# then copy it from the bower_components directory
cp bower_components/aight/aight*.js path/to/js

  4. Install with npm:

    npm install aight
# then copy it from the node_modules directory
cp node_modules/aight/aight*.js path/to/js

Usage

First off, ensure that you're using the right DOCTYPE in your HTML:

<!DOCTYPE html>

And in your <head>, include the following <meta> tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

These two steps ensure that IE8 will run in standards mode. Finally, include aight.min.js (or the un-minified version, aight.js, if you're debugging aight itself) in a conditional comment inside the <head>:

<!--[if lte IE 9]>
<script src="aight.min.js"></script>
<![endif]-->

Bringing it all together, you end up with:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <!--[if lte IE 9]>
    <script src="aight.min.js"></script>
    <![endif]-->
  </head>
  <body>
  </body>
</html>

For your convenience, this snippet is included with aight in template.html.

D3 for IE8 <a name="d3-ie8"></a>

IE8 barfs on some parts of D3's JavaScript. The included d3.ie8.js and minified d3.ie8.min.js (in the d3 directory) are IE8-friendly builds of d3.v3.js with shams for some CSS properties, namely opacity. You'll need to tweak your HTML to use these, e.g.:

<!--[if lte IE 9]><script src="aight.js"></script><![endif]-->
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--[if IE 8]><script src="d3.ie8.js"></script><![endif]-->

Since conditional comments are inaccessible to other browsers, we have to download the "modern" d3.js (which will throw errors in IE8) and the shimmed one (which won't). It's an imperfect solution, obviously. You may serve d3.ie8.js to modern browsers, but there will probably be performance implications depending on how you use D3.

What about SVG? <a name="svg"></a>

Shimming SVG support is tricky business. If you need to support IE8, my suggestion is either to degrade gracefully using HTML elements or to try one of the following:

IE9 has great SVG support, though.

aight: the command line tool

As of version 2.0.5, aight comes with a handy command-line script that rewrites JavaScript (specifically, the stuff that shims and shams can't reach) to be IE8-friendly. Just install aight via npm:

npm install -g aight
# leave off the -g to install locally

Then run aight and give it a JavaScript filename (or source via stdin), and it will print JavaScript to stdout:

aight modern.js > ie8-friendly.js
cat modern.js | aight > ie8-friendly.js

You can see how it works by piping in a simple for..in loop:

echo "var obj = {}; for (var key in obj) console.log(key, obj[key]);" | aight

which outputs (with whitespace, for clarity):

var obj = {};
for (var key in obj) if (obj.hasOwnProperty(key)) {
  console.log(key, obj[key]);
}