The Pareto Browser Filter
Drop support for problematic browsers with 20% share in order to vastly simplify development
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
.