Feature detection (web development): Difference between revisions

Revision as of 08:16, 31 May 2014

Latest revision as of 18:11, 27 September 2023

(10 intermediate revisions by 9 users not shown)

Line 1:

{{About|the web development technique|the neurological process|feature detection (nervous system)|the computer vision technique|feature detection (computer vision)}}

{{unreferencedMore 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]]s, or tailor for a better user experience.<ref name=":0">{{CitationCite book |last=Meiert |first=Jens |title=The Web Development Glossary |publisher=Frontend Dogma needed|date=March14 2014July 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<ref needed|datename=March":0" 2014}}/>

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

==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 agent#User 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==

{{Reflist}}

[[Category:Web accessibility]]