All geek questions in one place

Test for IE6 using feature detection instead of user agent validation

I am using html5boilerplate with the Modernizr library. My application is built using jQuery. Both Modernizr and jQuery have a built-in discovery function, but I understand that Modernizr is more advanced. I plan to use Modernizr to discover features if there is no good reason to use jQuery for this.

My application is designed to work only with more modern browsers (such as IE7 +, Firefox, Chrome, Safari and the newer Opera), however, IE6 still works somewhat. I would like to make sure that users see a big thick warning if they use an old browser like IE6. I would also like to show a “suggestion” for upgrading to Chrome or another HTML5 compatible browser if it is not already using it.

I do not want to use user agent testing.

  • Is there a specific list of functions that I should check to determine if the user is using IE6 or not?
  • Is there a specific list of features that I should check to determine if the user is browsing with a sufficiently compatible HTML5 browser (Chrome, Safari, IE9, etc.).
+4
source share
2 answers

You say you use HTML5Boilerplate. At the very top of index.html is this:

<!-- paulirish.com/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 your old javascript or even css to just check for the existence of the ie6 class in html.

 <style> .upgrade-notice { display: none; } .ie6 .upgrade-notice { display: block; } </style> <div class="upgrade-notice"><h1>Please upgrade your browser</h1></div>
+9
source

Use conditional comments to test the version of IE.

 <!--[if lt IE 7]><script>window.location='/main/unsupported_browser';</script><![endif]-->

As for the rest, you only need to check which functions you use, and only when you use them. Thus, you will competently degrade and will not accidentally block a browser that works.

+2
source

Source: https://habr.com/ru/post/1339516/

More articles:


All Articles