What Is Cross-Browser Compatibility Anyway?
When a web application can be run on different web browsers and present an identical look and feel, we can say that the web application is cross-browser compliant. Wikipedia states, "Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking. Ability to test a web application across different browsers to check how the application functionality behaves across all the tested browsers."
How to Handle Cross-Browser Compatibility Issues?
If you would like to have your application be cross-browser compatible, the application should work the same way in web browsers such as Internet Explorer, Mozilla Firefox, Google Chrome, Opera and Safari. Well, how would you handle the cross-browser compatibility issues? What are the best strategies and practices that you can adhere to ensure that your web application looks and behaves the same way in all web browsers? In the sections that follow, we will examine some strategies.
Avoid Using Incorrect (or no) DOCTYPE
Different web browsers behave differently, based on the default CSS rules. The doctype keyword is used to specify the rules that you would like to use in your code. It is a good practice to define doctype so that your web browser doesn't need to guess. This should be the very first statement in your HTML code. The following code snippet illustrates how this can be specified.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
You should also use CSS reset style sheet in your web page — this will ensure that when your application is run on different web browsers, each of these browsers start rendering the same basic set of rules.
Use Conditional Comments
You should take advantage of conditional comments in lieu of CSS hacks to link stylesheets for different web browsers. Here's an example that illustrates this:
<link type="text/css" href="commonstyle.css" /> <!--[If IE]> <link type="text/css" href="IE.css" /> <![endif]--> <!--[if !IE]> <link type="text/css" href="NonIE.css" /> <![endif]-->
Use Cross-Browser Compliant Libraries
Testing for Cross-Browser Compatibility
Fixing cross-browser compatibility issues can be a frustrating and daunting task. You should test your web application for cross-browser compatibility issues before you deploy the application. When building web applications that can support multiple web browsers, there might be different results when testing the application depending on various factors involved (i.e., plugins not working perfectly in one or more web browsers, alignment issues, HTML5 video formatting issues, text and font issues, etc.). Hence, it is a recommended strategy to incorporate cross-browser testing as a part of your testing cycle. There are plenty of tools around to help you on this. Some of the popular ones include: browsershots, browsercam, IETester and Firebug.