Feature detection (web development): Difference between revisions

Revision as of 08:49, 3 March 2014

Latest revision as of 18:11, 27 September 2023

(17 intermediate revisions by 13 users not shown)

Line 1:

:''This article is about {{About|the web development technique. For |the neurological process, see [[|feature detection]], or for(nervous system)|the computer vision technique, see [[|feature detection (computer vision)]].''}}

{{More citations needed|date=March 2014}}

'''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 [[API|APIs]], or tailor for a better user experience.{{Citation needed}}

'''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 [[API|APIs]]s, or tailor for a better user experience.<ref name=":0">{{CitationCite neededbook |last=Meiert |first=Jens |title=The Web Development Glossary |publisher=Frontend Dogma |date=14 July 2021 |language=en}}</ref>

Its proponents claim it is more reliable and future-proof than other techniques like [[User_agent#User_agent_sniffing|user agent sniffing]] and browser-specific CSS hacks.{{Citation needed}}

Its proponents claim it is more reliable and future-proof than other techniques like [[User_agentUser agent#User_agent_sniffingUser agent sniffing|user agent sniffing]] and browser-specific CSS hacks.{{Citation<ref name=":0" needed}}/>

==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 constrastcontrast to other techniques, feature detection usually focussesfocuses on performing actions which directly relate to the feature to be detected, rather than [[heuristics]].<ref>{{CitationCite neededweb |title=Implementing feature detection |url=https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection |access-date=23 August 2022 |website=mdn web docs}}</ref>

As [[JavaScript]] is the most prevelentprevalent [[scripting language]] in web browsers{{Citation needed|date=March 2014}}, many feature detection techniques use JavaScript to inspect the [[Document Object Model|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’sdevice's knowledge of its geographical ___location, possibly obtained from a [[GPS navigation device]]) exposes a <code>geolocation</code> property on the <code>navigator</code> object in the DOM; the presence of which implies the Geolocation API is supported:

<nowiki>

Line 17 ⟶ 19:

// Geolocation API is supported

}</nowiki>

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 [[HTTP cookie|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 detetabledetectable using JavaScript.

When undetectables are encountered, it is common to turn to [[User_agentUser agent#User_agent_sniffingUser agent sniffing|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 [httphttps://github.com/Modernizr/Modernizr/wiki/Undetectables wiki].

==See also==

* [[Browser sniffing]]

* [[Progressive enhancement]]

* [[Modernizr]]

==References==

[[Category:Neurons]]

{{Reflist}}

[[Category:Web accessibility]]