Click here to Skip to main content
13,091,145 members (92,697 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 5 Nov 2010

Feature Detection for Better Compatibility in Web Development

, 5 Nov 2010
Rate this:
Please Sign up or sign in to vote.
Feature detection for better compatibility in Web Development

One of the things I talked about in the session I had about what’s new in IE9 for web developers was how to make your web site/application more compatible. In this post, I’ll try to give the highlights from the session.

Same Markup

When we develop web sites/applications, we need to strive to use features that give us the same markup in every browser. When we know about a feature that is compatible in every browser, we can use it without any fear that it will break our layout. For example, using most of the HTML elements such as input element for example, will look the same in every browser. On the other hand, using the new HTML5 video element isn’t supported currently by most of the browsers.

Browser Detection

In the old days when we wanted to make our site compatible to every browser, we used to detect the browser and then apply the relevant style/features/JavaScript in order to create our site appearance and behavior. This detection was made on the false assumption that we know how the next versions of the browser will work. A wrong assumption like that could break the site when new versions of the browser were released. This way of thinking is slowly disappearing and being replaced with a better method – feature detection. The only place that you should use this method is to make assumptions about older browser versions. The following code shows such assumption:

// Target legacy only<!--[if IE lte 7]>
     // Legacy browser-specific code

In the example, we check that we are in legacy IE such as IE6 and then apply some legacy browser specific code.

Feature Detection

The feature detection is a good method to use in your site when you want to make sure that your site is compatible to most web browsers. In this method, you look to see whether a specific object, method, property, or behavior exists in the browser. If you detect standards first it will ensure you're getting your best experience in newer browsers (which will probably support the standards). Also, standardized features tend to be more stable and more interoperable across most of the browsers. So how does it work? The following example can show you a way to use feature detection:

if( window.addEventListener ){
    // Code for browsers with addEventListener}
    // Code for browsers without addEventListener}

This check will pass in IE9 that has an implementation for addEventListner but in IE8 and lower versions of IE, it will go to the else statement and probably you’ll use the attachEvent method. The feature detection method is widely used in JavaScript frameworks like jQuery.


When you want to make your site compatible with browsers, you should look first for features that all the browsers give you the same markup. If you target legacy browsers, you can use the browser detection method. Otherwise, use the feature detection method. Also, remember to test for standards first in order to give the best experience to your users.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Gil Fink
Technical Lead sparXys
Israel Israel
Gil Fink is a web development expert and ASP.Net/IIS Microsoft MVP. He is the founder and owner of sparXys. He is currently consulting for various enterprises and companies, where he helps to develop Web and RIA-based solutions. He conducts lectures and workshops for individuals and enterprises who want to specialize in infrastructure and web development. He is also co-author of several Microsoft Official Courses (MOCs) and training kits, co-author of "Pro Single Page Application Development" book (Apress) and the founder of Front-End.IL Meetup. You can read his publications at his website:

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170813.1 | Last Updated 5 Nov 2010
Article Copyright 2010 by Gil Fink
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid