12 ms·

HTML hacks that shaped the Internet

369 points by thm 3y ago

RyanShook 3y ago
Why exactly was Internet Explorer so bad? In hindsight, it looks like a huge missed opportunity for Microsoft.
- troupo 3y ago
  They won. The world was running on desktop computers, and those desktop computers were running Windows, and Windows was running IE. So they rested on laurels.
- ubermonkey 3y ago
  They were attempting to replace standards-based rendering with their idiosyncratic version. It wasn't that IE was bad; it was that it was deliberately that way b/c they saw the web as a threat to the desktop, and wanted to Embrace, Extend, and Extinguish it.
- cantSpellSober 3y ago
  It had the majority share of users, lots of bugs, and didn't update itself (in the sense that modern evergreen browsers do). This turned into a chicken/egg problem where apps only worked in IE6. Mitigated somewhat by "evergreen" browsers that update themselves regularly.
mcv 3y ago
I'm not sure "shaped the Internet" is the right description. These are 10 HTML/CSS hacks that enabled you to work around browser quirks and poor support for certain features.
- zbaylin 3y ago
  Some of them are definitely more "historic" than others. 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.
  - wongarsu 3y ago
    I strongly agree with table layouts being historic. A large reason we now have flexbox is because early CSS was really bad at replicating table-based layouts, so people didn't stop using then despite the drawbacks. 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
  - chrismorgan 3y ago
    I don’t know about others, but I hated sIFR. It was routinely deployed without sane fallback (so that if you didn’t have Flash, headings were broken, for example—it being common to deploy it on headings only, since it was overall so awful), it butchered performance, the rendering was ugly and often difficult to read, and it thwarted regular operations like text selection.
- debok 3y ago
  Yeah. I was hoping for a list of hacks that got promoted to standards. That would have been a really cool read.
  - hutzlibu 3y ago
    "list of hacks that got promoted to standards. That would have been a really cool read." 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.
- kuschku 3y ago
  If you want to know a JS hack that truly "shaped the Internet", that'd be ActiveXObject("Microsoft.XMLHTTP"). It's the origin of AJAX, allowed GMail to dynamically update the mail list, and led to the entire SPA craze. If you read ancient articles like this one https://support.microsoft.com/en-us/topic/dynamic-page-updates-using-xmlhttp-3c16d126-ce9a-6986-3d5d-35bc4f519507 https://support.microsoft.com/en-us/topic/dynamic-page-updat... you can truly see just how much it changed the internet.
  - sbarre 3y ago
    Hah I was hoping someone would bring this up.. 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.
    - codingdave 3y ago
      Same - I recall using it heavily in 99. But that was just on one internal app. I admit that I didn't really predict the SPA thing until Google maps came out and really showed how far it could be taken.
      - sbarre 3y ago
        I worked for an ISP in the late 90s and we built a call center app using IE6, SSI, XMLHttp and also IE's built in CSS classes that matched the Windows colours to essentially have a UI that looked and felt like a Windows 95 app.. 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.
detolly 3y ago
> Why it was useful: Because Internet Explorer was trash Great insight
- wongarsu 3y ago
  Specifically: IE6 was trash. 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.
  - josefx 3y ago
    Did they ever invest much into it? As far as I understand they got the core components from Spyglass Inc. and avoided paying licensing fees by giving it away for free.
    - couchand 3y ago
      Sounds like they avoided paying licensing fees by not paying licensing fees and then acting surprised when called on it. https://archive.ph/20120919002551/http://www.windowsitpro.com/article/news2/microsoft-and-spyglass-kiss-and-make-up.aspx https://archive.ph/20120919002551/http://www.windowsitpro.co...
      - dale_glass 3y ago
        Wasn't it that the Spyglass deal was MS paying a percentage of revenue, and MS releasing IE for free, so that Spyglass got to keep a percentage of $0?
        Pixie_Dust 3y ago
        > Feels like when Microsoft licensed Mosaic from Spyglass to become Internet Explorer, and a chunk of the compensation was tied to a fraction of revenue from Internet Explorer. Of course Microsoft gave IE away as part of Windows so IE never had any revenue associated directly with it. Eventually MS did settle a lawsuit brought by Spyglass for $8 million to make the issue go away https://news.ycombinator.com/item?id=27999293 https://news.ycombinator.com/item?id=27999293
matsemann 3y ago
Some of my favorites: - 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/ 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 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.
- Brajeshwar 3y ago
  That 3x3 was used so much with our team that we built a component just to do that. I even wrote an article about it, more of an ActionScript thing but same idea for styling -- https://brajeshwar.com/2005/splice9-bitmap-window-resizer-component-01b/ https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co... The other nice thing was the use of the cicada principle for a background styling pattern that 'do not repeat.'
- aidos 3y ago
  Golly. It’s a bit of a slap in the face to click through to A List Apart and see the header broken on mobile. It’s still so clean though after all these years.
  - mattwad 3y ago
    you mean the title cut off? it happens on desktop too. i wonder if it's intentional
    - Brajeshwar 3y ago
      Yes, it is intentionally their design.
keepamovin 3y ago
I like how HN employs one of these today: - 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? :)
- troupo 3y ago
  Unfortunately today w3c and tc39 (Javascript) are completely dominated by Google who ram through a lot of standards while barely paying lip service to the process. 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
  - solarkraft 3y ago
    And really barely. My impression is Chrome still innovates (though somewhat unilaterally), Mozilla sleeps (no clear path towards view transitions ...) and Apple sometimes contributes small quality of life things.
  - keepamovin 3y ago
    I’m still bullish on the possibility of Microsoft edge shaking up this dynamic a little, but maybe I’m naïve.
    - troupo 3y ago
      They did start https://open-ui.org https://open-ui.org which really deserves special recognition.
masswerk 3y ago
Regarding the closing statement: I think, a major, now mostly forgotten influence were CD-ROMs and an ambition to match those.
- deleted 3y ago
  [deleted]
Brajeshwar 3y ago
Wow. Remember those days. I went through all of these hacks except No. 7 & 8 (pre-header text hack, Google Chrome Frame). I'm not sure about the "Shaped the Internet" title, but these indeed go as defaults when starting a CSS project. In fact, one way to highlight front-end candidates was to include these hacks in interview questions.
pavlov 3y ago
No respect for spacer.gif? It's still here on HN of course, included in every page request: https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif
- nashadelic 3y ago
  No story of table-layout is complete without spacers images
  - althea_tx 3y ago
    I came here to say the same thing. :)
kripy 3y ago
I remember the good old days of the transparent 1×1 pixel gif to keep table cells in check.
- SushiHippie 3y ago
  "Good old days"? You are currently on a page using this ;) https://news.ycombinator.com/item?id=38485665 https://news.ycombinator.com/item?id=38485665
- personalityson 3y ago
  I used to slice large images in a grid pattern, held by a table. Don't even remember why... For faster loading?
RamblingCTO 3y ago
This gave me ptsd haha. Also shows how mush cost we have/had with one company (MSFT) fucking up so bad. Imagine the hours incurred because IE sucks?
- perilunar 3y ago
  ptsd.psd ?
- sexy_seedbox 3y ago
  Nowadays it's Microsoft Teams, one step forward and two step backwards, every. single. update.
troupo 3y ago
It's funny how we came around to JSSS, and it's now everywhere: from CSS-in-JS to web components coding their CSS in strings inside Javascript
- ainar-g 3y ago
  I've looked up some JSSS code examples, and it seems like it's pretty much the only type of code where the "with" keyword makes sense: <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>
  - trealira 3y ago
    I think it also makes sense in Python, where it can be used to automatically close a file, or with open(filename) as my_file: data = my_file.read() Or with acquiring and releasing a lock: lock = threading.Lock() with lock: pass # do stuff That being said, I prefer the C++ approach of using constructors and destructors to automatically acquire resources (like locks and files) by declaring variables within some block scope, and release them once the scope is left.
    - ksherlock 3y ago
      Javascript with and python with are completely separate things. 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; } is equivalent to: my.long.variable.reference.a = 1; my.long.variable.reference.b = 2; or at least, it might be ... due to Javascript's dynamic and typeless nature you might not know for sure what will happen until runtime. Which is one reason it's now deprecated and not allowed in strict mode. In pascal, variables have a type, records have fields, and these are known at compile time so that's not an issue. https://wiki.freepascal.org/With https://wiki.freepascal.org/With https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#simplifying_scope_management https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
quickthrower2 3y ago
Rounded corners using images? Usually using a sprite. 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.
- paradox460 3y ago
  Sockets are very new. Way back when, you'd either use COMET, which was a connection that the server wouldn't close, and you'd append data to it, for the js in the browser to use. This was one directional, so going the other way still required separate requests 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
helsinkiandrew 3y ago
I remember running a project to build a mortgage calculator/spreadsheet 'app' for a bank that had to work in 'Dynamic HTML' in Netscape 4 and IE. A never ending hell of compatibility, functionality and appearance differences that took many sleepless nights to fix.
- Tijdreiziger 3y ago
  But hey, it gave us http://www.dynamicdrive.com http://www.dynamicdrive.com!
padjo 3y ago
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader Brings me back
phirschybar 3y ago
wow - this was a great walk down memory lane. I remember using all of them, particularly tables for creating complicated layouts. it worked beautifully but was an unbelievable pain to maintain when making layout changes. what's wild though is that this technique eventually went way beyond the category of "hack". slicing tables into layout became officially supported by major software such as dreamweaver (big at the time) and photoshop! yes, you could open a static design in photoshop and use the "slice tool" to cut it up into an HTML table. good times...
NooneAtAll3 3y ago
> Remember when our browsers defaulted to gray backgrounds? That was weird, right? better than white themes we have today
- phero_cnstrcts 3y ago
  The best part is going between two dark themed sites at night and get a blinding bright flash as a transition.
  - Am4TIfIsER0ppos 3y ago
    I used to override the default style to do white text black background and I lost count of the number of sites that would set one of those properties to the common default causing everything to be invisible.
CommanderData 3y ago
Remember when we rounded corners using images placed at each corner. It was a nightmare.
- grishka 3y ago
  Another technique: 3 1-pixel <b>s per corner. For example, look at the buttons here https://web.archive.org/web/20070624110053/http://vkontakte.ru/ https://web.archive.org/web/20070624110053/http://vkontakte....
quadral 3y ago
The font size on this site is huge. Why do blogs now follow this?
- rebolek 3y ago
  Because it's easier to read.
willsmith72 3y ago
Is responsive design really a hack? Media queries are awesome Putting that stuff in css vs having conditional logic in the javascript is a huge win, esp when you want to ssr
- jbeninger 3y ago
  I had the same thought. Media queries to support different... media seems like the exact proper use case.
- zlg_codes 3y ago
  No, it's not a hack. You can query different things about the user agent and serve different CSS based on those queries. Anyone calling it a hack is ignorant, it's a necessary part of producing responsive designs.
- mike_hock 3y ago
  It is when then query doesn't query what you want to know but something that happens to correlate with the thing that you actually need.
gpderetta 3y ago
Not a web dev, but I heard of this hack called XMLHttpRequest...
ChrisMarshallNY 3y ago
One of the major differences between tables and block elements, is that block elements react to the context, and tables react to the content. I used to use "display: table" a lot, even on divs. 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.
mattpavelle 3y ago
What about those weird proprietary HTML tags (ilayer, blink, etc.( that were not supported by both IE and Netscape Navigator that on first release required you to write the tag inside an HTML comment so as not to break the competing browser? That not hacky enough to make this list? :)
davidy123 3y ago
This doesn't include my "favourite," putting a heading for accessibility at a -10000 position, so screen readers would read it, but it didn't render on the screen.
- bonzini 3y ago
  Does it still work? Or do you have to use ARIA?
  - davidy123 3y ago
    I don't see why it wouldn't work, but the right thing to do is use accessibility features.
  - jorgesborges 3y ago
    This still works and is a somewhat common practice, especially for something like a skip link. Try pressing tab on some of your favorite websites you might find they use this technique. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#...
  - arcanemachiner 3y ago
    I think you can use `visibility: hidden` or something like that.
    - robertc 3y ago
      Most screen readers ignore hidden elements IIRC.
- zerocrates 3y ago
  This (as well as close relatives of this) is still relatively common because we still don't have a great option for to have non-visible text that's screen-reader accessible in all cases. aria-label and things like that have replaced some usages of this pattern but not all.
fifilura 3y ago
Using tables for layout is pretty understandable. 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_layout/Floats 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."
- city41 3y ago
  The era between tables and flexbox/grid was a difficult one. Floats were finicky and hard to get right. A lot of people just went back to tables, and I honestly didn't blame them.
  - kalleboo 3y ago
    Or the rare-in-the-wild but somewhat funky method of using the display: table/table-row/table-cell CSS declarations to create table-based designs, but applied to different tags so at least your HTML still only shows those fancy modern divs :)
  - chrisfinazzo 3y ago
    I had an internship during college at a small web shop that did a ton of HTML mail. Early on, after I had completed a project, they took a half day to try and teach me how floats worked. 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.
dnhrd 3y ago
No love for the OG box model hack by Tantek Çelik? Using a corrupted CSS 'voice-family' rule to make IE play nice: https://tantek.com/CSS/Examples/boxmodelhack.html https://tantek.com/CSS/Examples/boxmodelhack.html Those were the days...
cantSpellSober 3y ago
> Putting an underscore in front of a CSS style Not just underscores! You don't want to exclude Opera do you?! All types of hacks existed to target specific browsers. *+html anyone? https://css-tricks.com/snippets/css/browser-specific-hacks/ https://css-tricks.com/snippets/css/browser-specific-hacks/ http://browserhacks.com/ http://browserhacks.com/
k__ 3y ago
I fondly remember the times. 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.
telesilla 3y ago
No mention of the html5 shiv we all installed before any CSS so all browser quirks were removed? https://paulirish.com/2011/the-history-of-the-html5-shiv/ https://paulirish.com/2011/the-history-of-the-html5-shiv/
- cachvico 3y ago
  Nor of reset, normalize etc.
irrational 3y ago
Walk down memory lane. I've used almost all of these over the nearly 27 years I've been doing web development. I kind of feel like the old float/clear and 1px x 1px transparent gif hacks should have been in there as well.
- amatecha 3y ago
  Yeah, I was waiting for the 1px.gif for spacers, and display: inline-block for "tile" layouts... haha Fist-bump to fellow "nearly-three-decade-er" (learned HTML in 1995)! :)
ulrischa 3y ago
Dupe: https://news.ycombinator.com/item?id=38423981 https://news.ycombinator.com/item?id=38423981
- hapulala89 3y ago
  Why are here so many duplicates? One should look before posting.
vsnf 3y ago
The article and every comment in this thread thereof is a thermonuclear illustration of (part of) why I hate web development. This is what so many of my peers told me was the way to develop applications. Nevermind that the desktop frameworks, quirky though they were at times, had none of these issues and didn’t force some absolutely wild hacks on their users. 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.
- handy2000 3y ago
  In an odd way, I miss the time when web dev was so quirky and unpredictable. It was a never-ending process of experimentation, puzzle solving, discovery, and, once you figure out a hacky way to do something as basic as a 3-column layout, very gratifying. I guess for me it was more of a creative outlet than just a job.
  - amatecha 3y ago
    Yeah and hilariously, being able to navigate and accurately exploit the quirks of browsers could give your web development business a competitive edge. My colleagues and I had it as a source of pride to come up with a complete stack of tedious "hacks" to make even the most ambitious designs possible, in the mid-2000's. Our designers were able to basically make whatever they wanted (within reason) and have it work out. The excitement of getting some layout working that today would be trivial... ahh, fun times :) haha
wavemode 3y ago
Sometimes I can't tell if modern web developers are spoiled, by having CSS Grid and IE being dead. Or if we were spoiled back then, by not having to deal with the complexity of modern frameworks and build processes.
- flagrant_taco 3y ago
  There is something unique in web development connotation to the other fields I've worked in. The industry has made a habit of reinventing the wheel in every more complex ways. 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.
  - jdmichal 3y ago
    The web is essentially UI development. And UI frameworks and libraries have always had lots of churn. Even ultra-conservative Java has had AWT, Swing, and a couple varieties of JavaFX. And then a few more developed by other groups like SWT. The expectations of both developers and users increase as computers advance, and older frameworks can't always keep up.
- CM30 3y ago
  Probably both, though I think it's probably easier nowadays simply because you don't technically need modern frameworks and build processes, and can create what would previously be complicated sites and apps with ease using modern CSS and JavaScript.
mseepgood 3y ago
11. Using JavaScript to build applications
kapitanjakc 3y ago
Have used all of them, and will use some of them even today
- sexy_seedbox 3y ago
  Comment conditionals still needed to render proper tables in email for different versions of Outlook.
Semaphor 3y ago
I missed out on 1. because it was before my time, and I never needed 7., everything else I used at some point :D 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.
bdr 3y ago
One more to add from the early days: widespread use of  , the character entity for a non-breaking space. 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.
cantSpellSober 3y ago
SWFObject deserves a shoutout if sIFR is getting one. It was a JS library required just to get a cross-browser Flash player.
moribvndvs 3y ago
The moment I saw filter:progid:DXImageTransform I had an urge to call my therapist. So much trauma in one article.
101008 3y ago
Great article. I love everything related to the "old internet" (as you can see from my nostalgic point of view on some of my comments in Hacker News). Is there a good book about that particular time? I'd like to read a very good book about not just browsing the internet back then, but doing some kind of development (especially frontend, which I think it was the one that required most hacks and changed more than the backend in a few years)-
deleted 3y ago
[deleted]
jszymborski 3y ago
My favourite was using iFrames as a type of ersatz AJAX. Click a link, make the target the iframe, an voila! No page refresh, and the iFrame gives visual feedback.
- schemescape 3y ago
  I recently did sort of the inverse as an experiment: put a button in a frame to avoid reloading the main page: https://log.schemescape.com/posts/web-development/interactive-browser-app-without-js-2.html https://log.schemescape.com/posts/web-development/interactiv...
sproketboy 3y ago
[dead]
notbeuller 3y ago
I will often slap a dumb 3 line http server into my long running tools / applications for debugging - provide ReSTful channel to toggle debug flags. I “learned” html in the 90s and don’t use it otherwise, so <table> figures prominently in generating the structure of the page.
seanwilson 3y ago
This is why "HTML/CSS/JS isn't supposed to be used like that" is a weak argument. Browser features we take for granted now grew from developers popularising hacks that pushed the boundaries (usually in ways people complained about at the time) until official support was gradually built into the browser e.g. AJAX, responsive layouts, complex/flex/grid layouts, reactivity with proxies, JavaScript modules, desktop-like web UIs in general. TypeScript, JSX, Tailwind and bundlers come to mind of current trends that get some strong negative reactions but could become more mainstream later.
j45 3y ago
Seeing the title of the article, it was surprising surprised to not use the use of xmlhttprequest to invent the category of JavaScript driven apps, by Microsoft no less. 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. https://en.m.wikipedia.org/wiki/Ajax_(programming) https://en.m.wikipedia.org/wiki/Ajax_(programming)
myfonj 3y ago
No mention about HTC? .fancy { behavior: url("path/to/pie_files/PIE.htc"); } (It is still online [1]! And even on GitHub [2]!!) [1] http://css3pie.com/ http://css3pie.com/ [2] https://github.com/lojjic/PIE https://github.com/lojjic/PIE
- Klonoar 3y ago
  I have a stupid fondness for the level of hacks that we all collectively developed for IE6-9. One of my favorites was tricking IE6/7 into supporting Base64-encoded images in CSS by essentially triggering Outlook rules. They're 100% things that shouldn't exist, mind you.
  - myfonj 3y ago
    Hm, cannot recall this one, but it reminded me of another magical trigger: to make HTML file loaded from local file (or CD-ROM, or whatever non-Internet) one had to pretend that given file was "Saved from (Internet)" with magical HTML comment preambule such as \r\n in order to make that file execute JavaScript (or maybe even load other resources from relative locations). 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 https://superuser.com/a/484428/50036 [2] https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537628(v=vs.85)?redirectedfrom=MSDN https://learn.microsoft.com/en-us/previous-versions/windows/...
Gabrys1 3y ago
https://www.youtube.com/watch?v=9sKppwrLBY8 https://www.youtube.com/watch?v=9sKppwrLBY8 Firefox ad from that era
hypertexthero 3y ago
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/ https://alistapart.com/article/slidingdoors/
Kwpolska 3y ago
Did anyone actually use Chrome Frame? Were there so many users that were so used to the IE interface and were unwilling to accept Chrome itself?
- adamzochowski 3y ago
  Plenty corporates had IE only/first policy. This meant everything intranet had to work on IE. A website developed for chrome was allowed to request chrome frame, but it had to undo itself for any external links when linking to other intranet sites (plenty active-x / silverlight). I wish there was an option to specify per website domain which browser to use.
  - nikhilgk 3y ago
    And more importantly, as I recall, you could install chrome frame without admin access.
hollowturtle 3y ago
The one I still remember: Clearfix
- sexy_seedbox 3y ago
  This one needs an ayahuasca trip to heal the trauma.
cratermoon 3y ago
Notice how many of these hacks grew out of what was called the "pixel perfectionist" crowd in those days. The Web and HTML came out of a community that valued logically, semantically organized content. Communication was largely about words and ideas. If the result looked about as exciting as an academic paper, well, that was fine. The adoption by a community concerned with communicating with design, using color, layout, and other visual elements, came with a host of ways to squeeze it out of the limited capabilities of HTML. 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)
1vuio0pswjnm7 3y ago
Actual HTML title: "10 Weird HTML Hacks That Shaped The Internet" 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.
zlg_codes 3y ago
The amount of conflation between "the Internet" and "the Web" is way too high in here. It is the most popular protocol, but it is not the only protocol.
- timbit42 3y ago
  The amount of conflation between "The Web" and "HTTP" is way too high in here. "The Web" is not a protocol.
  - zlg_codes 3y ago
    This trick doesn't work because you cannot talk about the Web without also talking about HTTP, the protocol that runs it. 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.
Klonoar 3y ago
I developed extensively for IE6 back in the day and never actually used that underscore hack - found it too confusing in codebases. We'd use the asterisk html selector path instead. IE7 had a similar hack for marking off CSS using some first-child trickery, e.g: * html #myDiv { /* IE6 stuff */ } *:first-child + html #myDiv { /* IE7 stuff */ } One could also trick IE6/7 into loading base64-encoded images in CSS by shoving in an mhtml boundary in CSS files. Also love that the article called out sIFR - cannot believe I'd actually forgotten about that one.
alberth 3y ago
IE for Mac was great. 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 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 https://daringfireball.net/linked/2020/01/06/grewel-ie-5-mac
- amatecha 3y ago
  Yeah, even from your first line I knew you must be talking about IE 5. It was the most fully-featured browser at the time and was fast. I remember Netscape Navigator crashing a lot, by comparison. >_<
blahyawnblah 3y ago
And PNGs for rounded corners. I can't remember what the term was when you took two images overlayed to make a rounded button that was resizable. Sliding door buttons? And transparent gifs to set a width without being seen.
- Tagbert 3y ago
  It might have been this: 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/ https://alistapart.com/article/slidingdoors/ "
ryoshu 3y ago
I still have a physical copy of, "Creating Killer Web Sites." That era of web dev was hacky and super fun.
makach 3y ago
<blink> don't forget
technion 3y ago
That conditional commenting is still amazingly prevalent. It's strange how many websites "don't support ie" but have three sets of conditions for different ie versions.
deleted 3y ago
[deleted]
vwcx 3y ago
Anyone remember DHTML chromeless windows? http://www.dynamicdrive.com/dynamicindex8/chromeless.htm http://www.dynamicdrive.com/dynamicindex8/chromeless.htm
dlrush 3y ago
Tldr: XHR
alex-moon 3y ago
They were dark days. This is why I get agitated about browsers that don't properly support CSS standards in the present day, most notably Safari mobile. Garbage browser that should be illegal.

369 points by thm 3y ago

RyanShook 3y ago

Why exactly was Internet Explorer so bad? In hindsight, it looks like a huge missed opportunity for Microsoft.

troupo 3y ago
They won. The world was running on desktop computers, and those desktop computers were running Windows, and Windows was running IE. So they rested on laurels.
ubermonkey 3y ago
They were attempting to replace standards-based rendering with their idiosyncratic version. It wasn't that IE was bad; it was that it was deliberately that way b/c they saw the web as a threat to the desktop, and wanted to Embrace, Extend, and Extinguish it.
cantSpellSober 3y ago
It had the majority share of users, lots of bugs, and didn't update itself (in the sense that modern evergreen browsers do). This turned into a chicken/egg problem where apps only worked in IE6. Mitigated somewhat by "evergreen" browsers that update themselves regularly.

mcv 3y ago

I'm not sure "shaped the Internet" is the right description. These are 10 HTML/CSS hacks that enabled you to work around browser quirks and poor support for certain features.

zbaylin 3y ago
Some of them are definitely more "historic" than others. 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.
- wongarsu 3y ago
  I strongly agree with table layouts being historic. A large reason we now have flexbox is because early CSS was really bad at replicating table-based layouts, so people didn't stop using then despite the drawbacks. 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
- chrismorgan 3y ago
  I don’t know about others, but I hated sIFR. It was routinely deployed without sane fallback (so that if you didn’t have Flash, headings were broken, for example—it being common to deploy it on headings only, since it was overall so awful), it butchered performance, the rendering was ugly and often difficult to read, and it thwarted regular operations like text selection.
debok 3y ago
Yeah. I was hoping for a list of hacks that got promoted to standards. That would have been a really cool read.
- hutzlibu 3y ago
  "list of hacks that got promoted to standards. That would have been a really cool read." 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.
kuschku 3y ago
If you want to know a JS hack that truly "shaped the Internet", that'd be ActiveXObject("Microsoft.XMLHTTP"). It's the origin of AJAX, allowed GMail to dynamically update the mail list, and led to the entire SPA craze. If you read ancient articles like this one https://support.microsoft.com/en-us/topic/dynamic-page-updates-using-xmlhttp-3c16d126-ce9a-6986-3d5d-35bc4f519507 https://support.microsoft.com/en-us/topic/dynamic-page-updat... you can truly see just how much it changed the internet.
- sbarre 3y ago
  Hah I was hoping someone would bring this up.. 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.
  - codingdave 3y ago
    Same - I recall using it heavily in 99. But that was just on one internal app. I admit that I didn't really predict the SPA thing until Google maps came out and really showed how far it could be taken.
    - sbarre 3y ago
      I worked for an ISP in the late 90s and we built a call center app using IE6, SSI, XMLHttp and also IE's built in CSS classes that matched the Windows colours to essentially have a UI that looked and felt like a Windows 95 app.. 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.

detolly 3y ago

> Why it was useful: Because Internet Explorer was trash Great insight

wongarsu 3y ago
Specifically: IE6 was trash. 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.
- josefx 3y ago
  Did they ever invest much into it? As far as I understand they got the core components from Spyglass Inc. and avoided paying licensing fees by giving it away for free.
  - couchand 3y ago
    Sounds like they avoided paying licensing fees by not paying licensing fees and then acting surprised when called on it. https://archive.ph/20120919002551/http://www.windowsitpro.com/article/news2/microsoft-and-spyglass-kiss-and-make-up.aspx https://archive.ph/20120919002551/http://www.windowsitpro.co...
    - dale_glass 3y ago
      Wasn't it that the Spyglass deal was MS paying a percentage of revenue, and MS releasing IE for free, so that Spyglass got to keep a percentage of $0?
      - Pixie_Dust 3y ago
        > Feels like when Microsoft licensed Mosaic from Spyglass to become Internet Explorer, and a chunk of the compensation was tied to a fraction of revenue from Internet Explorer. Of course Microsoft gave IE away as part of Windows so IE never had any revenue associated directly with it. Eventually MS did settle a lawsuit brought by Spyglass for $8 million to make the issue go away https://news.ycombinator.com/item?id=27999293 https://news.ycombinator.com/item?id=27999293

matsemann 3y ago

Some of my favorites: - 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/ 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 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.

Brajeshwar 3y ago
That 3x3 was used so much with our team that we built a component just to do that. I even wrote an article about it, more of an ActionScript thing but same idea for styling -- https://brajeshwar.com/2005/splice9-bitmap-window-resizer-component-01b/ https://brajeshwar.com/2005/splice9-bitmap-window-resizer-co... The other nice thing was the use of the cicada principle for a background styling pattern that 'do not repeat.'
aidos 3y ago
Golly. It’s a bit of a slap in the face to click through to A List Apart and see the header broken on mobile. It’s still so clean though after all these years.
- mattwad 3y ago
  you mean the title cut off? it happens on desktop too. i wonder if it's intentional
  - Brajeshwar 3y ago
    Yes, it is intentionally their design.

keepamovin 3y ago

I like how HN employs one of these today: - 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? :)

troupo 3y ago
Unfortunately today w3c and tc39 (Javascript) are completely dominated by Google who ram through a lot of standards while barely paying lip service to the process. 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
- solarkraft 3y ago
  And really barely. My impression is Chrome still innovates (though somewhat unilaterally), Mozilla sleeps (no clear path towards view transitions ...) and Apple sometimes contributes small quality of life things.
- keepamovin 3y ago
  I’m still bullish on the possibility of Microsoft edge shaking up this dynamic a little, but maybe I’m naïve.
  - troupo 3y ago
    They did start https://open-ui.org https://open-ui.org which really deserves special recognition.

masswerk 3y ago

Regarding the closing statement: I think, a major, now mostly forgotten influence were CD-ROMs and an ambition to match those.

deleted 3y ago
[deleted]

Brajeshwar 3y ago

Wow. Remember those days. I went through all of these hacks except No. 7 & 8 (pre-header text hack, Google Chrome Frame). I'm not sure about the "Shaped the Internet" title, but these indeed go as defaults when starting a CSS project. In fact, one way to highlight front-end candidates was to include these hacks in interview questions.

pavlov 3y ago

No respect for spacer.gif? It's still here on HN of course, included in every page request: https://news.ycombinator.com/s.gif https://news.ycombinator.com/s.gif

nashadelic 3y ago
No story of table-layout is complete without spacers images
- althea_tx 3y ago
  I came here to say the same thing. :)

kripy 3y ago

I remember the good old days of the transparent 1×1 pixel gif to keep table cells in check.

SushiHippie 3y ago
"Good old days"? You are currently on a page using this ;) https://news.ycombinator.com/item?id=38485665 https://news.ycombinator.com/item?id=38485665
personalityson 3y ago
I used to slice large images in a grid pattern, held by a table. Don't even remember why... For faster loading?

RamblingCTO 3y ago

This gave me ptsd haha. Also shows how mush cost we have/had with one company (MSFT) fucking up so bad. Imagine the hours incurred because IE sucks?

perilunar 3y ago
ptsd.psd ?
sexy_seedbox 3y ago
Nowadays it's Microsoft Teams, one step forward and two step backwards, every. single. update.

troupo 3y ago

It's funny how we came around to JSSS, and it's now everywhere: from CSS-in-JS to web components coding their CSS in strings inside Javascript

ainar-g 3y ago
I've looked up some JSSS code examples, and it seems like it's pretty much the only type of code where the "with" keyword makes sense: <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>
- trealira 3y ago
  I think it also makes sense in Python, where it can be used to automatically close a file, or with open(filename) as my_file: data = my_file.read() Or with acquiring and releasing a lock: lock = threading.Lock() with lock: pass # do stuff That being said, I prefer the C++ approach of using constructors and destructors to automatically acquire resources (like locks and files) by declaring variables within some block scope, and release them once the scope is left.
  - ksherlock 3y ago
    Javascript with and python with are completely separate things. 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; } is equivalent to: my.long.variable.reference.a = 1; my.long.variable.reference.b = 2; or at least, it might be ... due to Javascript's dynamic and typeless nature you might not know for sure what will happen until runtime. Which is one reason it's now deprecated and not allowed in strict mode. In pascal, variables have a type, records have fields, and these are known at compile time so that's not an issue. https://wiki.freepascal.org/With https://wiki.freepascal.org/With https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#simplifying_scope_management https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

quickthrower2 3y ago

Rounded corners using images? Usually using a sprite. 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.

paradox460 3y ago
Sockets are very new. Way back when, you'd either use COMET, which was a connection that the server wouldn't close, and you'd append data to it, for the js in the browser to use. This was one directional, so going the other way still required separate requests 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

helsinkiandrew 3y ago

I remember running a project to build a mortgage calculator/spreadsheet 'app' for a bank that had to work in 'Dynamic HTML' in Netscape 4 and IE. A never ending hell of compatibility, functionality and appearance differences that took many sleepless nights to fix.

Tijdreiziger 3y ago
But hey, it gave us http://www.dynamicdrive.com http://www.dynamicdrive.com!

padjo 3y ago

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader Brings me back

phirschybar 3y ago

wow - this was a great walk down memory lane. I remember using all of them, particularly tables for creating complicated layouts. it worked beautifully but was an unbelievable pain to maintain when making layout changes. what's wild though is that this technique eventually went way beyond the category of "hack". slicing tables into layout became officially supported by major software such as dreamweaver (big at the time) and photoshop! yes, you could open a static design in photoshop and use the "slice tool" to cut it up into an HTML table. good times...

NooneAtAll3 3y ago

> Remember when our browsers defaulted to gray backgrounds? That was weird, right? better than white themes we have today

phero_cnstrcts 3y ago
The best part is going between two dark themed sites at night and get a blinding bright flash as a transition.
- Am4TIfIsER0ppos 3y ago
  I used to override the default style to do white text black background and I lost count of the number of sites that would set one of those properties to the common default causing everything to be invisible.

CommanderData 3y ago

Remember when we rounded corners using images placed at each corner. It was a nightmare.

grishka 3y ago
Another technique: 3 1-pixel <b>s per corner. For example, look at the buttons here https://web.archive.org/web/20070624110053/http://vkontakte.ru/ https://web.archive.org/web/20070624110053/http://vkontakte....

quadral 3y ago

The font size on this site is huge. Why do blogs now follow this?

rebolek 3y ago
Because it's easier to read.

willsmith72 3y ago

Is responsive design really a hack? Media queries are awesome Putting that stuff in css vs having conditional logic in the javascript is a huge win, esp when you want to ssr

jbeninger 3y ago
I had the same thought. Media queries to support different... media seems like the exact proper use case.
zlg_codes 3y ago
No, it's not a hack. You can query different things about the user agent and serve different CSS based on those queries. Anyone calling it a hack is ignorant, it's a necessary part of producing responsive designs.
mike_hock 3y ago
It is when then query doesn't query what you want to know but something that happens to correlate with the thing that you actually need.

gpderetta 3y ago

Not a web dev, but I heard of this hack called XMLHttpRequest...

ChrisMarshallNY 3y ago

One of the major differences between tables and block elements, is that block elements react to the context, and tables react to the content. I used to use "display: table" a lot, even on divs. 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.

mattpavelle 3y ago

What about those weird proprietary HTML tags (ilayer, blink, etc.( that were not supported by both IE and Netscape Navigator that on first release required you to write the tag inside an HTML comment so as not to break the competing browser? That not hacky enough to make this list? :)

davidy123 3y ago

This doesn't include my "favourite," putting a heading for accessibility at a -10000 position, so screen readers would read it, but it didn't render on the screen.

bonzini 3y ago
Does it still work? Or do you have to use ARIA?
- davidy123 3y ago
  I don't see why it wouldn't work, but the right thing to do is use accessibility features.
- jorgesborges 3y ago
  This still works and is a somewhat common practice, especially for something like a skip link. Try pressing tab on some of your favorite websites you might find they use this technique. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#...
- arcanemachiner 3y ago
  I think you can use `visibility: hidden` or something like that.
  - robertc 3y ago
    Most screen readers ignore hidden elements IIRC.
zerocrates 3y ago
This (as well as close relatives of this) is still relatively common because we still don't have a great option for to have non-visible text that's screen-reader accessible in all cases. aria-label and things like that have replaced some usages of this pattern but not all.

fifilura 3y ago

Using tables for layout is pretty understandable. 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_layout/Floats 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."

city41 3y ago
The era between tables and flexbox/grid was a difficult one. Floats were finicky and hard to get right. A lot of people just went back to tables, and I honestly didn't blame them.
- kalleboo 3y ago
  Or the rare-in-the-wild but somewhat funky method of using the display: table/table-row/table-cell CSS declarations to create table-based designs, but applied to different tags so at least your HTML still only shows those fancy modern divs :)
- chrisfinazzo 3y ago
  I had an internship during college at a small web shop that did a ton of HTML mail. Early on, after I had completed a project, they took a half day to try and teach me how floats worked. 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.

dnhrd 3y ago

No love for the OG box model hack by Tantek Çelik? Using a corrupted CSS 'voice-family' rule to make IE play nice: https://tantek.com/CSS/Examples/boxmodelhack.html https://tantek.com/CSS/Examples/boxmodelhack.html Those were the days...

cantSpellSober 3y ago

> Putting an underscore in front of a CSS style Not just underscores! You don't want to exclude Opera do you?! All types of hacks existed to target specific browsers. *+html anyone? https://css-tricks.com/snippets/css/browser-specific-hacks/ https://css-tricks.com/snippets/css/browser-specific-hacks/ http://browserhacks.com/ http://browserhacks.com/

k__ 3y ago

I fondly remember the times. 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.

telesilla 3y ago

No mention of the html5 shiv we all installed before any CSS so all browser quirks were removed? https://paulirish.com/2011/the-history-of-the-html5-shiv/ https://paulirish.com/2011/the-history-of-the-html5-shiv/

cachvico 3y ago
Nor of reset, normalize etc.

irrational 3y ago

Walk down memory lane. I've used almost all of these over the nearly 27 years I've been doing web development. I kind of feel like the old float/clear and 1px x 1px transparent gif hacks should have been in there as well.

amatecha 3y ago
Yeah, I was waiting for the 1px.gif for spacers, and display: inline-block for "tile" layouts... haha Fist-bump to fellow "nearly-three-decade-er" (learned HTML in 1995)! :)

ulrischa 3y ago

Dupe: https://news.ycombinator.com/item?id=38423981 https://news.ycombinator.com/item?id=38423981

hapulala89 3y ago
Why are here so many duplicates? One should look before posting.

vsnf 3y ago

The article and every comment in this thread thereof is a thermonuclear illustration of (part of) why I hate web development. This is what so many of my peers told me was the way to develop applications. Nevermind that the desktop frameworks, quirky though they were at times, had none of these issues and didn’t force some absolutely wild hacks on their users. 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.

handy2000 3y ago
In an odd way, I miss the time when web dev was so quirky and unpredictable. It was a never-ending process of experimentation, puzzle solving, discovery, and, once you figure out a hacky way to do something as basic as a 3-column layout, very gratifying. I guess for me it was more of a creative outlet than just a job.
- amatecha 3y ago
  Yeah and hilariously, being able to navigate and accurately exploit the quirks of browsers could give your web development business a competitive edge. My colleagues and I had it as a source of pride to come up with a complete stack of tedious "hacks" to make even the most ambitious designs possible, in the mid-2000's. Our designers were able to basically make whatever they wanted (within reason) and have it work out. The excitement of getting some layout working that today would be trivial... ahh, fun times :) haha

wavemode 3y ago

Sometimes I can't tell if modern web developers are spoiled, by having CSS Grid and IE being dead. Or if we were spoiled back then, by not having to deal with the complexity of modern frameworks and build processes.

flagrant_taco 3y ago
There is something unique in web development connotation to the other fields I've worked in. The industry has made a habit of reinventing the wheel in every more complex ways. 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.
- jdmichal 3y ago
  The web is essentially UI development. And UI frameworks and libraries have always had lots of churn. Even ultra-conservative Java has had AWT, Swing, and a couple varieties of JavaFX. And then a few more developed by other groups like SWT. The expectations of both developers and users increase as computers advance, and older frameworks can't always keep up.
CM30 3y ago
Probably both, though I think it's probably easier nowadays simply because you don't technically need modern frameworks and build processes, and can create what would previously be complicated sites and apps with ease using modern CSS and JavaScript.

mseepgood 3y ago

11. Using JavaScript to build applications

kapitanjakc 3y ago

Have used all of them, and will use some of them even today

sexy_seedbox 3y ago
Comment conditionals still needed to render proper tables in email for different versions of Outlook.

Semaphor 3y ago

I missed out on 1. because it was before my time, and I never needed 7., everything else I used at some point :D 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.

bdr 3y ago

One more to add from the early days: widespread use of  , the character entity for a non-breaking space. 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.

cantSpellSober 3y ago

SWFObject deserves a shoutout if sIFR is getting one. It was a JS library required just to get a cross-browser Flash player.

moribvndvs 3y ago

The moment I saw filter:progid:DXImageTransform I had an urge to call my therapist. So much trauma in one article.

101008 3y ago

Great article. I love everything related to the "old internet" (as you can see from my nostalgic point of view on some of my comments in Hacker News). Is there a good book about that particular time? I'd like to read a very good book about not just browsing the internet back then, but doing some kind of development (especially frontend, which I think it was the one that required most hacks and changed more than the backend in a few years)-

deleted 3y ago

[deleted]

jszymborski 3y ago

My favourite was using iFrames as a type of ersatz AJAX. Click a link, make the target the iframe, an voila! No page refresh, and the iFrame gives visual feedback.

schemescape 3y ago
I recently did sort of the inverse as an experiment: put a button in a frame to avoid reloading the main page: https://log.schemescape.com/posts/web-development/interactive-browser-app-without-js-2.html https://log.schemescape.com/posts/web-development/interactiv...

sproketboy 3y ago

[dead]

notbeuller 3y ago

I will often slap a dumb 3 line http server into my long running tools / applications for debugging - provide ReSTful channel to toggle debug flags. I “learned” html in the 90s and don’t use it otherwise, so <table> figures prominently in generating the structure of the page.

seanwilson 3y ago

This is why "HTML/CSS/JS isn't supposed to be used like that" is a weak argument. Browser features we take for granted now grew from developers popularising hacks that pushed the boundaries (usually in ways people complained about at the time) until official support was gradually built into the browser e.g. AJAX, responsive layouts, complex/flex/grid layouts, reactivity with proxies, JavaScript modules, desktop-like web UIs in general. TypeScript, JSX, Tailwind and bundlers come to mind of current trends that get some strong negative reactions but could become more mainstream later.

j45 3y ago

Seeing the title of the article, it was surprising surprised to not use the use of xmlhttprequest to invent the category of JavaScript driven apps, by Microsoft no less. 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. https://en.m.wikipedia.org/wiki/Ajax_(programming) https://en.m.wikipedia.org/wiki/Ajax_(programming)

myfonj 3y ago

No mention about HTC? .fancy { behavior: url("path/to/pie_files/PIE.htc"); } (It is still online [1]! And even on GitHub [2]!!) [1] http://css3pie.com/ http://css3pie.com/ [2] https://github.com/lojjic/PIE https://github.com/lojjic/PIE

Klonoar 3y ago
I have a stupid fondness for the level of hacks that we all collectively developed for IE6-9. One of my favorites was tricking IE6/7 into supporting Base64-encoded images in CSS by essentially triggering Outlook rules. They're 100% things that shouldn't exist, mind you.
- myfonj 3y ago
  Hm, cannot recall this one, but it reminded me of another magical trigger: to make HTML file loaded from local file (or CD-ROM, or whatever non-Internet) one had to pretend that given file was "Saved from (Internet)" with magical HTML comment preambule such as \r\n in order to make that file execute JavaScript (or maybe even load other resources from relative locations). 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 https://superuser.com/a/484428/50036 [2] https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537628(v=vs.85)?redirectedfrom=MSDN https://learn.microsoft.com/en-us/previous-versions/windows/...

Gabrys1 3y ago

https://www.youtube.com/watch?v=9sKppwrLBY8 https://www.youtube.com/watch?v=9sKppwrLBY8 Firefox ad from that era

hypertexthero 3y ago

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/ https://alistapart.com/article/slidingdoors/

Kwpolska 3y ago

Did anyone actually use Chrome Frame? Were there so many users that were so used to the IE interface and were unwilling to accept Chrome itself?

adamzochowski 3y ago
Plenty corporates had IE only/first policy. This meant everything intranet had to work on IE. A website developed for chrome was allowed to request chrome frame, but it had to undo itself for any external links when linking to other intranet sites (plenty active-x / silverlight). I wish there was an option to specify per website domain which browser to use.
- nikhilgk 3y ago
  And more importantly, as I recall, you could install chrome frame without admin access.

hollowturtle 3y ago

The one I still remember: Clearfix

sexy_seedbox 3y ago
This one needs an ayahuasca trip to heal the trauma.

cratermoon 3y ago

Notice how many of these hacks grew out of what was called the "pixel perfectionist" crowd in those days. The Web and HTML came out of a community that valued logically, semantically organized content. Communication was largely about words and ideas. If the result looked about as exciting as an academic paper, well, that was fine. The adoption by a community concerned with communicating with design, using color, layout, and other visual elements, came with a host of ways to squeeze it out of the limited capabilities of HTML. 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)

1vuio0pswjnm7 3y ago

Actual HTML title: "10 Weird HTML Hacks That Shaped The Internet" 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.

zlg_codes 3y ago

The amount of conflation between "the Internet" and "the Web" is way too high in here. It is the most popular protocol, but it is not the only protocol.

timbit42 3y ago
The amount of conflation between "The Web" and "HTTP" is way too high in here. "The Web" is not a protocol.
- zlg_codes 3y ago
  This trick doesn't work because you cannot talk about the Web without also talking about HTTP, the protocol that runs it. 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.

Klonoar 3y ago

I developed extensively for IE6 back in the day and never actually used that underscore hack - found it too confusing in codebases. We'd use the asterisk html selector path instead. IE7 had a similar hack for marking off CSS using some first-child trickery, e.g: * html #myDiv { /* IE6 stuff */ } *:first-child + html #myDiv { /* IE7 stuff */ } One could also trick IE6/7 into loading base64-encoded images in CSS by shoving in an mhtml boundary in CSS files. Also love that the article called out sIFR - cannot believe I'd actually forgotten about that one.

alberth 3y ago

IE for Mac was great. 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 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 https://daringfireball.net/linked/2020/01/06/grewel-ie-5-mac

amatecha 3y ago
Yeah, even from your first line I knew you must be talking about IE 5. It was the most fully-featured browser at the time and was fast. I remember Netscape Navigator crashing a lot, by comparison. >_<

blahyawnblah 3y ago

And PNGs for rounded corners. I can't remember what the term was when you took two images overlayed to make a rounded button that was resizable. Sliding door buttons? And transparent gifs to set a width without being seen.

Tagbert 3y ago
It might have been this: 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/ https://alistapart.com/article/slidingdoors/ "

ryoshu 3y ago

I still have a physical copy of, "Creating Killer Web Sites." That era of web dev was hacky and super fun.

makach 3y ago

<blink> don't forget

technion 3y ago

That conditional commenting is still amazingly prevalent. It's strange how many websites "don't support ie" but have three sets of conditions for different ie versions.

deleted 3y ago

[deleted]

vwcx 3y ago

Anyone remember DHTML chromeless windows? http://www.dynamicdrive.com/dynamicindex8/chromeless.htm http://www.dynamicdrive.com/dynamicindex8/chromeless.htm

dlrush 3y ago

Tldr: XHR

alex-moon 3y ago

They were dark days. This is why I get agitated about browsers that don't properly support CSS standards in the present day, most notably Safari mobile. Garbage browser that should be illegal.