HTML / CSS / JavaScript Tutorial

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.


Contents | Prev | Next | HTML

Desktop view | Switch to Mobile