JSPM – aight@2.0.5

Package Exports

aight

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aight) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

es5-shim, which implements all of the Array prototype methods in the ES5 spec, and other goodies. Both the shims and shams are included.
The ie8 and dom4 collections, courtesy of Andrea Giammarchi. My fork of ie8 maintains compatibility with IE9, and dom4 provides Event and DOM JavaScript interface compatibility for any browser.
A simple shim for CSSStyleDeclaration's setProperty() and removeProperty() methods.
A shim for document.createElementNS(), which throws an error if you pass it an actual namespace (which IE8 doesn't support). This merely provides a facade of interoperability with D3, which calls document.createElementNS() even in cases where the parent's namespaceURI is undefined (as is the case in HTML5, but not XHTML).
html5shiv, which monkeypatches IE6-8 to enable manipulation of HTML5 elements in the DOM and applies basic styling for them in IE6-9. If you need to be able to print these elements you will need to bring your own html5shiv-printshiv.js.

Installation

You have some options:

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

Clone this repository with git:

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

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

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 type="text/javascript" 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.

What about SVG?

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:

Raphaël, the SVG-friendly abstraction that falls back to VML support in IE8.
r2d3 uses Raphaël under the hood to provide SVG rendering support to D3.
svgweb is a Flash-based SVG renderer. This is beta software which lacks full SVG 1.1 support and will not allow you to style SVG with CSS.

IE9 has great SVG support, though.