IE 5.5 Compatibility Audit

Audit Scope: HTML 4.01 · CSS2 · ECMAScript 3

Why This Audit

The site's subtitle says "Compatible with IE5.5+" and the sidebar also states "Accessible on Windows 95."

The standards are: HTML 4.01, CSS1+CSS2 (partial support), ECMAScript 3 (JScript 5.5), W3C DOM Level 1. These represent the practical capability boundary of IE 5.5.

For the code audit I used DeepSeek V4. After static analysis and manual review, the following issues were found.

Critical Issues (7 items)

rgba() Semi-transparent Backgrounds

rgba() appears in the header, banner, sidebar-left, 404 page, and the generated styles of three CGI scripts: editor.py, search.py, and stats.py. All dark semi-transparent backgrounds across the entire site rely on rgba(0, 0, 0, 0.45).

When IE5.5 encounters an unrecognized color value, it simply skips it and the background becomes transparent, making the site's dark theme a complete mess. Fix: use the IE-proprietary filter:progid:DXImageTransform.Microsoft.gradient — this filter was designed for gradients, but using the same start and end color can achieve an opacity effect. In ARGB format, 73 in #73000000 represents 45% opacity.

However, I don't plan to fix this. A transparent background on old devices is not necessarily a bad thing, even though incompatibility with rgba() counts as a critical error.

Flex Layout

The emoji panel uses a <div style="display: flex; flex-wrap: wrap; gap: 1px"> to wrap 20 emoji images. IE5.5 cannot properly load flex, so all emoji images stack into a single column as default block-level elements.

The stats page (stats.py) uses display: flex, gap: 18px, flex: 1, min-width, and max-width, which are all CSS3. However, when opening the stats page in IE5.5, aside from some sizing errors on the IP map, everything else looks fine.
Fix: convert the emoji panel back to <table> layout. The stats page is not a priority for changes; simply reducing the IP map size should resolve the issue.

box-sizing: border-box

The guestbook form in the sidebar heavily relies on box-sizing: border-box to control input field widths. IE5.5 does not recognize this property, so inputs with width: 100% will overflow their container due to border and padding. The border/padding values need to be manually subtracted from the width.

overflow-x / overflow-y

The scrollable containers for the guestbook and changelog use overflow-y: auto; overflow-x: hidden;. IE5.5 only recognizes the overflow shorthand. Although it doesn't support overflow-x/y, it doesn't appear to cause visible errors.

3 JS Issues in toolbox.py

The toolbox's "Copy Password" feature uses three APIs unsupported by IE5.5:

document.querySelector('.result-box span') — the Selectors API is a DOM Level 2+ feature, but IE5.5 only has DOM Level 1. Must be changed to document.getElementsByTagName('span') with iteration, or simply add an ID to the target element.

box.textContent — textContent is DOM Level 3. IE5.5 uses innerText.

document.execCommand('copy') — although execCommand has existed since IE4, the 'copy' command wasn't supported until IE10. IE5.5's clipboard API is window.clipboardData.setData('Text', ...).

Medium Degradation (6 items)

Placeholder Form Hint Text Disappears

The guestbook form's Name, Email, and Message fields, the editor's title and body inputs, and the toolbox's seven input fields — all use the HTML5 placeholder attribute. IE5.5 silently ignores it. Users see no hint text in empty input fields.

This can be solved with a JS polyfill by detecting 'placeholder' in document.createElement('input'); if unsupported, manually simulate it with onfocus/onblur events. However, considering the JS polyfill itself adds overhead, it's not worthwhile on 90s-era machines. Alternatively, text labels can be placed next to the input fields.

:hover on Non-link Elements

IE5.5 CSS only supports a:hover. I've used .em-toggle:hover (emoji panel expand/collapse button), input[type="submit"]:hover (send button), and .toolbar-btn:hover (editor toolbar buttons). All of these are ineffective in IE5.5. However, this is purely cosmetic and doesn't affect functionality, so it's acceptable.

word-break

The password generation result in toolbox.py and the UA string in stats.py use word-break: break-all. IE5.5 doesn't recognize this property; extremely long continuous strings (such as base64 encoded output) may overflow the box. Can be replaced with the IE-proprietary word-wrap: break-word.

box-shadow / linear-gradient

The guestbook notification email frame uses box-shadow: 3px 3px 0px #a0a0a0, and the toolbox title bar uses linear-gradient. The former has no shadow in IE5.5 (just lacks some texture), while the latter falls back to the solid color #000080 (which looks acceptable). I personally prefer not to fix these two.

Editor Preview Uses HTML5 Doctype

The editor's "Preview" feature generates temporary pages using <!DOCTYPE html> (HTML5 version). In IE5.5 this triggers standards mode, resulting in inconsistent rendering compared to the older pages. Simply change it to <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.

Minor Issues (10 items)

image-rendering: pixelated — All 20 emoji images and every badge use this property. IE5.5 ignores it and renders images with default smoothing. However, for unscaled original-size images, IE5.5 already uses nearest-neighbor sampling, so the result is similar. This property is mainly for high-DPI screens on modern browsers, and degradation on IE5.5 is perfectly acceptable.

transition — Hover animation on form submit buttons. IE5.5 has no transition effect; the button changes color instantly, which doesn't affect usability.

outline: none — Removes focus outline from input fields. IE5.5 already has bugs with outline support, so whether this property is present makes little difference.

resize: none — Disables textarea drag-to-resize. IE5.5 doesn't support textarea resize at all, so this property is entirely redundant.

crossorigin — Two <link rel="preconnect" crossorigin> tags in the header. IE5.5 doesn't recognize preconnect or crossorigin, and silently skips them. These are performance optimizations and don't affect functionality.

loading="lazy" — Used on all emoji images and external badges. IE5.5 ignores it. Like image-rendering, this is primarily for performance optimization and bandwidth savings; on old devices, not loading the lazy version may actually be faster.

<audio> Tag — Background music embedded in blog posts uses HTML5 <audio>. The Chinese version has a <bgsound> fallback, the English version has an <embed> fallback, so IE5.5 can play audio normally.

hidden Attribute — <embed hidden="true">. Although hidden was later incorporated into the HTML5 standard, IE had already used this non-standard attribute on embed elements since the HTML4 era, so it actually works in IE5.5.

:-webkit-autofill Pseudo-class — Form autofill style overrides. IE5.5's CSS parser discards the entire rule block when it encounters an unrecognized pseudo-class, but this was only ever needed by WebKit browsers anyway.

Missing type="text/css" / type="text/javascript" — Some <style> and <script> tags are missing the type attribute. HTML 4.01 requires it, but IE5.5 defaults to CSS/JS parsing, so it has no practical impact.

Fix Plan and Priority

Considering impact scope and fix difficulty, my priority is as follows:

Priority	Issue	Reason
1	rgba() → IE filter	Affects all page backgrounds, unifies visual appearance after fix
2	overflow-x/y → overflow	Guestbook and changelog scrolling broken, affects core interaction
3	Emoji panel flex → table	Emoji selection box sizing wrong in IE5.5
4	toolbox.py 3 JS fixes	Copy password feature errors
5	box-sizing removal	Form input width abnormal
6	placeholder polyfill	Degradation issue, medium impact
7	stats.py table rewrite	Most work, least frequently used
8+	Remaining LOW priority issues	Acceptable degradation, fix opportunistically

« Current Site Architecture Update Analysis & Next Steps

« Home

May 2026 · What I've Been Up To »