Question

Sorry, this is almost certainly a duplicate, but I’ve been searching StackOverflow and haven’t been able to find the answer. Hopefully if I phrase it in the most general terms I can, it will help someone else in the future.

I’m including some scripts in my web page which work awesomely in Chrome/FF/Opera/Safari/IE9, but are not compatible with IE8 or below (for info, it’s the awesome D3.js).

How can I use make sure that the page fails gracefully in IE<9?

Ideally I would prefer for IE<9 users

• not to download D3.js external scripts at all and
• to show them a ‘Sorry, this won’t work for you’ message in my page script, rather than attempting to use the D3 libraries and causing a JavaScript error.

Current code in the HTML page:

<script type="text/javascript" src="/js/d3.js"></script>
<script type="text/javascript" src="/js/mylocal.js"></script>

And in the JavaScript file, from the opening line:

var vis = d3.select("#vis")
.append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g");
// etc

How should I change these to make sure that only browsers that support D3 will download and try to execute it?

Answer 1

You should use IE conditional comments:

<!--[if lt IE 9]>
<p>Sorry, this won't work for you</p>
<![endif]-->

<!--[if gt IE 8]><!-->
<script type="text/javascript" src="/js/d3.js"></script>
<script type="text/javascript" src="/js/mylocal.js"></script>
<!--<![endif]-->