10
8. Browser feature detection
[HTMLTutorialFeatureDetection]
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