HTML hacks that shaped the Internet
tedium.co
tedium.co
But when tables went out of fashion it was all about using floats for layout for a few years. That was wild, I am surprised it was left out from that list.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
"Originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of flexbox and grid it's now returned to its original purpose, as this article explains."
See here, where it includes a demo: https://www.vbulletin.org/forum/showthread.php?t=161099
Non-table layouts also came into fashion when screen resolutions started to vary more, and some degree of fluidity and responsiveness could've been implemented with non-table layouts while IE was still a target. However, IE was lacking so badly even with IE8 that a lot of CSS that had been a W3C recommendation for years at that point just either didn't work, it was quirky because IE handled the box model a little differently. Ít was one of the reasons why Javascript shims and IE-specific CSS had to help out fairly often.
IIRC Netscape didn't either around the IE4/5 days. It also had significant performance problems with large sets of nested tables which IE6 (and perhaps IE5) did not.
For example back at University on 133MHz Pentium-class CPUs a large slashdot page with all threads open could take minutes to render where IE took merely a noticeable number of seconds - a co-student use to make a big thing of this as a reason to dump other browsers and use IE. There was actually a use case for this away from the University's fixed line connection: on dial up you could, RAM+swap and browser-not-crashing permitting, open a couple of windows like that then disconnect the modem and read at your leisure without racking up a per-minute phone bill.
Or maybe NS was capable of progressive display and this was just hidden in extreme cases by the performance issue, that was a time ago and memory is hazy…
I think it was around the time of Firefox 1.6 when it felt like it was about on par with IE 6 in rendering speed for me, after tweaking some of its settings. I think it was also rendering tables progressively at the time.
You both agree and disagree with my comment :)
If memory serves me right, I started migrating off table layouts at the time when IE6 was still by far the most popular browser (>80% of the market?).
It was probably a case of killing several birds with one stone - make layouts fluid while avoiding IE's issues with rendering tables.
I don't recall if that was vanilla HTML or vendor extension, I suspect not vanilla.
I stopped doing front end work about the time tables for layout went out of fashion, my dorky internal tools still use them.
It never works like I want it to, and I never know if it's because I'm dumb or the tool is poorly-designed, and by then I've wasted two hours, so I always end up just going back to tables because they freaking work.
The good news is now flexbox and grid work in all modern browsers, so this is (finally) a solved problem
I was not really interested if those doing a "View Source" are going to be offended by my "incorrect" use of tables.
The only issue with floats was that there were a lot of edge cases that happened in only certain browsers, so you had to be careful. Lots of browser bugs.
Job security.
From a practical point of view too, if you wanted to make separate mobile and desktop views just by using different stylesheets, using a table made it very difficult.
(That said, in 2000, if you were using separate mobile and screen stylesheets, you were in an extreme minority because there were relatively few full HTML web browsers on mobile devices. Instead, most phones, if they could access the Internet, accessed a different version of the Internet accessed over WAP.)
Called these "faux columns" and a basic 3-column layout was so difficult it was referred to as the "holy grail" of layouts
https://en.wikipedia.org/wiki/Holy_grail_(web_design)#Faux_c...
.clearfix::after {
content: "";
clear: both;
display: table;
}
If you tell 2 beginners to build something with PHP/jQuery/JS, and send one person to W3Schools and the other to PHP.net/jquery.org/MDN, I have no doubt that the W3schools person will get something done in workable state faster.
In any case, "W3" is just another representation of 'www', which the W3C doesn't have any kind of claim over.
OpenAI isn't open. W3Schools is unaffiliated with the W3C. The world keeps spinning.
That's optimistic, optimistically. It's a group of ivory tower academics with no stake in any browser implementation acting like they have any right to tell actual browser implementors how to behave.
Well, I totally prefer that, than letting Google decide by themselves
And besides, what makes you think Google listens to them?
The name is so confusing that if you search for "w3c" on DuckDuckGo, the first result is W3Schools, and then the official W3C website.
Some programming languages ship a good tutorial as part of their documentation (e.g. Python), but not all.
That's not the point though, I'm not going to say different strokes for different folks.
Instead I'd say, if that beginner uses the 'slower' path instead, that will pay dividends in time -- they are better of learning to use the docs than getting paid peanuts for delivering that project which depends on the juniors faster.
So a beginner should use w3schools while they see fit, and then move on to MDN, etc. when they find it to be unsuitable for their purposes.
A beginner on the other hand would have their SO questions locked/closed within minutes because it would likely break any one of the thousand little rules SO has (to reduce duplicates) that are unknown to beginners.
Horses for courses; I read the official MDN and PHP docs now, but I didn't when I began because those sites assume an enormous amount of prior knowledge about programming.
From the looks of it, it seems like blocking w3schools is quite popular among Kagi users [1].
I have a feeling I know your answer - as a financial professional I initially used Investopedia in a pinch but over the years realized their accuracy has an inverse relation with the specificity of the topic. After seeing incorrect formulas and descriptions a handful of times, I eventually stopped using it completely.
Note: If you think web browsers are weird, just wait until you try doing things in email clients or - $deity forbid - ebook readers.
As you say, it was weird and initially quite difficult to wrap my head around it. Surprisingly, I didn't actually learn about the "clearfix" hack until a couple of years later when I interviewed for a Front-End job at - of all places - Fox News.
The person who I talked with there gave me a take-home to work on and send back. Tl;dr I didn't get it quite right because I hadn't really taken the time to understand what the particular styles did to the layout.
Fast-forward to today and I'm using floats w/ @print and a div class of "clearfix" set to "both" in order to reset the layout of a document that was converted from Word's .docx to HTML.
How times change.
Madness!
Generally speaking, if I see an HTML e-mail I know the other end cares NOTHING about security or efficiency, and is actively trying to snoop on me with analytics.
Not surprising you had to fall back to very old HTML to hit a common featureset.
To your point that HTML can be a security risk, I remember interviewing at The College Board in mid 2011 and finding out that they still sent critical information - think testing admission tickets - with a MIME type of text/plain.
If you need to guarantee delivery and readability, no matter where people are getting the message, I don’t see how you can do it any other way.
That was an essential part of my CSS toolbox for years, and something that ended up being one of the first things added in every new project.
Fell out of use because "nobody uses IE for Mac" :)
Old CSS never dies, it just goes to live on a very special farm upstate where it only has to do 1 or 2 jobs.
I made an SVG interface for displaying/editing diagrams using nw.js (essentially Electron). It would adapt the SVG viewport height and width based on the amount of space that's actively being used so that scrollbars will appear only when needed.
The interface would work perfectly in Chromium and Firefox. But in nw.js I was using their menu api to display a window menu. That menu wasn't part of the DOM-- not sure how nw.js displays that menu but you can't introspect it in devTools. Anyhow, this was somehow creating an off-by-one problem where scrollbars would one pixel too early.
The only way I stumbled upon to fix the issue was to set the SVG style to add "float: left;"
Any ideas on what magic spell this casts? Technically the svg was the only DOM element in the page. I never did figure it out.
I met your children -- what did you tell them?
It's still here on HN of course, included in every page request:
- Faux columns, to get a visual stretch and make it appear that the sidebar was as long as the content https://alistapart.com/article/fauxcolumns/
- Or take that even further, with a nine-patch and 9 div's or a 3x3 table you could hack your own borders by repeating backgrounds in some axis. With CSS3 we got border-image that could help this a bit. These border styles aren't that much in favor anymore, though.
- To make rounded borders, one could use the nine-patch. But many would also use a generator to make some HTML that basically simulated a rounded border, by making lots of elements. Found this article describing it: http://benogle.com/2009/04/29/css-round-corners.html Conventional wisdom was that the added markup would be more bytes than an image would be, but less roundtrips and quite easy to do.
The other nice thing was the use of the cicada principle for a background styling pattern that 'do not repeat.'
It’s still so clean though after all these years.
Still live on our main-website because there’s never time to replace it with something more modern ;)
- Use HTML tables for layout
Hahaha :)
On a more serious note, this list highlights how development without standards leads to control information being encoded in various tolerable side-channels.
The potential mess and collision of this brings into relief the disdain that's sometimes levelled at the current W3C process. This process marries a standards-driven evolution of web technologies with browser-driven innovation, with the two alternately either leading the other, or proceeding in lock-step.
While it's often derided, this process could be interpreted as more sustainable and stable than the one which came before.
I wonder how many of those who decry the new W3C-vendor norm would choose to return to the heady days recalled by these 10 weird hacks? :)
I don't think it's a lack of standards, it's more of a lack of necessary functionality. If the thing you want to do isn't an addressed feature, you'll do it one way or another creatively. Standards provide rigidity that create this situation to begin with unless the standard is mature enough that it captures all the potential needs, especially in cases like the web where your often locked to some standard that may or may not suit your needs. In other spaces, you usually have enough options that one thing or another is flexible enough you can do what you need to do and go with that choice.
Having worked in research long enough you'd be surprised how often something someone wants to do requires some hacky technology approach because many standards exist around business/consumer interaction and systems built around that, because that's where the money is which drives those standards and feature sets.
It's not really possible to separate that from functionality.
Your point about the potential rigidity of standards is well taken. However, it’s important to note that a standard, by its nature, doesn’t necessarily have to be rigid and inflexible in a way that hinders progress or creativity. Standards can be designed with adaptability in mind, providing a stable foundation while still allowing for innovation and flexibility. This balanced approach ensures that standards serve as helpful guidelines, not as constraints that stifle growth or possibilities.
Your final point about the practical realities where standards rubber meets the road, so to speak, is also a good one. But there's a distinction between the type of standards you might be referring to, such as in manufacturing or quality assurance, and web. In the former, standards indeed can produce this kind of regulatory capture or bloated compliance industry, and associated restriction on innovation and competition. And on the other hand, the type of standards that we mean when we talk about the web, even though it's the same word, I think they're very distinct in fundamental ways.
Although they share the same terminology, web standards tend to be more about enabling interoperability, innovation, and accessibility, rather than imposing restrictive regulations. However, restrictions do occur and they are sometimes abused, seemingly by big vendors to enhance their value capture by penalizing alternatives in the name of “user safety”. In that sense, web standards can share the “corruption of standards” which I think is invoked by your last point.
Unfortunately a lot of players who rely on browser functionality are completely silent in the standards committees (like the TV vendors who all run their apps in a webkit or chromium version), so it's barely a three-way tug-o-war between Google, Apple and Mozilla
Bootstrap first adopted Flexbox for its grid system Bootstrap 4 (2018), and Bootstrap 5 (2021) added support for Grid. It's conservative about supporting new web standards, but I wouldn't personally think of it as a "legacy" framework.
I cut my teeth on HTML 3.2 so I know what byzantine BS was needed for IE and Netscape. Those were choices made by MS and Netscape, however, so even with a bigger W3C presence, there was no guarantee or even hint that MS and Netscape would fall in line with new standards to begin with.
And it was better then than the garbage we have now where if one big company decides they want it, the rest of the Web gets to deal with it.
That's SO much better, man. /s
aria-label and things like that have replaced some usages of this pattern but not all.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#...
They were used to move text to the right to the left within a container. Or (IIRC) in table cells to make them behave, similar to 1x1 spacer gifs. Some pages had hundreds of nsps. Just kind of a general way to add margin or padding.
My best guess is that this is a side effect of web being a field that's more often picked by new or less experienced devs.
Putting that stuff in css vs having conditional logic in the javascript is a huge win, esp when you want to ssr
Let’s be sure to call the programming style of using this function Ajax, and then create Microsoft Outlook for web as the first browser side Javascript app and modern JavaScript framework.
better than white themes we have today
If you read ancient articles like this one https://support.microsoft.com/en-us/topic/dynamic-page-updat... you can truly see just how much it changed the internet.
We were using that XMLHTTP object as far back as 1999 (I just went to look at old source code) to load page fragments do quasi-SPA stuff before it was a thing.
It was completely unnecessary (at least the look and feel part) but the ability to load in new information into the UI without a full refresh was great.
At the time this was running on Apache 1.1 via Perl CGIs and backed by an mSQL database (that was single-threaded!) so we wanted to minimize complex SQL queries as much as possible..
We eventually moved to a system that would batch pre-render customer details and call history to static HTML overnight when our call center was closed, to reduce the startup time of bringing up a customer's info when the agent had them on the phone. Then for that day we'd use XMLHttp to dynamically append new information from the DB (using a limit statement) and then re-build the static files the next night etc..
In hindsight, we did some creative problem solving for a bunch of self-taught 20-year-olds in the 90s.
For instance, #2 (<table>-based layouts) definitely shaped much of early-to-mid-2000s web design, and can be viewed as a precursor to flexbox/other modern layout engines.
Same with sIFR -- custom webfonts are totally taken for granted today largely because of "hacks" like this.
Same story with rounded corners, which were originally accomplished with tables and images. And a lot of the conventions for website navigation were established in table-based layouts
I guess that would be just called "history of the internet". Originally designed to display text with links - and after decades of hacks, a browser is now allmost an OS, capable of allmost anything computer related.
Not just underscores! You don't want to exclude Opera do you?! All types of hacks existed to target specific browsers. *+html anyone?
.fancy { behavior: url("path/to/pie_files/PIE.htc"); }
They're 100% things that shouldn't exist, mind you.
<!-- saved from url=(0014)about:internet -->\r\n
While searching for it now results let me to SO [1] and from there to (former) MSDN [2], so only now I know this has rad acronym: MOTW meaning "Mark of the Web". It could hardly be more arcane.
[1] https://superuser.com/a/484428/50036 [2] https://learn.microsoft.com/en-us/previous-versions/windows/...
TypeScript, JSX, Tailwind and bundlers come to mind of current trends that get some strong negative reactions but could become more mainstream later.
https://log.schemescape.com/posts/web-development/interactiv...
I will never not be salty about the DOM, CSS, and all the wonky apis to control them. JavaScript in comparison was the least of the sins of web dev.
I guess for me it was more of a creative outlet than just a job.
It was a nightmare.
Fist-bump to fellow "nearly-three-decade-er" (learned HTML in 1995)! :)
People forget that IE for Mac was the best & most standards compliant browser for Mac ~25 years ago.
All of the “IE hate”, was only directed at the Windows version … not the Mac version.
https://en.m.wikipedia.org/wiki/Internet_Explorer_for_Mac
Here’s Gruber also saying it was great.
https://daringfireball.net/linked/2020/01/06/grewel-ie-5-mac
I’m actually missing a bunch of CSS hacks for IE10+ and I think even early Edge version where MS said "No more conditional comments, we can now do everything"[0], but ended up still being buggy and incomplete and requiring special CSS to work properly.
[0]: I can kinda understand it. People had "if !IE" conditional comments, but they now supported that stuff. But they should just have changed the supported syntax, their browsers were still utter crap.
It was a JS library required just to get a cross-browser Flash player.
Also I worked somewhere that used Flash as a proxy for realtime socket support. I believe web sockets were not around then or maybe not fully supported.
For real bidirectional sockets, it was common to make or use a small flash file. You'd talk to it with js, and it would handle the actual socket stuff. Worked pretty well
Nowadays, the block model has matured enough to moot the point, but back then, it was the best way to have content that didn't reflow, but would still be presentable.
"Creating Killer Web Sites." That brings back memories...
A lot of folks hated that book.
<style type="text/javascript">
tags.H1.color = "red";
tags.p.fontSize = "20pt";
with (tags.H3) {
color = "green";
}
with (tags.H2) {
color = "red";
fontSize = "16pt";
marginTop = "4cm";
}
</style> with open(filename) as my_file:
data = my_file.read()
lock = threading.Lock()
with lock:
pass # do stuff
Javascript with comes from Pascal with (which was perhaps copied from somewhere else) and is used to modify variable scope.
with (my.long.variable.reference) {
a = 1;
b = 2;
}
my.long.variable.reference.a = 1;
my.long.variable.reference.b = 2;
https://wiki.freepascal.org/With
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
That kind of "with" is a lot less intuitive to me.
I was responding with Python's "with" because it sounded like they were talking about programming languages in general, but now I can see they were obviously talking about JavaScript's "with" given this context.
var values = [];
for (var i = 0; i < 3; i++) {
values.push(function() { console.log(i); });
}
for (var j = 0; j < 3; j++) {
values[j]();
}
for (var i = 0; i < 3; i++) {
(function(i) {
values.push(function() { console.log(i); });
})(i);
}
for (var i = 0; i < 3; i++) {
with ({i: i}) {
values.push(function() { console.log(i); });
}
}Notice also how many of the hacks were about making it the design look the same in IE as in Netscape. Or in some cases, making it just work, at all, in IE while not breaking in Netscape or Opera or other browsers.
One could argue that this mix of competing rendering engines led to a great deal of creative discovery that drove future developments, and today we have, essentially 3 engines: Chromium, WebKit, and Quantum (formerly Gecko)
Is there a difference between "the Web" and "the Internet".
As a loyal text-only browser user (not lynx or w3m), I have safely avoided all 10. It's possible for me to disable tables and normally I do. Breaking out of frames is one keypress.
Great insight
Microsoft had won the browser war, but at the same time the dotcom crash and antitrust action over the tight integration between IE and Windows caused Microsoft to stop investing in it.
https://archive.ph/20120919002551/http://www.windowsitpro.co...
* html #myDiv { /* IE6 stuff */ }
*:first-child + html #myDiv { /* IE7 stuff */ }
Also love that the article called out sIFR - cannot believe I'd actually forgotten about that one.
I'd built a site for Firefox and then conditionally import IE patches via those hacks to fix issues.
In the worst case, I'd hand to bludgeon it into the right form with JS, but usually I got pretty far with those CSS hacks.
And transparent gifs to set a width without being seen.
as posted by @hypertexthero "My favorite from 20 years ago: Doug Bowman’s 'Sliding Doors' of CSS to make rounded corner tabs that would expand to fit the text: https://alistapart.com/article/slidingdoors/ "
The Internet is made up of MANY protocols, of which you could be talking about ANY, not just the Web. SSH, Gopher, SMTP, they're all Internet, but they're not the Web, and the Web isn't the entirety of the Internet.
Words mean things but of course count on humans to be stupid with them.
Firefox ad from that era
Using a corrupted CSS 'voice-family' rule to make IE play nice: https://tantek.com/CSS/Examples/boxmodelhack.html
Those were the days...
I wish there was an option to specify per website domain which browser to use.
So they rested on laurels.
This turned into a chicken/egg problem where apps only worked in IE6. Mitigated somewhat by "evergreen" browsers that update themselves regularly.
That not hacky enough to make this list? :)