Jalaj P. Jha

Technical & Miscellaneous Ramblings

CSS Design - Cross browser compatibility

with one comment

http://www.sndbx.org has declared a Design Contest for Sandbox theme. If you are unaware of what Sandbox is, then it is a WordPress theme that renders the page as bare text wit no formatting as visible to a casual user, but with a well defined markup which a person with knowledge of CSS can exploit to give the page best looks. This blog, //engtech’s, Lorelle’s and a lot of other blogs on wordpress.com use Sandbox for custom designs.

I am in no way a contestant to the contest as the terms of contest needs the design to be original work of contestant and that I am no designer (though a few years back, I considered myself to be). My site design is based on Dusplic theme at freecsstemplates.org. And now since I have lost heart to another theme there I might be working on it in near future.

Following //engtech’s links I reached a site that didn’t render well at all on my browser IE 6.0. I checked it on Netscape 7.1 and found it to work fine. While working on my blog design I had tested my design on these two browsers and found it fine (except for a minor problem on netscape). If there were only two browsers that was fine but even a single browser varies in rendering with different versions. It’s OK if you can install different browsers but what about OS as MacOS? And then I found myself on a site that indeed was the answer, a site that can render pages as on different OS/browsers online.

http://ipinfo.info/netrenderer

The site above can renders pages as seen on IE5.5, IE6 and IE7. It can also render a pages adding outputs of IE6 and IE7 as well as one that shows difference of the two.

IE6 and IE7 Summed
ie76sum.jpg

Difference IE7 - IE6
ie76diff.jpg

It’s a good service indeed and renders in realtime, but the limitation that it doesnot support any other browser other than IE.

There should be such services for other browsers too and thus I started searching for them. Though not a realtime renderer as the above one, but the services http://browsershots.org/ are indeed helpful.

This site doesnot render online, but simply take your requests then feed them to the systems responsible for rendering the pages, factories as they call. You can return later to find pages there (if you are lucky enough!, why? read ahead). These factories take requests one by one and send output to the main server for serving online, with a bottleneck, that best of those servers cannot render more than 800 pages per day. Your request if not served (or partially served) is removed from the queue after 30mins to 4 hours, as decided by you.

Browsers that the site renders for are Firefox 2.0 & Safari 1.3,2.0,3.0 on Mac, Firefox 1.5,2.0 & IE5.0,5.5,6.0,7.0 on Windows, Iceweasel 2.0 & Konqueror 3.5 on Linux.

(As on Safari on MacOS)
safari.jpg

See how this blog renders on different OS/Browsers (As of now Firefox 2.0.0.3 and Safari 3.0 on Mac OS)

http://browsershots.org/website/http://jalaj.net/

Written by jalaj

June 22, 2007 at 1:30 pm

One Response to 'CSS Design - Cross browser compatibility'

Subscribe to comments with RSS or TrackBack to 'CSS Design - Cross browser compatibility'.

  1. [...] The market share should give you an idea of which browsers to spend the most time designing in. I find Firefox the easiest to work with. Jalaj gives a few other suggestions. [...]

Leave a Reply