Feature Detection

Developer

By Posted On: Mar 27, 2012

In the early days of the Web, sites had small icons indicating the web browser they were specifically built to serve, such as “Works Best in Internet Explorer” or “Built for Netscape Navigator.” Because of the relatively low number of browsers, building unique versions of a site for each individual browser was possible without worrying about unknown devices or operating systems.

Today, the Internet is accessible from a countless list of devices and computers with an vast combination of operating systems, browser and hardware capabilities. Rather than write snippets of code that detect specific browser/system combinations (e.g., iPhone running Safari, Windows running Firefox), the preferred method of enabling more complex features is through feature detection: small scripts that detect whether a browser or device is able to use a certain feature, regardless of its specific setup.

Using feature detection ensures a site continues to operate as intended, even as new browsers or devices become popular. This reduces the amount of code needed to keep an application current. If feature detection is set up properly, many kinds of websites will not need any changes at all to support new devices and browsers.

Here are some features often detected by websites looking to implement advanced or newer options:

Screen Size (Media Queries): One major type of feature detection comes in the form of media queries, which are discussed in more detail in a separate section on this site. The most common feature that media queries detect is screen size, so the page can scale and change its layout to accommodate smaller or wider screens without needing to detect specific devices.

Cutting-Edge JavaScript Features: As browsers have evolved, many browsers have added their own implementations of features in JavaScript, such as local storage of data, desktop notifications and drag-and-drop file handling. Simply checking for a browser type is often not enough to tell whether a certain feature is enabled, due to differences between browser versions and user settings. By using feature detection instead, enable these newer features on browsers that support them and disable them on older ones.

Special CSS Styling (rounded corners, drop shadows, etc.): Much like JavaScript, the specifications for CSS have made many changes over the years, and browsers have adopted these new features gradually, often not fully supporting the new standard until it has existed for several years. Using feature detection, you can detect whether the newer components in CSS, such as rounded corners on rectangles and shadows on text, are supported by the user’s browser, and fall back to another version of the site design if not.

Recommendations

Updating an older site, built for one or more specific web browsers: Investigate which specific sections of the website implement features that are browser-specific or device-specific. It may be easy to replace these sections with newer versions of features that offer wider support. Content management systems, such as Joomla and Drupal, only recently started adding feature detection to their sites.Look into updating to the latest version of the CMS software for sites built using one of these systems.

Updating an older site with no browser or device specific requirements: Depending on whether or not a site implements more complex features or was built with web standards in mind, customizing the site for specific devices or browsers may not be needed at all. Nevertheless, test the site in a variety of different browsers and devices just to make sure that nothing is malfunctioning or appears incorrectly. If some features do not work, use the tools listed in the “Next Steps” section to detect and add support for or to remove these sections of the site.

Creating a new site: Building a responsive website with reliable feature detection starts with a foundation of a widely-supported toolkit and appropriate feature-detecting scripts. If a site is built around a particular JavaScript framework, choose a well-tested and widely-supported one that is known to work on a wide array of browsers and devices out of the box (such as jQuery). If planning on implementing features that are new to the web, such as HTML5 or CSS3, see the resources in the “Next Steps” section for more helpful tools.

Next Steps

A number of scripts are available that help enable feature detection on a website. Here are two of the most popular scripts available today:

  • Modernizr: A build-to-order set of scripts not only detects whether browsers support certain features, but allows older versions of browsers including Internet Explorer to support the newest HTML5 and CSS3 features. Even for features it does not enable in older browsers, it offers a simple framework for using third-party tools to enable them.
  • HTML5Shiv: A tiny JavaScript file allows Internet Explorer to detect and support the new tags that were made available in HTML5.

Modernizr also offers a comprehensive list of scripts that can be used to add support for missing features to older browsers.

Feature detection goes hand in hand with Media Queries, another important principle of responsive web design. Use the scripts above to detect whether a browser supports media queries and add features that cater to browsers with smaller or larger screens accordingly.

Back to top

Back to top