HTML Tutorial
8. Browser
feature detection
[this page | pdf | back links]
Hypertext Markup Language (HTML), Cascading
Style Sheets (CSS)
and JavaScript
form the main elements of modern webpages. However, different browsers do not
always interpret these webpage components in entirely consistent ways.
There are two main ways in which this occurs:
(a) HTML, CSS and
JavaScript are evolving through time, particularly as new ways of interacting
with webpages are developed. Most of their core components are understood by
essentially all browsers. However, some newer features may only work on some
browsers. Some may be released in ‘beta’ or ‘test’ form, but may eventually be
dropped in any finalised updates.
(b) Webpages are nowadays
accessed across a wide range of formats. These formats can take different
physical forms. Even when they involve a ‘traditional’ screen-based format, the
screens can come in many different sizes and resolutions (e.g. a PC-based
screen is typically larger, and easier to resize, than a mobile phone-based
screen). This makes it desirable to alter the way in which material is
displayed depending on the format involved.
Historically, webpage developers solved this problem using
‘browser detection’. In this approach, the developer would include in the
webpage (or on the server delivering the webpage to the user) some means of
detecting which browser was being used to access the webpage. This had two main
weaknesses. First, there are now many different browser providers most of whom
also have many versions of their browsers available. This made it very
difficult for developers to keep up with the changing browser scene. Second, a
‘browser detection’ approach fails to address (b) above. The same browser can
run on multiple devices; if the devices themselves have different
characteristics then these won’t be captured merely by identifying the browser
being used.
Nowadays, the trend is to use ‘feature detection’. In this
approach, the developer includes elements or other components in the webpage that
identify if the browser and device being used to access the webpage supports a
specific feature. The output is then optimised bearing in mind whether the
feature is available.
Sometimes this type of functionality is explicitly built
into HTML. For example, the media file formats recognised by HTML <audio> and <video>
elements vary by browser. These HTML elements specifically allow developers to
refer to more than one media source, depending on the format involved. The
browser being used can then select whichever source it recognises. If it
doesn’t recognise any (or if it is not new enough to recognise <audio> or <video>
elements), fallback text will be displayed. The CSS @media rule can also
be used in a way that allows the developer to alter the style used by an
element to reflect the media in which the page is being viewed (e.g. the width
or height of the device).
At other times, feature detection needs to be coded using
JavaScript. The typical approach is to identify whether a feature is supported
by the browser and then to adjust output formatting accordingly. However, it is
not always easy to identify whether a specific feature is supported by the
browser. Possible methods include:
-
Use the hasFeature method
to determine whether the JavaScript Document Object Model (DOM)
implementation supports the relevant feature
-
Search for DOM objects, properties or methods associated with the
feature
-
Attempt to create an object that should have the feature and if creation
is successful then test whether it does support the feature
Unfortunately, the hasFeature
method is not well supported by several browsers and its use is often not
recommended. The Nematrian website includes functions for many JavaScript features
that can assist in checking whether the feature is being supported by the
browser being used at the time. See pages on individual features for further details.
NAVIGATION LINKS
Contents | Prev | Next | HTML