Wow, that took me back.<p>Small nitpick, XHTML does live on in one important place: epub, which is the most commonly used file type for ebooks.<p>I do a lot of epub work at Standard Ebooks, and at first I hated XHTML for the exact reason the article describes: A single tiny error makes the entire document invalid and it can be hard to spot it and recover. Also, namespaces were (and still are) a massive pain for little to no gain.<p>But over time I've come to really appreciate XHTML, again for that exact same reason. It forces you to write correct XML, and there is no possible ambiguity or multiple ways of representing a tag like there is in HTML5. `<br/>` will always be `<br/>`, not maybe `<br>` or `<br/>` or even `<br></br>`. An XHTML document from someone else will be both human-readable (after pretty-printing) and easily machine parseable. You also get xpath, which is a way of selecting elements akin to CSS but even more powerful.<p>Ultimately XHMTL is better suited to epub's use case, which is static documents that are written once and not dynamically generated by templating languages or libraries. Too bad there was some talk of epub switching to HTML5, though it's unlikely future revisions of epub will ever see wide adoption.
I feel like I learn a lot more about CSS from articles like these as opposed to books because it puts CSS features into context with the problems they were meant to solve. The historical context helps a lot, too. The way that I've tried to learn CSS in the past was essentially a random collection of tricks.<p>Are there any more articles like this? I'd read them all day.
CSS today is so good that I now design websites in CSS and just present a website to the client.<p>If you use grids and flex you can rearrange content very quick if the customer wants to move it.<p>My workflow is now much faster. Great for the client, great for me.<p>The only design tool I use in the beginning is a pen and peace of paper to get some ideas of where I want to go. But after that it's all HTML + CSS.
Man, this brings me back. I started working on the web a couple years after Eevee did. I remember all of the pain points he did. (One note: when I was learning in 2001-2002, most of the tutorials and books still used <FONT>, <CENTER>, <BIG>, etc., even though CSS was around. I remember using CSS was extremely painful because of IE5, which was the default on my Win98 machine, so I didn't bother really trying till hearing about Firefox - I mean Phoenix.)<p>I also remember that centering any block element within another block element with CSS was somewhat absurd. The trick was to do something like<p>.centered {
margin-left: auto;
margin-right: auto;
}<p>And of course, there was no way to vertically center an element within another without hacks and HTML detritus that served no semantic purpose. It was almost worse than the table-based layouts.<p>That's the only other painful thing I vividly remember behind what Eevee posted.<p>Flexbox and Grid have made things a lot better, but I still run into weird inconsistencies and exceptions frequently. (The latest involved trying to set `max-height` on a `resize: vertical` element, and I couldn't get it to work without hacks or JavaScript. Chrome implements resizing by overriding the width or height on an element's style attribute.)<p>Wonderful post! Would love to see more.
Retro HTML was great! You never had to figure out why your CSS inexplicably wasn't working, nobody complained when things didn't look beautiful, because beautiful was impossible. Bring it back!<p>LOL, I particularly love the breakdown of Space Jam. Oddly enough, I very briefly considered breaking out an old-school imagemap, like, a month ago. I was trying to get one of those lightbox-style image galleries to work, including a clickable area on the side of each image to get to the next one, and I couldn't figure out how to do all the weird border-padding-whatever-else unholy CSS witchcraft to get the clickable areas aligned correctly with the images. Imagemaps may actually work better than the hacked-together solution I eventually came up with...
> (Native buttons also went out of vogue, for some reason.)<p>Ah, I still remember native buttons being <i>introduced</i>. Good times, back when browsers could introduce features that seem so obvious in retrospect - such as spell check in text boxes. Feels like all the low-hanging fruit has been picked by now. (Or is it? Firefox's integrating a password manager feels pretty similar.)<p>Great overview, though. I feel like my history with the web has been almost the same as the author's, and this brought back a lot of good and not-so-good memories.
Two decades ago I was overjoyed to discover that Scheme was finally going to have a useful application beyond illustrating SICP and writing koans to amuse myself, because DSSSL was on the cusp of evolving into the last document styling language anyone would ever need.<p>Unfortunately following an incident with a broken Lisp machine, a liquid lunch, and an unlicensed particle accelerator, I became trapped in a parallel universe where the HTML ERB anointed CSS by mistake during a drunken night out in Oslo.<p>The fundamental concept of CSS (best revealed by H.W.Lie's thesis IMO[1]) was to create a rich and versatile and non-Turing-complete set of structural selectors in lieu of DSSSL's recursive logic, and to allow styles to overlay one another; two design choices that only by the application of gallons of irony can explain why most web pages are composed of a bunch of nested DIV elements with hashed IDs and overloaded semantic class attributes, and everyone compiles their assets into a static file.<p>I switched to Tailwind CSS months ago. Adam Wathan is the hero we deserve.<p>[1] <a href="https://www.wiumlie.no/2006/phd/css.pdf" rel="nofollow">https://www.wiumlie.no/2006/phd/css.pdf</a>
<i>Damn, I miss those days. There were no big walled gardens, no Twitter or Facebook. If you had anything to say to anyone, you had to put together your own website. It was amazing.</i><p>I also created websites back in the day with spacer gifs and framesets, but I don't understand this qoute.<p>People still create their own website. There are still a lot of forums with a wide range of topics.<p>For example: not so long ago I was into reef tanks. There are a ton of forums and websites about that subject. Maybe even more than in the old days.
Wow, I wish I'd had this article a few years ago.<p>Back in the 90s I wrote my high school's first website. We even got a scan of a picture of the school done in way too high resolution. It was a massive pain to get running, given my buddy and I were in our mid teens and the web was moving fast. Everything was a bunch of different hand crafted pages of tags, served from a machine sitting in the school. But basically we figured out how to do it by reading one or two pages about it.<p>I left school and eventually did a lot of financial coding, which was mainly backend stuff plus a small amount of desktop GUIs, or very very basic web pages.<p>Not until a few years ago did I have another look at the web, and it had of course changed enormously. It seems nowadays everything is a tool that compiles into something else. There's a zillion frameworks in js, there's webassembly, there's a bunch of things that you use to build the CSS. The page itself seems to be a load of divs, many tags from the old days are archaic now, only seen on old university sites. Sites themselves are served from a datacenter, and not from one machine. Static content doesn't even need to come from the same place. Security and privacy is a thing. There's no one place to learn the whole thing, which I suppose is expected.
Wild. I remember every single one of those milestones.<p>Back in 04 I wrote some forum software with XmlHttpRequest back before gmail was released. The everybody thought I was a fucking wizard. Then gmail came out and it was like oh you did that gmail thing. Good times.<p>But yeah, the long slow death of IE 6, crazy stuff. God, it feels like it's been a decade since I've had to seriously think about cross browser bugs, versus that eating up half my development time. Evert time I curse mobile Safari these days I remind myself of IE 6 and calm down pretty quick ;)
If you want to go back further, the best article on how the web and styling worked circa 1993 is this <a href="http://contemporary-home-computing.org/prof-dr-style/" rel="nofollow">http://contemporary-home-computing.org/prof-dr-style/</a><p>And alternate articles<p><a href="http://art.teleportacia.org/observation/vernacular/" rel="nofollow">http://art.teleportacia.org/observation/vernacular/</a><p><a href="http://contemporary-home-computing.org/vernacular-web-2/" rel="nofollow">http://contemporary-home-computing.org/vernacular-web-2/</a>
With CSS-Grid now you can do practically most of the things without using dozens of CSS properties. I barely use Flex, even. But it's late for current CSS techniques, because I'm abduced to functional CSS (<a href="http://minid.net/2019/04/07/the-css-utilitarian-methodology/" rel="nofollow">http://minid.net/2019/04/07/the-css-utilitarian-methodology/</a>) and I don't want to look back anymore (<a href="http://minid.net/2019/08/12/in-defense-of-functional-css/" rel="nofollow">http://minid.net/2019/08/12/in-defense-of-functional-css/</a>).
I've been away from front-end web development for a while now. I've been doing steadily less of it over the years, and by now it's probably been 4 years since I've touched it at all. As memory serves, the last project was gulp, typescript, SASS, and still jQuery.<p>When the front-end work began to fork off into it's own real separate independent discipline, likely when we really achieved separation of the UI from the backend, things started to change and I ended up having to make a choice. With front-end build tools, CSS processing libraries, larger frameworks like React/Angular, I ended up on the back-end side of the equation - data platforms, databases, web services, application logic, integrations, infrastructure, etc.<p>Seeing this reminded me of how much fun front-end development was, even with having to deal with the annoying quirks of HTML, CSS, JS and all the browsers.<p>Did anybody else, like me, suddenly have a real hankering to sit down and break out all the new HTML/CSS/JS toys and start playing? :)
I still maintain that the only (not the "best", but the only) way to really learn something - even something technical - is to understand its history and understand how it got to be the way it is. Everything starts out about as simple as you expect it would be - probably the way you or I or anybody else would put it together if we didn't have any guidelines to work off of, and ends up being refined a bit at a time as more surprises are discovered. The problem is, what you end up with - like modern CSS - just don't make a lot of sense unless you understand what problems the current versions were refined to work around.
I loved reading this. My first job was mainly spent fixing IE box model problems (remember when Microsoft could only ship Trident updates as part of huge Windows updates?!). I now have an allergic reaction to any cross-site compatibility problems, because -- in a rare exception to the rule -- it genuinely WAS harder in my day, and we managed it.
> Half the Web was fan portals about Animorphs, with inexplicable splash pages warning you that their site worked best if you had a 640×480 screen.<p>This is an amazing reference. K. A. Applegate's post-series Animorphs site, <i>hirac delest</i>, is still online - and was originally written around this era (series ended in 2001, so its last update, if not creation, is a bit later). It has some newer stuff like CSS, but definitely check out the source here as well: <a href="http://www.hiracdelest.com/database/index_database.htm" rel="nofollow">http://www.hiracdelest.com/database/index_database.htm</a><p>Just with a quick scan on the main page, it has a mix of upper and lowercase tags, a "best views in" resolution, various font tags, and body tag similar to the SpaceJam one:<p><pre><code> <body text="#CCCCCC" link="#33CCFF" vlink="#33CCFF" onload="MM_preloadImages('../images/menu-v2/over_thumb/about.jpg')">
</code></pre>
(<i>hirac delest</i> is from the period when I first started learning html/css/js, within a year or two)
When the browser wars ended 15 years ago, not much have happened. The innovation has instead moved to userland, which achieve things with crazy hacks and meta/trans-compilation. We have committees writing new "standards" faster then anyone can implement them. But there is no natural selection. What browser engine are you going to switch to if you are unhappy with your current one? That said, most of the hard problems have already been solved, so writing vanilla html/css has been a breeze ever since things settled. And its also very stable.
I would like to add Bootstrap to the list, including other CSS libraries/frameworks.<p>In Bootstrap case, it included a grid, and other UI components (like a dropdown menu, and a modal dialog), but most importantly, it took care that the page worked the same in all major browsers of the time.<p>It helped me to prototype various projects over the years.
A friend of mine new to CSS was rebuilding the Google homepage using Flexbox. He asked me why Google uses <center> in their HTML, to which I told him it's most likely due to compatibility. Google is accessed by every web capable device and browser ever made. Yet, seeing <center> feels unacceptable.
The grid version, praised as the best version, on <a href="https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid" rel="nofollow">https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid</a> renders incorrectly in chrome 79, the current stable release. (It looks fine on Canary and in Safari.) The more things change...
I think the most important step was Firebug: the first good browser dev toolbar.<p><a href="http://positioniseverything.net/explorer.html" rel="nofollow">http://positioniseverything.net/explorer.html</a> saved me hours of debug multiple times when IE6 was the main browser around.
><i>No, Firefox really got a foothold because it had tabs. IE 6 did not have tabs;</i><p>I don't think this is right. Firefox got a major foothold because it blocked ads.<p>This was right as those ads that would open 4 new windows when you closed a previous window started showing up on the web and IE6 could not handle them. It would literally kill your browsing experience and sometimes blue screen your computer. Firefox was the first mainstream browser to block pop ups out of the box and it worked.
What a great article. It manages to simultaneously understand and debunk the nostalgia for the old web. I find it a little frustrating to hear people complain about how complicated the web has become and how simple things were back in the day. I mean, sure, there is a lot more complexity in certain areas, but that's because we've become significantly more ambitious and because we've pushed formerly pervasive complexity to the edges (and thus concentrated it to an extent). I'm so glad we don't have to resort to such hacks to get <i>rounded corners</i>.<p>One could argue that the old-school equivalent of NPM dependency hell was all the little snippets one had to copy and paste to get somewhat portable, somewhat usable sites. Except those dependencies were managed in an entirely ad hoc fashion, without any versioning or attribution.<p>And as the last section demonstrates, you can now write front end code that is so simple and yet flexible, maintainable and (mostly) portable.<p>I'll admit, I'm a pretty adamant CSS in JS supporter, but I still do use CSS at the end of the day. This post demonstrates that I still have a lot to learn about proper CSS, but more importantly, there's a gigantic amount that I no longer have to learn. Which is a testament to the progress made.
"unless for some reason you use an iPhone, which forbids other browser engines, which is far worse than anything Microsoft ever did, but we just kinda accept it for some reason." - yes...what is that reason? How is it even possible?
I miss those days. In theory we're supposed to separate presentation from content, but I've never seen anything non-trivial that doesn't have a lot of nested inexplicable divs to workaround some confusing behavior. Nested tables were an ugly hack, but it was at least clear how their layout worked (until you wanted height 100% of course).
About map/area: Some websites still use them, and really well too. The Team Fortress 2 website[0] uses them with the images at the top of the page to link each of the characters' description pages.<p>[0]: <a href="https://teamfortress.com/" rel="nofollow">https://teamfortress.com/</a>
You guys ever saw the Captain Marvel promo site, made in the style of the 90s web? It's f---ing brilliant.<p><a href="https://www.marvel.com/captainmarvel/" rel="nofollow">https://www.marvel.com/captainmarvel/</a>
Does anyone remember messing around with ‘chromeless windows’?<p>A misleading phrase that means something completely different to a newer generation...
> This was also the era of “web-safe colors” — a palette of 216 colors, where every channel was one of 00, 33, 66, 99, cc, or ff — which existed because some people still had 256-color monitors! The things we take for granted now, like 24-bit color.<p>Ah, I remember so many evolutions of my own websites using 336699 and 6699ff as the main colors. I still default to them even now when I just need _something_ that isn't default colors.<p>And wow, I forgot all about image maps! I used to stare in awe of the super artistic websites that used image maps heavily, as if I was witnessing the blackest of black magic.
Does anyone know if there's a "CSS Zen Garden" for Flash?<p>I heard about Flash games archival efforts a while ago, so I wonder what became of that (and if they included weird websites in their efforts too).<p>I remember a magazine I had that was full of crazy flash sites. I recently fondly remembered Fly Guy (still works in Firefox!)<p><a href="https://web.archive.org/web/20050317021634/http://www.trevorvanmeter.com/flyguy/" rel="nofollow">https://web.archive.org/web/20050317021634/http://www.trevor...</a>
CSS has gotten great, but I feel things have gone in opposite direction for general web dev.<p>Careful cascading styles and clean and readable markup have gone straight out the window.
Those gridded links remind me of the NeoPets site which would overlay a very busy "map" image with a tiny link, which would take you to a page with tons of powerful items. You used to be able to find the link with tab - the accessibility feature that barely highlighted / cycled through links. They simply removed that accessibility feature from their page.
> With IE 6’s dominance, it was as if the entire Web was frozen in time.<p>Hello Chrome. This is why I use Firefox.<p>> The W3C’s solution was XML, because their solution to fucking everything in the early 2000s was XML.<p>Ha! Man, got that right for sure. XML/JSX is one reason I just chose to avoid React Native in favor of Flutter, I’ve this avoided XML and would like to keep that streak going.
I still have some of my stuff from this era up on the web. The source has all kinds of CSS hacks called out.<p>* A two-column layout <a href="http://dionidium.com/design/leftbar/leftbar.html" rel="nofollow">http://dionidium.com/design/leftbar/leftbar.html</a><p>* A valid XHTML 1.1 version of that layout <a href="http://dionidium.com/design/leftbar/xhtml11/" rel="nofollow">http://dionidium.com/design/leftbar/xhtml11/</a><p>* Two-column layout with equal heights <a href="http://dionidium.com/design/column/" rel="nofollow">http://dionidium.com/design/column/</a><p>* My old "default styles" stylesheet <a href="http://dionidium.com/design/default.css" rel="nofollow">http://dionidium.com/design/default.css</a><p>This was a fun read!
IIRC, around the time of NCSA Mosaic, SGML was a developing standard for being able to do <b>bold</b> <i><i>italics</i></i> and <u>underline</u>. I think I like markdown better but I digress.<p>Speaking of shady SEO leeches, "Block pop-up windows" was a dominant preference. In my browser TenFourFox (Firefox), this "off by default" preference has moved to about:preferences > Content > Block pop-up windows. But, it doesn't matter because JavaScript has brought back the annoying popup. At least, popups are constrained within the browser window. uBlock Origin and uMatrix help to the point where some/many "modern" web pages render as a blank page.
Yeah this was a wonderful trip back in time for me too. I graduated high school in 1999 so I got to spend a couple teenage years playing around with HTML. I identify strongly with the "copy cool stuff from other teenagers' sites".<p>At my first web development job in the early 2000's I did some work with SGML. I forget now what I was specifying, but I remember finding it really interesting to be able to understand DTD's. It was like seeing the DNA of HTML. I also remember the miracles to productivity that were Firebug and jQuery!
This was a redeeming article for me. I remember volunteering with a friend to update our university department's website back in 1997. The budget for that was 0, so volunteering sophomores like us was the best they could get. The result was a more consistent, but still fugly website. I always thought that this was because we were completely clueless, but now I realize that fugly websites was the norm back then.
This is something. I remember times when inline styling was the thing. I have started my journey with web development. Then I left, busy with high school social life. Then, at the university I came back. And everything has changed: css files, some crazy JavaScript + jQuery effects etc. And now here we are: front-end development is heavily focused on JavaScript only, powered by frameworks. Time flies like crazy.
Great article! CSS has become so easy to work with after css flexbox and various css preprocessors became available. I remember how excited we were in 1995 when we discovered we could use ta les and gif spacers to achieve almost any kind of page layout for our clients. The web is a big stack of different hacks that slowly improves over the years. CSS has become wull continue to evolve for many years.
No, I don't miss those days. Making a website look the same in Opera/Mozilla/IE was an insane challenge. The approach I've found worked best was going Opera first, then adapt to Mozilla and IE, in that order. That way the amount of work was minimal. If you did go IE first, ... well, you wouldn't succeed anytime soon.
Considering how repetitive pre-CSS web development could be, I'm surprised a templating framework for compiling static HTML files didn't catch on. These days, we have things like Sass, but we also have CSS, so there isn't as big of a needs as there was in the late 90's.
CSS layout is, in more than one way, like string semantics in c++. A whole lot of innovation and a few gross missteps happened there, with the side effect of pushing everyone and also the language itself forward
Started doing HTML in 97 so this brings a lot of memories like using a lot of <marquee> and <blink> on my first Geocities site. :)<p>Nice write up. I also learned a couple of things I didn't know about grids too!
Cool article. I remember waiting for things like border-radius to have the prefixes removed too. Also, flexbox has turned my world upside down. Chrome had just come out when I was learning web dev.<p>Get off my lawn. :)
>>> [<br />] might lead you to believe that <script/> is an empty <script> tag — but in HTML, it definitely is not!<p>?
What is "<script/>"?
> especially now that flexbox and grid have solved all our problems.<p>That is certainly not the case. Look at <a href="https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid" rel="nofollow">https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid</a><p>Large gaps of empty space. A manual layout would pack the thumbnails much more densely.
for layout , i still think tables did it right, because web is primarily a grid like newspapers. wish we had a <grid> type of element with responsive rows and cols, if only to help with vertical alignment and those missing </div>s
such a good read. was always wondering how things went back in the 90s with internet and web development in particular.<p>seems like an internet wild west
Web technologies are barbarianism.<p>We've been laying out pages for hundreds of years. I suspect that this would be a much shorter article if Microsoft/Netscape/Opera/et.al had consulted with experts in that business first, rather than re-invent the entire process from first principles.<p>Won't drop any shade on TBL for this mess though. V1.0 seemed more focused on information access than design.
There should be less specialized languages. The web should work more on mediums like WASM so all supported languages share the same functionality. Everything CSS can define can be done in full programming languages.
Nice article. Surprised it does not mention the acid tests <a href="https://www.acidtests.org/" rel="nofollow">https://www.acidtests.org/</a>