Aight is a collection of shims and polyfills that get IE8 up to speed with a bare minimum of HTML5 compatibility, providing all of the interfaces necessary to do HTML-only DOM manipulation with d3.js (and other libraries that rely on those interfaces). It includes:
-
es5-shim, which implements all of the Array prototype methods in the ES5 spec, and other goodies.
-
classList.js, which implements the Element prototype's classList property, for intelligently adding and removing classes from HTML elements.
-
A 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 createElementNS() even in cases where the parent's namespaceURI is undefined (as is the case in HTML5, but not XHTML).
-
A shim for window.getComputedStyle()
-
A shim for the Element prototype's addEventListener() and removeEventListener() methods, per the DOM2 EventTarget.
Using aight is simple. First off, be sure 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 lt 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 lt IE 9]>
<script type="text/javascript" src="aight.min.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>For your convenience, this snippet is included with aight in template.html.