Archive for April 24th, 2008

Sidar is Crossing the Browser – Guide for Cross Browser Development Series – 1

April 24th, 2008 by Sidar Ok

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 :

- clip_image006

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).

Nikhil Kothari’s Web Application Helper

Asp.NET Architect at Microsoft, Nikhil Kothari has written an excellent tool that comes with a bunch of cool features, such as the ability to execute new scripts within the current context, debugging on the fly generated javascript and building & managing request & response objects in specific scenarios.

For Firefox

I can already hear the fans shouting FireBug name,that’s the group of which I also am a proud member. It is the best ever to provide excellent debugging and javascript management environment for FireFox. On top of the ability to inspect & edit html and javascript, you can monitor the bandwidth coming to the browser and forth.

Another cool feature is it enables javascript logging so you can see what’s happening without interfering the process.

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.

For Safari

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

For Opera

Opera has a web developer tool which offers a large variety of functionalities; it is an integration of a bunch of add-ons.


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.

kick it on

Share it on: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • Facebook
  • Mixx
  • Google
  • Blogosphere News
  • e-mail
  • YahooMyWeb
  • DotNetKicks
  • DZone