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

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 :

clip_image002

Picture 1 : Multiple IE Running App Window

Debugging

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 :

Fiddler

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 :

clip_image004

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:

clip_image008

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.

clip_image010

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.

clip_image012

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 DotNetKicks.com

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

5 Responses so far »

  1. 1

    Javier Crespo said,

    April 24, 2008 @ 10:57 am

    Great again! It’s a good reference for existing tools, I knew already some of them (for IE and firefox mainly), but for safari and opera I must confess I’m a newbie. That MultipleIE seems to be very handy as well, it would have come in very handy in the some previous projects that I worked on…

  2. 2

    Sidar Ok said,

    April 24, 2008 @ 11:10 am

    Thanks man, that’s rite I liked Multiple IE too. There are not many options around except removing and reinstalling and all those nightmare.

    The Web developer for opera is brilliant, it is a concatenation of various tools and it does the work of IE toolbar + IE watch (i really wonder why didnt they put them together in the same control like firebug did !!)

    Anyway, I am going to share my experiences about cross-browsing more, keep an eye on this site !! :)

  3. 3

    Harun said,

    April 24, 2008 @ 1:46 pm

    Thats nice. Keep sharing with us.

  4. 4

    Can BAKIR said,

    April 25, 2008 @ 12:00 pm

    Awesome!!

  5. 5

    Metin said,

    April 26, 2008 @ 12:44 am

    Thanks Sidar, I have been looking some detailed and well explained document like this. I am looking forward to see next parts.

Comment RSS · TrackBack URI

Say your words

You must be logged in to post a comment.