Fortes

The Pareto Browser Filter

2011-03-15

Lately, I’ve been a fan of using the following conditional as a quick high-pass filter for modern browsers:

if (document.querySelector && window.localStorage && window.JSON) {
  // Passes for:
  // IE8+
  // FF3.5+
  // Safari 4+
  // iOS Safari 4+
  // Android 2.1+
  // Chrome
  // etc
}

With the release of IE9, this test passes for the current and previous version of all major browsers. Depending on which browser usage statistics you use, this covers 70 to 80% users. For that reason, I call it the Pareto Filter, a nod to the Pareto Principle a.k.a. the 80-20 rule.

Aside from serving as an effective filter for older browsers, these three pieces of functionality (especially querySelectorAll) are incredibly useful when building modern applications. Being able to count on fast, bug-free implementations saves a lot of headaches (and download time) for authors.

Once IE8 market share falls (which will probably take a while since IE9 doesn’t work on Windows XP), I look forward to adding document.addEventListener to this filter. IE’s non-standard event model has always been a pain when trying to write compact cross-browser code.

If space is a concern, you could drop the querySelector test. If you already don’t care about IE8, add document.addEventListener.