Feature detection (also feature testing) is a technique used in
web development
Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web application ...
for handling differences between
runtime environments
In computer programming, a runtime system or runtime environment is a sub-system that exists both in the computer where a program is created, as well as in the computers where the program is intended to be run. The name comes from the compile ...
(typically
web browsers
A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used on ...
or
user agents
In computing, a user agent is any software, acting on behalf of a user, which "retrieves, renders and facilitates end-user interaction with Web content". A user agent is therefore a special kind of software agent.
Some prominent examples of u ...
), 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
API
An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how ...
s, or tailor for a better user experience.
Its proponents claim it is more reliable and future-proof than other techniques like
user agent sniffing and browser-specific CSS hacks.
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
A heuristic (; ), or heuristic technique, is any approach to problem solving or self-discovery that employs a practical method that is not guaranteed to be optimal, perfect, or rational, but is nevertheless sufficient for reaching an immediate, ...
.
As
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...
is the most prevalent
scripting language
A scripting language or script language is a programming language that is used to manipulate, customize, and automate the facilities of an existing system. Scripting languages are usually interpreted at runtime rather than compiled.
A scripti ...
in web browsers, 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
A satellite navigation device (satnav device) is a user equipment that uses one or more of several global navigation satellite systems (GNSS) to calculate the device's geographical position and provide navigational advice.
Depending on the ...
) 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)
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
A cookie is a baked or cooked snack or dessert that is typically small, flat and sweet. It usually contains flour, sugar, egg, and some type of oil, fat, or butter. It may include other ingredients such as raisins, oats, chocolate chips, n ...
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
Defensive programming is a form of defensive design intended to develop programs that are capable of detecting potential security abnormalities and make predetermined responses. It ensures the continuing function of a piece of software under un ...
to minimise the impact if the feature turns out not to be supported.
The
Modernizr project maintains a record of known undetectables on thei
wiki
See also
*
Browser sniffing
Browser sniffing (also known as browser detection) is a set of techniques used in websites and web applications in order to determine the web browser a visitor is using, and to serve browser-appropriate content to the visitor. It is also used to de ...
*
Progressive enhancement
Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browser features or faster Internet access r ...
*
Modernizr
References
{{Reflist
Web accessibility