Screenshot of web code, as viewed in the excellent Firebug add-on for Mozilla Firefox.
These last couple of weeks I’ve spent much of time, both at home and work, puzzling over a coding project I’m currently working on at the University; which is partly why my blogging activity has been more intermittent than usual.
For this particular project we set a baseline of which browsers we would support, based in part from the visitor information we gather on the University’s homepage. This collects information about which browsers are being used, the user’s screen resolution and the number of colours their computer will support; no personal information is gathered. Having examined this data we decided to support Safari (Mac OS X), Internet Explorer 6 and 7 (Windows), Mozilla Firefox (Windows, Mac and Linux) and Opera 9 (Windows, Mac and Linux).
What happens when you have to support IE6
That we have to support IE6 — because many of the PCs at the University run Windows 2000 which will not run the newer IE7 — has had a serious impact on our coding time. Here’s what happens on a typical day as I work through our specifications list:
- I spend maybe 30-60 minutes coding one particular aspect of the site, e.g. page layout, using standards-compliant CSS.
- I test it in Firefox 2 – it works.
- I test it in Opera 9 – it works.
- I test it (by sending the code to colleagues) in Safari and Linux Konqueror – it works
- I test it in IE7 – it (usually) works.
- I test it in IE6 … and then say something like “Oh dash it!”
- I spend anywhere up to 3 or 4 hours ‘debugging’ it to find out exactly why IE6 won’t render the page correctly. This usually involves either adding an additional CSS statement (e.g.
width: 200px;) or completely rewriting the code from scratch.
- Repeat with the next element on my project spec.
As you might imagine, this can get quite tedious.
Acid2 Browser Test
The problem lies in the way that different browser manufacturers have interpreted the web standards as laid down by the World Wide Web Consortium (W3C). These standards, published as W3C Recommendations, are guidelines for, amongst others, browser software developers so that they know how their products should properly render web pages.
And as you might guess, some are better than others. Some follow the rules closely; others are a little more relaxed. And to test how compliant a particular browser is the kind folks at the Web Standards Project have provided an online ‘acid test’, called the Acid2 Browser Test. Using XHTML and Cascading Style Sheets — so no graphics, just
div tags and background colours, and stuff™ — it tries to display a smiley face with the words “Hello world” above it.
Acid2 Browser Test results
Here is how the four Windows browsers I mentioned before (Firefox, IE7, IE6 and Opera 9) fare with the Acid2 test:
As you can see Mozilla Firefox does not too badly. At least, it looks sort of like a face, even it is wearing a mask. If it were a film it would probably be Girl Interrupted.
Gran Paradiso (Firefox 3) Alpha 2
Thankfully the core layout code has been rewritten for Firefox 3 (currently in Alpha) which fixes the problems evident in Firefox 2’s rendering of the Acid2 page.
Internet Explorer 6
The troublesome Internet Exploder 6 utterly decimates the page. It should perhaps be renamed Internet Exploder and left in a drawer to gather dust. Would you believe this is the world’s most popular browser? Look what it has done to some nice programmer’s code! If it were a film it would probably be [insert name of gore-fest horror pic here].
But worry not, Microsoft improved things and released …
Internet Explorer 7
The latest (and greatest?) version of the mighty Microsoft’s browser, Internet Explorer 7, which erm … well, to be honest, fares only a little better than its little brother (browther?). If it were a film it would probably be the sequel to [insert name of gore-fest horror pic here]!
And then Opera 9 steps up to the plate and delivers 100%. That is how the page should look. If it were a film it would be your favourite feel-good movie, one that you could watch day-in, day-out. Lovely.
And since I know you’re all wondering the same thing: “But how well does the Linux browser Konqueror do on the Acid 2 Browser Test?” I’ll tell you. It passes with flying colours too. (Thanks to Mike for the image.)
Safari (Mac OS X)
And good old Apple also manage to get their browser to pass the Acid 2 Browser Test with their Safari browser. (Thanks to “a mate” of Mike for this screenshot.)
The moral of the story
Imagine if your tv did this to the programs, videos or DVDs you watched. Viewers wouldn’t stand for it. So why do web users stand for it?
The moral of the story is don’t use Internet Explorer, use something better. I can thoroughly recommend both Firefox and Opera, which I’ve been using for a good few years now.
If you like customizing your software, with various add-ons, then choose Mozilla Firefox. If you just like a fast, attractive browser that shows things the way they should look then download and install Opera 9.
If you’re using Mac OS X then you are probably using Safari already, which I believe is pretty cool. And if you are using Linux then you’ve probably already compiled the Konqueror source code and installed it on your Ã¼ber-geeky homemade distro yourself, and I’m preaching to the converted!
You know it makes sense.