Flag of the United Kingdom
Andreas Rejbrands webbplats


Web design: Compatibility with old user agents

Compatibility with old user agents is very important to me, because I strongly believe that if you buy a computer at any time, and it works perfectly, then you should be able to stick to that computer for as long as you wish. After all, a writer who bought a high-quality computer in the late 90s should still be able to use it the exact same way he did when it was new. In addition, if you do separate content (HTML) from style (CSS) as you should do, it should not be particularly difficult to ensure a decent fallback on old user agents.

Before the recent markup improvement on my sites, they were essentially compatible with every version of Internet Explorer from 5.0. The new markup, which is far more elegant, efficient, and modern, requires only little more: Internet Explorer 5.5. Hence, my sites remain very compatible in this respect. As a comparison, some of the most visited sites on the web fail already in Internet Explorer 6.0 on Windows XP (microsoft.com being one example).

At my sites, almost no JavaScript is used; I almost exclusively work with hypertext documents (as apposed to hypertext applications), and I strongly believe that hypertext documents should only be declarative if possible. Therefore, the main issue in terms of legacy browser compatibility is the CSS support. At the MSDN, Microsoft provides a comprehensive description of the CSS support in old versions of Internet Explorer. Below is the subset of this data that is of significance to my sites:

Feature IE 5.5 IE 6 IE 7 IE 8 IE 9 IE 10
text-shadow No No No No No Yes
box-shadow No No No No Yes Yes
:last-child No No No No Yes Yes
:not No No No No Yes Yes
:lang No No No Yes Yes Yes
:before, :after, content No No No Yes Yes Yes
+, >, ~ selectors No No Yes Yes Yes Yes
Attribute selectors No No Yes Yes Yes Yes
linear-gradient No No No No No Yes
-ms-filter No No No Yes Yes Yes
filter Yes Yes Yes Yes Yes Yes

I have every (non-current) version of Internet Explorer from 3.0 and upwards installed in virtual machines. Below, I give the details of the rendering of my sites in all these versions of Internet Explorer. I investigate only my article on Swedish grammar since that page is the most technically demanding page on the site; it even includes a JavaScript that automatically generates a TOC.

Internet Explorer 10 is the most recent (stable) version of Internet Explorer, and this produce the reference rendering of the page. Of course, the page looks exactly the same in any modern browser (Chrome, Firefox, Safari, Opera). See screenshot. In Internet Explorer 9, we lose support for the text-shadow property, which is used as a special effect when hovering the logo at the upper-left part of the page. It cannot be stressed enough how unimportant that feature is; hence, essentially, my site looks perfect even in IE9. It is interesting to notice, however, that the square bullet (in a UL, say) has a very distinctive look in IE9. See screenshot. Turning to Internet Explorer 8, we lose box-shadow, as apparent in the screenshot from Windows XP. We also lose the :last-child and :not selectors used in the pixlinks (see below). Moving on to Internet Explorer 7, we lose CSS generated content (:before, :after, and content) and, at the same time, :lang(). At my sites, a link on a page in Swedish to a page in English is marked with the flag of the United Kingdom, and similarly the other way around. These are added using CSS content, the language selector, and attribute selectors testing the hreflang attribute on the anchor element. Also, an article in one language, found on a page in the other language, display a flag in the header. This is also done using CSS generated content and the language selector. Apparently, these features are lost in IE 7. Screenshot from Windows Vista.

In Internet Explorer 6, the attribute selectors are gone, but that doesn't affect me much, since I mainly use them together with the language selector and CSS generated content, which were lost already in IE7. Much worse is the lack of support for the + selector; now there is no longer a border between the items in the navbar, as apparent in the screenshot from Windows XP. Also notice the strange left margin in the TOC. In Internet Explorer 5.5, some more CSS problems arise. See the screenshot from Windows 95. But if you only ignore these (fairly minor) visual imperfections, the site is still very readable. Even the JavaScript TOC generator works perfectly.

Internet Explorer 5.5 is the oldest version supported. However, the horror is not particularly severe when you turn to Internet Explorer 5. In this screenshot from Windows 95, it is apparent that most parts are still perfectly readable. The navbar styling is now very poor, however, and the TOC doesn't look good either. Since most pages do not have a TOC, it is the new semantic navbar that made me stop supporting Internet Explorer 5. Moreover, at least on my virtual system, many (Unicode) font glyphs are missing. Turning to Internet Explorer 4.0, things get much worse. As seen in the screenshot, basic CSS positioning fails (the flag is not at the right side of the page any more), and the navbar is no longer horisontal. In addition, the TOC JavaScript fails. We end this journey with Internet Explorer 3 which fails rather badly. In the screenshot it seems like most CSS is ignored, there is no PNG support, all non-ASCII characters are displayed incorrectly, and all sorts of things go wrong. Still, with some effort, the page is readable (although it might actually be easier to read the text in the HTML source code, at least if you have access to a UTF-8-aware editor).

Perhaps the most thrilling observation of them all, however, is that the vector linear gradient in the logobar works all the way down to Internet Explorer 5.5.

Visa alla tidigare notiser.

Visa enbart de senaste notiserna.