(Update, January 2008: This article dates back from before IE7 went out. Now it’s just kept for historical reason)
Why does this site look different in Internet Explorer and in a modern browser? Because there comes a time when you have to learn to let go.
Building a website: methodology
Nothing new will be said if I tell you that you should begin by coding for a browser closer to de facto standards, Firefox for instance, so that you won’t have to wonder how your site will look like in more exotic browsers that you wouldn’t have handy (Safari and its small market share, for instance). Once the product is satisfying, check how well it fares in Internet Explorer, add a few bits and pieces if necessary (hacks), put into the oven for twenty minutes and serve hot.
Have it tasted by a few connoisseurs, if possible with different experiences (IE Mac, Safari, older IE Windows versions...) and salt according to each other’s taste.
Fair enough. Now comes real life... say it’s your day job, for instance. To make a long story short, when you’ve been into this job for a few years, you don’t have too much hair left, and what’s remaining is becoming grey. A causal relationship could be found.
So far, so good
I was happy: a four-column layout on the home page is not that common. And it was fit to this site’s needs: it had to display, left to right, the navigation bar, recent content, and two columns for my blogroll [1].
Why was I happy? Because it worked, with Internet Explorer as well as with Firefox. Yes it did.
You don’t need many things to simplify a web designer’s life: don’t compute too many margins [2], and most of all, don’t give margins and paddings to elements whose width is specified. You’ll keep your hair —which is useless since you’ll end up tearing them off by handfuls anyway.
Trouble begins: let’s forget our legendary strictness
Let’s reread specs: CSS selectors are a very powerful means to precisely design particular elements. In the case at hand (this wonderful website that you reader love so much), I wanted to design some interface elements according to the language context, either at page level (backgrounds for additional information, comment icons), or at a finer level of granularity (navigation bar, new items on the home page).
Here’s a concrete example: if I wanted all my French-speaking pages to have a background image according to French , I would need only this in my stylesheet:
html[xml\:lang=fr] body { background:url(background_fr.png) ; }
In the same way, for English I’d have this:
html[xml\:lang=en] body { background:url(background_en.png) ; }
And so on. In layman’s terms, if you’re not familiar with CSS specs, it reads: «if the xml:lang attribute of the html tag is set, and if it’s fr (French), then apply a background image to the body.»
Clean and simple.
Aye, but there’s the rub: in Internet Explorer, up until now, you can’t use selectors. OK, so let’s assume it’s trivial to systematically add a class to the body featuring the same string value, and it’s our trusty Spip’s job to use a contextual marker #LANG in its templates. Wonderful, I still have some hair left on my head.
Admittedly, the code is less clean, but obviously we’re not in a sterile bubble but in real life; one has been used to choosing middle ways since the beginnings of the web. Actually, one has learnt to be permissive, since the browser war, sad period when the most common practice was to develop two versions of the same site and serve it according to your browser, and to pretend that there were only two browsers out there...
PNGs: the best of two worlds comes with a price
In order to have good-looking images with nice hues and colours, use JPEG. In order to have transparency, use GIF. These rules have been the fundaments of web-oriented digital imaging since the beginning of the web. Of course those formats have drawbacks: JPEG is destructive in terms of image quality and does not do transparency; GIF has only one level of transparency, meaning that a pixel is either transparent or opaque, and indexes only 255 coulours, not one more, thus is not very good with rich pictures.
Here’s a delicate question we’ve asked ourselves repeatedly: how do you do shadows? How do you fade between two images? The down-to-earth solution we had a few years ago involved craftily cutting through several Photoshop layers and produce flattened GIFs and JPEGs, and then do a hair-splitting layout to give the illusion of semi-transparency.
I’m not saying that working with constraints is not stimulating, but there comes a day when one dreams of better ways to do things.
Enter PNG: 255 levels of transparency (the same number as an image-editing application), and no notable quality degradation. The final image can be slightly (or largely) heavier in bytes, but:
- There’s no such thing as a free lunch (yeah, I know this one was easy to come up with).
- who forces us to use PNGs only? One can, in chosen places, leave a GIF with a little number of indexed colours, or a JPEG with little or no compression; that’s what I did.
- Let’s assume bandwidth has considerably increased in the last few years, and that some more weight in our pages is not too bad, especially considering our pages are standards-oriented and thus our code is lighter: why not “reinvest” the bytes in our graphic design?
Oh, before I forget: Internet Explorer does not know how to handle transparency levels in PNG. All right, you’ve just torn another handful of hair off your head, but you still have hope. Either you use a circumventing technique (a dirty CSS hack, for instance), but you’ll end up drowned under tweaks that you’ll have trouble to re-read ina few months, or you radically opt for a repairing patch: luckily, it does exist.
IE7: Javascript to the rescue?
Dean Edwards wrote a script called IE7, which will not only fix our PNGs but even fix IE’s poor understanding of the modern CSS instructions we just talked about (silly us, if only we’d have thought of that earlier).
Here you are, creating a semi-transparent PNG test, and inserting the code that calls IE7 into your page... You expected it to work? It doesn’t. Two hours of pulling your hair off later, you realise that one should always listen to the old proverb: Read The Fat Manual... The image must be called *-trans.png. Let me thank Julien here for his patience...
You’ve still got (some) hair, so you quickly apply the IE7 patch to your prototype. Alas, two hours later (two hours more, for those still keeping count), you don’t understand why your PNGs stay desperately grey in Internet Explorer.
I’m throwing the towel
You’re through pulling your hair now, so you radically decide to take a backup of your CSS file you did the night before and use conditional comments [3].
To keep at least a hint of the original spirit and because I didn’t add class attributes for nothing everywhere in my code, I added styles to use colour to indicate which language is used where.
But the damage was irreversible: on a Sunday night, at midnight (the witching hour), for the first time in my short career, I decided the game was not worth it. I have reason enough to hang on to things when it’s for the job of course, but I have none left when it comes to dropping hours of sleep, considering how sparse and precious they have been lately...
This is why the content looks a bit sad, although (tentatively) well-structured visually, in Internet Explorer.
The good side of all this (because there is one) is that five or six years ago, the only method to accommodate such browser limitations would have been to duplicate the site, as I was saying above. Using structured content and moving presentation to stylesheets enables us to keep the same code for all “user agents” [4].
The final word
Even without the duplication, don’t you think I could have written the same article a few years ago, if I had said “HTML” in lieu of “CSS” and “Netscape 4” in lieu of “Internet Explorer”? I’m not usually too vocal in my opinions, and I believe that most decisions are reasonable, for instance when people stick to Internet Explorer [5].
Yet enough is enough, and for my personal site, let it be said once and for all: Internet Explorer is the new Netscape 4, and for this very reason let me treat it likewise. Version 4 of nota-bene.org will concentrate on browsers competent in their understanding of what the web can offer us nowadays.
And don’t get me started on IE5 Mac, unreliable as it is (it doesn’t like conditional comments, I’m afraid); it’s acting on a whim, and if you tell me about it again, I’m pulling your hair. Here, I’m through grumping.
