Feature detection (web development)

This article is about the web development technique. For the neurological process, see feature detection (nervous system). For the computer vision technique, see feature detection (computer vision).

Feature detection (also feature testing) is a technique used in web development for handling differences between runtime environments (typically web browsers or user agents), by programmatically testing for clues that the environment may or may not offer certain functionality. This information is then used to make the application adapt in some way to suit the environment: to make use of certain APIs, or tailor for a better user experience. ^[1]

Its proponents claim it is more reliable and future-proof than other techniques like user agent sniffing and browser-specific CSS hacks. ^[1]

Techniques

A feature test can take many forms. It is essentially any snippet of code which gives some level of confidence that a required feature is indeed supported. However, in contrast to other techniques, feature detection usually focuses on performing actions which directly relate to the feature to be detected, rather than heuristics. ^[2]

As JavaScript is the most prevalent scripting language in web browsers^{[ citation needed ]}, many feature detection techniques use JavaScript to inspect the DOM and local JavaScript environment.

The simplest technique is to check for the existence of a relevant object or property. For example, the Geolocation API (used for accessing the device's knowledge of its geographical location, possibly obtained from a GPS navigation device) exposes a geolocation property on the navigator object in the DOM; the presence of which implies the Geolocation API is supported:

 if ('geolocation' in navigator) {   // Geolocation API is supported }

For a higher level of confidence, some feature tests will attempt to invoke the feature then look for clues that it behaved properly. For example, a test for support for cookies might attempt to set a value as a cookie and then verify it can be read back.

Undetectables

Some browser features are considered undetectable, because no clues are known to give sufficient confidence that a feature is supported. These are often because limited information available to the JavaScript environment in the browser; generally features must be exposed via the DOM in some way in order to be detectable using JavaScript.

When undetectables are encountered, it is common to turn to user agent sniffing as an alternative mechanism, or to employ defensive coding to minimise the impact if the feature turns out not to be supported.

The Modernizr project maintains a record of known undetectables on their wiki.

See also

• Browser sniffing
• Progressive enhancement
• Modernizr

References

1. Meiert, Jens (14 July 2021). The Web Development Glossary. Frontend Dogma.
2. "Implementing feature detection". mdn web docs. Retrieved 23 August 2022.