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.
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.
In the example we check that we are in legacy IE such as IE6 and the apply some legacy browser specific code.
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:
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.