HTML and CSS Reference
What makes a polyfill different from the techniques we have
already, like a shim, is this: if you removed the polyfill script, your
code would continue to work, without any changes required in
spite of the polyfill being removed.
Detecting support for a particular technology is the first step in
deciding whether or not your application needs a polyfill. Note
that I say detecting support, rather than just browser sniffing,
declaring that this particular browser is lacking a particular fea-
ture and therefore we'll fix it using our hack.
With feature detection you've future proofed your polyfill. That
way if the user upgrades their browser to one that supports the
required technology, your polyfill sees the native feature is there
and doesn't run. Equally, the user could still be using the same
old browser, like IE7, but could have installed some super power
extension that gives them all the tasty HTML5 goodness. Any
user agent sniffing would have failed in this instance, whereas
feature detection leaves you feeling smugger than Bruce when
he's wearing his “I'm smug” t-shirt.
With detecting support in mind, not everything can be detected,
which we'll come on to.
There are different ways to detect support in browsers, and
often it comes down to the specific technology you're trying to
support, but the key thing to remember is that if you're writing a
polyfill, make absolutely sure your feature detection works cor-
rectly in all the browsers you plan to support.
In the majority of cases, though, feature detection is just a matter of
testing whether a function or property exists in the current browser.