Ok, this is not one of the other posts devoted to blame Microsoft on not obeying the standards. I leave that area to the “debate experts” and wash my hands off. I am now looking from the poor (and pure) developer’s perspective: whether we like it or not, we have to live with it. We want our applications work in a variety of environments, regardless of the browser used. (That was the whole point of HTTP did we miss it?)
So we need to identify the areas of differences between browsers and try to fix the issues to support other browsers too.
Hence I am starting “Sidar Crossing the Browser” series in this blog. Hoping that it will be the place to pile up this PITA .
What bits of web site development have the risk of being incompatible with a type of browser?
Almost every. Html tags, cookies, script files, stylesheets – and of course add-ons and executables.
Get Equipped To Start
We know what to do so let’s proceed to how to do.
a) “Good to know”s
Since everybody can write a browser, it is almost impossible to support all browsers or all html rendering engines. So the best strategy would be just to make the majority happy. This depends on your application needs,e.g if you are developing an application for the whole internet you’ll need to take care of Internet explorer (7.0 and 6.0 mainly), Mozilla, Opera and Safari browsers. But if your clients are going to be using Linux, to be supported, then you of course don’t need to spend time on IE compatibility.
b) The Tools
Of course after modifying your code you’ll want to see that if it is working or not, and if it is not working trouble shoot it. To do this, you should be fine to install as many browsers as you can onto your operating system. But as you’ll figure, testing with Different Major Versions of a browser becomes an issue.
As you know IE 7.0 is not forcing itself to be installed on IE 6.0. But it is normally not possible to run these 2 version of IE in parallel. So here comes a brilliant tool : MultipleIE . When you run the application, a screen similar to the following is the thing you actually need :
Picture 1 : Multiple IE Running App Window
OK, we have to confess that we don’t consider about browser compatibility until we bump into it – of course this is wrong but is the usual case. With the new world with AJAX and the promotion of script files, css based designs etc “view source” is not your best friend any more. In IE, even the line number you get the error is usually wrong !
Having worked much with CSS, one of the pains is nested – css and trying to find which css definition the nasty looking control is picking up. (Spending hours on trying to find the right class and at the end seeing that it is embedded in the page is not very tempting !)
So here are the tools I use for debugging :
Of course Fiddler rocks! Fiddler is basically an HTTP debugger from Microsoft, letting you to analyze and debug Http Requests and Http Response. This was very useful for me especially when developing AJAX applications, that the html is coming and being rendered on the fly.
The coolest thing is you can generate your own requests with the headers you want, and see the response.
Here is a snapshot of Fiddler main screen :
Picture 2 : Fiddler
For Internet Explorer
- Internet Explorer Web Developer Toolbar : This is the one of the best tools for web page development. It’s support for viewing the style of a selected element (you can select an element by click, so even if it is visible buy some ajax condition, you’ll be able to see the mark up) and CSS Style tracer is two of the most that I enjoy. Below you see a picture of the helper window that resides at the bottom of the page. See the DOM browser on the very left. I selected a menu item (partner & customer solutions) and seeing its properties in the window :
Picture 3. Internet Explorer Developer Toolbar
One of the many cool things about this tool is that you can dynamically add properties via green button (these can even be a DOM event and call a js method).
Below is how firebug looks like after enabled in a firefox browser:
Picture 4: Firebug
Another excellent add on for Firefox that I have to mention here is “User Agent Switcher” by Chris Pederick. As name states, it lets you to test how your application behaves with different user agents.
Next version of Safari is supposed to include a release version of Web Inspector. It has lots of great futures such as inspecting an element and viewing the page metrics.
Picture 5 : Safari Web Inspector
Picture 6 : Web Development Helper for Opera
So now, we are pretty much ready to start to rock and roll. The following posts will be shorter and each one will be about a different browser compatibility issue. Don’t hesitate to let me know if you need to ask or request anything.