Teaching an AI to Write Code for a Browser from 2000

I’ve been building a side project called DOSMenu — a DOS-styled web navigation system with period-accurate aesthetics, keyboard navigation, and multiple themes based on actual DOS menu systems. It’s a fun project on its own, but the real challenge was making it work on both modern browsers and Internet Explorer 5 for Macintosh, running on a 266MHz Power Macintosh G3 with a CRT monitor.

Yes, really.

It started as just wanting to have a simple site to download files to the mac from, before I had setup appletalk. I already had a classic Mac running OS 9, and I’d just started using Claude Code to build another project now hosted on that site, a CRT database capturing 17″ monitors that can do >=1600×1200, but this was different. What if it could actually write IE5 compatible code, browser hacks and all, like I’d done back in the day?

The Constraints

IE5 for Mac is a different universe. No ES6. No fetch() or SSE. No CSS flexbox, grid, or even reliable padding calculations. Just ES3 JavaScript, rendered by a browser with a broken box model.

The first step was having it self-document what it could and couldn’t use. Some of this was through web searches and pointing it at various documents, but many times it was through pure trial and error; why isn’t this thing working the right way? Over time, Claude had a good set of boundaries. No arrow functions. No template literals. No const or let. Tables for layout (yes, tables). Inline styles as a fallback. And everything had to degrade gracefully, because the same codebase needed to work on modern Chrome, Firefox, Safari, and a browser from the year 2000.

The Commented Backslash Hack

The real breakthrough came when we needed different CSS values for IE5 Mac versus modern browsers. IE5 Mac has a box model bug — it calculates padding and borders differently, which means pixel-perfect layouts that look right in Chrome are off by several pixels in IE5. Border widths don’t get calculated into the model, and throw everything off as soon as they come into play.

The solution is an ancient CSS hack called the “commented backslash hack.” It exploits a parsing quirk in IE5 Mac’s CSS engine:

/* IE5 Mac sees this */
padding: 3px 9px 3px 3px !important;
/* commented backslash hack v2 - modern browsers see below \*/
padding: 3px !important;
/* end hack */

IE5 Mac stops parsing at the backslash in the comment, so it never sees the second rule. Modern browsers ignore the backslash and apply the override. It’s elegant in a horrifying way.

But here’s what nobody documented properly: if you put inline comments on CSS rules inside the hack block, IE5 Mac’s parser breaks entirely. People in the early 2000s worked around this with dummy CSS class definitions after the hack — empty selectors that essentially reset the parser. We figured out that simply moving the comment to the hack line itself was cleaner and didn’t require any unused CSS cruft.

This might genuinely be new documentation about a 20+ year old CSS hack, discovered through actual testing on real vintage hardware in 2025.

The Pixel Hunt

Once the hack was working, the actual debugging process was…brute force. I’d deploy a change, switch to the Mac, hit refresh, eyeball the padding, switch back, and tell Claude to adjust. We developed a running joke where I was captaining a pirate ship and Claude was adjusting the sails:

“bring the ship speed down to 16px captain!”
“yarrr, ye brought her too much to port, matey! Back er down to 3px again”
“X MARKS THE SPOT! GOOOOOOLDDD!!”

We went theme by theme — PowerMenu, McMenu, McTeal, MenuWorks, Moo — each one getting the same box model compensation treatment. The magic formula for most themes ended up being padding: 3px 9px 3px 3px for IE5 Mac, with 3px symmetric for modern browsers. The extra 6px on the right compensates for how IE5 Mac calculates borders within the content width.

The footer on the Moo theme was its own adventure. Different element, different calculation, different padding values. We ended up at padding: 0 6px 0 13px for IE5 Mac and 0 13px for modern browsers. Each value found by deploying, refreshing a CRT, and adjusting one pixel at a time.

The Meta Moment

At some point during this process, something clicked. I was using a 2025 AI to generate code compatible with a 2000 browser, testing on 1998 hardware, fixing bugs that nobody has cared about in two decades. And the AI was getting good at it. Claude had internalized the constraints well enough that it was suggesting IE5-compatible solutions before I asked.

Then the obvious question hit: if Claude can generate a fully functional web interface that works on IE5 Mac… what’s stopping me from building a Claude interface that runs on the Mac itself? The API is just HTTP. XMLHttpRequest exists in IE5. JSON parsing can be faked in ES3. Monospace fonts and table layouts are perfect for displaying code.

An AI, accessible through an interface it helped design, running on hardware from before most of its training data was written. I’m not sure what to call that, but it’s definitely something.

Layers

In a previous post, I talked about how my career in tech has been about layers — each new technology building on top of the ones before it, without replacing them. This project is that thesis made literal. The newest layer (AI-assisted development) reaching back to work with the oldest layer (a browser from the year 2000), and both of them functioning perfectly well because the fundamentals haven’t changed, and progressive enhancement still works, because HTTP is still HTTP. CSS is still CSS. A pixel is still a pixel, even if IE5 Mac thinks it’s 6 pixels wider than it should be.

Simple, interconnected pieces. Everything-as-a-file. Just more layers.

The project is live at dosmenu.com — works on IE5 for Mac and modern browsers alike.