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.
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.
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.
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.