CSS Curiosities of the Past

meerita

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!

vladde

funny how almost all of these are just related to Internet Explorer haha

ryanschaefer

If anything is worthy of the title “load-bearing” it’s IE… I wonder how many collective years of developers’ lifespans were dedicated just to addressing its quirks.

mike_tyson

miss those days. i was seen as a genius at work for understanding quirks mode and how JScript differed from javascript/ecmascript

Cyykratahk

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...)

sbarre

Surprised there was no mention of the old system theme colours (that I think still work in some browsers but are long-deprecated): 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.

gaigalas

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.

VCFundedGenYer

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.

devhunt-org

Which of these old CSS tricks do you actually miss?

tosti

> 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.

QuadrupleA

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.

zetanor

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?

maxglute

I miss gaudy scrollbars.

tiborsaas

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: https://www.webdesignmuseum.org/web-design-history/sifr-2004

yomismoaqui

The single best things about AI coding is not having to write CSS again.

trgn

I have made so many users happy with !important

CM30

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.