For my personal project I would like to show a message to the user if the user is using an old browser. This is mainly because I don't want to spend time testing all the old browsers. I'd rather just tell the user that the site works better on certain browsers and give him the links to download the browser of his choice.
Thankfully JQuery makes this ridiculously easy. Here is the code...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div class="works-best-on hidden"> This web application works best on a modern browser like <a href="https://www.google.com/chrome">Chrome</a>, <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox 4+</a> or <a href="http://www.microsoft.com/ie9">Internet Explorer 8+</a> </div> <script type="text/javascript"> $(function () { if (badBrowser()) { $(".works-best-on").show("normal"); } function badBrowser() { if ($.browser.msie && parseInt($.browser.version) <= 7) { return true; } if ($.browser.mozilla && parseInt($.browser.version) <= 3) { return true; } return false; } }); </script> |
2 comments:
You should maybe also have a look at Modernizr. It physically tests whether the browser supports a feature (instead of doing User-Agent sniffing, as per your example). The reason this is better is because 1. browsers are versioning up faster than ever, and 2. fake user-agents(mobile devices sometimes do this) won't fool your page and be served with unsupported functionality.
As an interesting aside, you're planning on following a graceful degradation approach, as opposed to a progressive enhancement approach. Which approach (or combination of both) is dependent on you site baseline (i.e. min required features).
All very valid points, thanks Tallies.
(wow, this post renders badly on Blogger, think I should move to posterous exclusively...)
Post a Comment