This website works on Internet Explorer 6

For some godforsaken reason I decided I really wanted my website to work on Internet Explorer 6.

cue meme about how blog owners only post about making their blog.

I had already done a bit of work to get my website working fine on old browsers¹, mainly by only enforcing HTTPS redirects on modern User-Agents with a Caddy snippet I wrote.

Plain HTML does a good job of conveying structure. I’ve been using HTML rather semantically, so the website is already recognizable but it’s lacking nearly all the CSS work I’ve put in to make my site pretty on modern browsers.

The first big thing to tackle was both CSS variables and REM units not being supported in Internet Explorer. I solved this problem by rewriting my site to use scss variables.

The development experience of this sucks compared to modern CSS variables since it stops me from redefining variables at runtime for dark themes and large displays. I made myself a good set of mixins to aleviate some of that annoyance.

@use "@/lib" as *;
.footer {
  padding: rem(1.5) rem(0.5);
  background-color: $color-stone-100;
  @include theme-color("text");
  // ...
  @include large() {
    font-size: $text-sm;
  }
  @include dark() {
    background-color: $color-gray-800;
  }
}

Next I wanted to clean up some of Internet Explorer’s default styles, and center the page content.

Internet Explorer has this nice, but proprietary feature that lets you have HTML be parsed only on certain versions of it

<!--[if lt IE 8]>
<link rel="stylesheet" href="/static/compat/ie.css" />
<![endif]-->

I use max-width to center the page contents without making horizontal displays scroll horizontally. IE6 doesn’t have max-width. I stumbled across this solution on StackOverflow.

.container {
  width: expression(document.documentElement.clientWidth > 960 ? "960px": "auto");
}

I’m sorry What?? Is that JavaScript in my CSS? That’s so incredibly cursed.

When I was porting oneko.js to IE6 I also discovered this polyfill for position: fixed;

.fixed {
  position: absolute;
  bottom: expression(document.body.scrollTop);
}

Apparently the performance on this was terrible and support for CSS expressions was dropped in Internet Explorer 8. There were more ways of using JS in CSS but I dont think any were as widely used.²

Anyway, with the max-width polyfill aside, I now had something close to perfect

Custom Font

Close to perfect wasn’t enough though, so I set off to fix these awful arrows

I don’t want to just make IE load an entire modern font. Window’s XP’s font rendering really struggles without Hinting or bitmap variants. Example below.

Pretendard, the font I use on this website, doesn’t have hinting or pre-rendered bitmap fonts for Windows.

I imported Pretendard into FontForge and removed all the characters I don’t plan on using; leaving behind only arrows.

This is the first time I’ve used FontForge. Its UI is intimidating, but I pretty quickly figured it out.

I then added very basic hinting, and hand-made a set of bitmaps for 16px fonts.

I then exported and converted the font to EOT (Embedded OpenType)³ and added it to my main style sheet.

Oh dear, That’s not what thats supposed to look like.

It turns out Internet Explorer 6 doesn’t like to fallback to alternate fonts. To solve that I made a common component <ArrowRight/> that applies the custom font and replaced all instances of using that arrow. ⁴

Finally. My site looks how I want it to.

There were countless other weird quirks I ran into while porting this site to IE6.

Images with width: 100%; were not preserving aspect ratio that I fixed with this JavaScript I wrote.

And PNGs don’t have transparency either which can be fixed with unitpngfix

Some cool things I found on my adventures

• IETester - Test your site on all versions of IE →
• DebugBar - Inspect element for Internet Explorer →
• IECollection - Install all the versions of IE simeltaneously → Mirror ↓
• LegacyUpdate - Fix Windows Update on Windows XP →
• MyPal Browser - A fork of Firefox68 maintained for Windows XP → Mirror ↓
• cute ttf to eot converter →
• unitpngfix - PNG transparency fix →
• Cool blog post about IE behaviors →