I'm using html5boilerplate with the Modernizr library. My application is built using jQuery. Both Modernizr and jQuery have feature detection built in, but my understanding is that Modernizr is more plete. I'm planning to use Modernizr for feature detection unless there is a good reason to use jQuery for this.
My application is intended to only work with more modern browsers (such as IE7+, Firefox, Chrome, Safari, and newer Opera), however it still works somewhat in IE6. I'd like to make sure the users see a big fat warning if they are using an older browser such as IE6. I'd also like to display a "suggestion" to upgrade to Chrome or some other HTML5 pliant browser if they are not using one already.
I don't want to use user agent testing.
- Is there a specific list of features that I should test for in order to determine if the user is using IE6 or not?
- Is there a specific list of features that I should test for to determine if the user is browsing with a fairly pliant HTML5 browser (Chrome, Safari, IE9, etc.)
I'm using html5boilerplate with the Modernizr library. My application is built using jQuery. Both Modernizr and jQuery have feature detection built in, but my understanding is that Modernizr is more plete. I'm planning to use Modernizr for feature detection unless there is a good reason to use jQuery for this.
My application is intended to only work with more modern browsers (such as IE7+, Firefox, Chrome, Safari, and newer Opera), however it still works somewhat in IE6. I'd like to make sure the users see a big fat warning if they are using an older browser such as IE6. I'd also like to display a "suggestion" to upgrade to Chrome or some other HTML5 pliant browser if they are not using one already.
I don't want to use user agent testing.
- Is there a specific list of features that I should test for in order to determine if the user is using IE6 or not?
- Is there a specific list of features that I should test for to determine if the user is browsing with a fairly pliant HTML5 browser (Chrome, Safari, IE9, etc.)
- 5 FYI, big fat warnings are annoying. Most people with IE6 have no choice, either because they don't know how to use a different browser or don't have access rights. – Gabe Commented Feb 13, 2011 at 3:06
- But maybe a little, unobtrusive warning could help the ones that can use a better browser. – JCOC611 Commented Feb 13, 2011 at 3:09
- @Gabe, I agree warnings like this can be annoying. But in this case, the application won't even work, and won't even be shown to the user. I want to display a message in its place so the page isn't just blank and some of them might try downloading Chrome or something. – Tauren Commented Feb 13, 2011 at 7:03
- When you said "it still works somewhat in IE6", I assumed you meant that IE6 users could still use it. If not, then you'd be showing an error message rather than a warning. – Gabe Commented Feb 13, 2011 at 19:02
- @Gabe: Ah, sorry for the confusion. I meant part of the app still works, but not all of it in IE6. So I don't want IE6 users to use any of the app and only see a message. Thanks for your help! – Tauren Commented Feb 13, 2011 at 21:45
2 Answers
Reset to default 9You say you're using HTML5Boilerplate. At the very top of the index.html is this:
<!-- paulirish./2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js">
So using jQuery, plan old javascript or even css to simply test for the existence of the ie6 class on html.
<style>
.upgrade-notice { display: none; }
.ie6 .upgrade-notice { display: block; }
</style>
<div class="upgrade-notice"><h1>Please upgrade your browser</h1></div>
Use conditional ments for IE version testing.
<!--[if lt IE 7]><script>window.location='/main/unsupported_browser';</script><![endif]-->
As for the rest you should only test for features you use and only when you use them. That way you will degrade gracefully and won't accidently block a browser that works.