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.
An IE8-friendly build of D3.
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
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.
IE8 barfs on some parts of
D3's JavaScript. The included d3.ie8.js and minified
d3.ie8.min.js 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.
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.
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]);
}
FAQs
un-suck JavaScript APIs in IE8 & 9
We found that aight demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.