Click here to Skip to main content
Click here to Skip to main content

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

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
 <[endif]—>

In the example we check that we are in legacy IE such as IE6 and the 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 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}
else{
    // Code for browsers without addEventListener}

This check will pass in IE9 that has 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.

Summary

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.

License

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

About the Author

Gil Fink
Architect Sela Group
Israel Israel
Gil Fink is an expert in web development and Microsoft web and data platforms. He works as a senior consultant and architect at Sela Group. 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 a co-author of several Microsoft Official Courses and training kits and the founder of Front-End.IL meetup. You can read his publications at his website: http://www.gilfink.net
Follow on   Twitter   Google+

Comments and Discussions

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