I was having a peaceful day until these CSS curiosities brought back memories of my painful days. It's really good that we don't need to deal with such hacks and vendor-specific things anymore. The last time I participated in a project that targeted an old browser was in 2018!
it was frustrating but i preferred it to dealing with stuff like node, tooling, mobile and tablet views, that stuff really burned me out in a way that IE 6 never did.
When I took web design courses they basically told us you effectively have to make two websites - one for IE6, and one for all the other browsers. It came down to a bunch of crazy hacks and conditionals you had to bake in.
I remember when we were allowed to bump the minimum supported IE version of our SPA framework from 6 to 8. It was a joyful day – but we soon realized that it didn’t really buy us that much because 8 was almost as quirky…
It's not just that it had quirks, it's that your feedback loop was longer in IE compared to Firefox with Firebug and Chrome. IE 7 did not, to my recollection, have a way to open developer tools and tweak CSS values until it looked right, or even to see what the effective CSS on an element was. So you had to save and refresh. Sure, that's not a super long cycle time compared to, say, compiling a binary and flashing to a ROM, but it's longer than the other browsers I was working with at the time.
I wonder how many trillions in GDP we missed out on due to them building a monopoly in the browser space and then abandoning it. You can't imagine how happy I was in 2005 when Microsoft announced they were resuming development on IE. I was already a fan of Firefox by that point, but a lot of web dev was such a drag because you couldn't just use modern browser features--you had to accommodate all the users still browsing with that dinosaur.
I was described by a slightly mad client as “the Harry Potter of front-end development” after I’d pulled off a particular effect my designer had come up with. (They then proceeded to give the entire dev team Harrods hampers and failed to pay the company when we sent an invoice.)
The really funky part of the IE6 PNG fix was that the URL of the image in the expression was always relative to the current page URL, not the CSS file that the declaration was in.
I remember having to use Javascript to generate the image path (I cannot quite remember why absolute or root-relative URLs were not an option for us though...)
I built a mildly responsive site in 2007 using transparent PNGs overlaying a photo in the header, only for it to turn out that the client’s IT policy blocked the PNG loader. In the end I had to explain to them that everyone else would see the site normally, and they’d have to put up with it until IE7 launched.
I used these CSS styles in the late 90s to make internal browser-based apps for our call centre agents that looked & felt more like native Windows desktop apps.
Missing the whole IE quirks mode vs standards mode thing, but nice.
Some of those hacks were specifically for IE, and there was a debate on staying quirks vs going standards mode. Each had its own drawbacks and choices.
I last heavily worked with CSS in 2010/2011. These still don't feel old to me.
There came a point where if you wrote good HTML/CSS that passed the W3C validator, you were golden on pretty much any device. This still rings true today.
Healthcare industry here. I couldn't drop IE6 until COVID.
Lots of doctors offices and others were still running it. But when the virus slashed our staff, we finally got permission to drop the extra work of supporting IE.
None of them — they were all ugly hacks, and we wasted stupid amounts of time and brainpower testing sites and then researching and applying the hacks.
I still hate Microsoft for 'winning' the browser war and then letting IE stagnate for so many years. So much time and money wasted because of their behaviour. Arseholes.
> Internet Explorer had a number of iffy behaviours and lagged behind other browsers for many visual effects, even regarding basic properties like opacity. Thus, Microsoft brought in bespoke filter functionality.
That's not accurate at all. At the time IE4 launched, it was ahead of the competition. It also had quite a lot of non-standard extras as part of Microsofts strategy to embrace, extend and extinguish. IE4 was extend. In other cases the strategy worked, but not for the web.
The DirectX filters weren't used pretty much anywhere until it turned out it could do things that were specced and implemented by others years later.
How come when Microsoft does it, it's EEE, but when Google does it, it's just progress? Nobody stopped other browsers from implementing things the Microsoft way.
IE was such a scourge, a drain on humanity (at least the slice of humanity that made websites). One of Microsoft's great evils - they let the product stagnate for years once they had the market cornered.
Windows has kinda become that now, a low quality user-hostile product forced on people through inertia and monopoly tactics.
Besides vendor tricks, I'd like to see a showcase or article about the evolution of page layout patterns over time. That is, the underlying techniques, not the aesthetics; tables, fixed image sizes, float/clear, flex, etc. I'm finding https://code-literacy.medium.com/css-layout-evolution-detail... but it's quite skeletal and incomplete. Has anyone here come across a more complete write-up?
Remember rounded corners? It was a real pain, there were so many hacks to achieve something simple as
border-radius: 16px;
My other favorite was sIFR font loading :) Because font support was... patchy, a technique was invented to replace headers with Flash embeds which rendered the desired font:
...and that was a grand improvement over having to make a "tic-tac-toe" table where you'd be putting things in the particular surrounding cells to fake these fancy border-types.
The funny thing about old IE versions is that they did in fact get one thing right in retrospect; the box model used was a lot more intuitive than the one used by 'default' in standards compliant browsers. Why would border and padding be outside the main element's width? That doesn't match how anyone thinks of a box...
Either way, the end result was that everyone started using box-sizing: border-box when it was added, and now even the folks at the W3C regret the old box sizing model being used at all.
Surprised how many of these I didn't remember though. Filters, yes. Syntax hacks to trick IE into using one CSS value while compliant browsers used another, sure. But I don't think I ever came across 'HTML Components' before reading this article.
The Chrome monoculture is just as bad as the previous IE6 monoculture. Back when we had several browsers, all different, that was optimal anti-enshittification.
44 comments
[ 0.19 ms ] story [ 29.1 ms ] threadI wonder how many collective years of developers’ lifespans were dedicated just to addressing its quirks.
Here's an archive of their momentous blog post:
https://forums.anandtech.com/threads/ie-update-to-debut-ahea...
They shipped a beta later that year, but the full release arrived in late 2006. That was 4 years since their prior release, an eternity in those days!
i was seen as a genius at work for understanding quirks mode and how JScript differed from javascript/ecmascript
I remember having to use Javascript to generate the image path (I cannot quite remember why absolute or root-relative URLs were not an option for us though...)
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/V...
I used these CSS styles in the late 90s to make internal browser-based apps for our call centre agents that looked & felt more like native Windows desktop apps.
---
Shameless plug:
In neutrino (my webview wrapper), we grab those and inject them as prefixed CSS variables (--neutrino-NameOfSystemColor).
Works on windows/macos/gtk/qt, and except for qt it works live (if the user changes the accent tone, the CSS variable updates automatically).
https://alganet.dev/neutrino/ Screenshot of Mint: https://imgur.com/a/WyjpwsR
These were very handy in simpler times but I definitely see why we don't want them around these days.
Some of those hacks were specifically for IE, and there was a debate on staying quirks vs going standards mode. Each had its own drawbacks and choices.
There came a point where if you wrote good HTML/CSS that passed the W3C validator, you were golden on pretty much any device. This still rings true today.
Lots of doctors offices and others were still running it. But when the virus slashed our staff, we finally got permission to drop the extra work of supporting IE.
I still hate Microsoft for 'winning' the browser war and then letting IE stagnate for so many years. So much time and money wasted because of their behaviour. Arseholes.
The DirectX filters weren't used pretty much anywhere until it turned out it could do things that were specced and implemented by others years later.
Windows has kinda become that now, a low quality user-hostile product forced on people through inertia and monopoly tactics.
https://www.webdesignmuseum.org/web-design-history/sifr-2004
...and that was a grand improvement over having to make a "tic-tac-toe" table where you'd be putting things in the particular surrounding cells to fake these fancy border-types.
Boss enters, enthusiastic hand gestures
dev: Web 2.0? what the hell are you on about?
Boss: evasive mumbling
dev: Oh... css border-radius Sure, I will get right on it.
Either way, the end result was that everyone started using box-sizing: border-box when it was added, and now even the folks at the W3C regret the old box sizing model being used at all.
Surprised how many of these I didn't remember though. Filters, yes. Syntax hacks to trick IE into using one CSS value while compliant browsers used another, sure. But I don't think I ever came across 'HTML Components' before reading this article.