Hacker News new | past | comments | ask | show | jobs | submit login
Old CSS, New CSS (eev.ee)
1018 points by culturedsystems 55 days ago | hide | past | web | favorite | 244 comments



Wow, that took me back.

Small nitpick, XHTML does live on in one important place: epub, which is the most commonly used file type for ebooks.

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.

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.

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.


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

That's backwards. Relying on software to assign random meaning to broken input is never a good solution to anything, neither for static documents nor for dynamically generated documents. It's just that HTML allows you to get away with it, kindof (i.e., no scary error messages, just subtle breakage everywhere), which is why people built templating systems that didn't bother with correctness either. If the web had been XHTML from the beginning, templating systems would have been built in a way that makes it hard to generate broken documents in the first place, because the error messages would have created the incentive to do so, thus avoiding a lot of the subtle breakage as well.


Agreed. Nobody is complaining that JavaScript terminate parsing on syntax errors. Because it has been like that from the beginning.

The problem is introducing stricter rules which breaks existing content.


That also assuming that the browser war never happened.

The web is (was?) essentially a libertarian wild dream of unregulated evolution for a long time.

The question is not if we took a suboptimal path in this evolution, but if there was a better way to define the process.

This is not to argue anything, if the web had started with XHTML maybe it would be better or maybe it would be worse.


I think that had XHTML prevailed we would have had Web Components much sooner.


I used to write XHTML and found that if you server it with the mime type application/xhtml+xml then the browser will validate it, which can be a problem if you can't reliably output valid XML


> Too bad there was some talk of epub switching to HTML5, though it's unlikely future revisions of epub will ever see wide adoption.

Why? Because of switching to HTML5 (if that indeed happens) or any future revision at all won't see wide adoption? If the latter then what's the reason according to you? Amazon's dominance?


Because new epub versions have the Python 3 problem. Every reading system out there supports epub 2, and epub 3, the latest revision, still has poor support years later because it's not a big enough improvement to bother with and too much software is written for epub 2. Plus epub has had a rocky past few years as the standard has been bumped around various committees.


interesting.

one question though, how is xpath more powerful than css for selecting elements?


Even xpath 1 let's you filter elements based on arbitrary sub-paths, so e.g. you can do stuff like //div[@data-marker]/span[i] - and match spans containing an i that are themselves the direct descendants of a div with a marker attribute. In css matching on content is in general impossible, with a few small exceptions like :empty, which is of course much less powerful. XPath will also let you select based on text-content, and select non-elements like text-nodes too. Also, it's likely much easier to make slow xpath selectors than css; oh well (but although I wrote quite a few XPath selectors back in the day, this was never a practical issue for me, which is perhaps also because unlike css - which is often used in huge quantities to match entire documents - XPath is more typically used to find just a few critical elements. I've never worked much with XPath 2, but it's even further in the direction of a kind of SQL for tree structures. By no means was XPath without weird limitations, make no mistake; but it's definitely more practical than css for finding specific elements in a messy tree especially when you don't control that tree.

X-anything nowaways is pretty unfashionable, but in principle XPath would still be useful today; bit of a shame it's falling by the wayside without decent replacement. I actively try to avoid it nowadays even though I'm comfortable with it; usually the upsides XPath has aren't worth (to me) the lack of familiarity for other devs, and the potential lack of support in various platforms compared to css.

But on the sidetrack the parent comment mentions: In any case, I can unequivocally, whole-heartedly, so-verbosely-you-hopefully-understand-my-conviction on the matter support the notion that the html5 syntax was a disaster of the highest order. XHtml is a much, much better idea, and unfortunately it died. Anybody who's ever seriously tried to compose html safely and understands all the weird gotchas that can occur (oh that wrapper p tag got auto closed because the tooltip span contained an icon and those were implemented as divs? yay!), not to mention a syntax with so many exceptions essentially 0% of web devs actually know them all is just asking for XSS issues. You think your client-side SPA can do server-side prerendering reliable? Ah, but only if it sticks to valid html: including nesting rules, because although it will work without error clientside - the dom-tree is really just a tree without as many weird exceptions - lots of DOM trees simply have no html serialization. Doesn't exist.

To be perfectly clear: I don't think XHtml was particalarly brilliant; HTML5 is simply particularly atrocious.

If I could switch to a more comprehensible data-encoding format I would, in a hearbeat - especially since nobody writes raw html anyhow nowaways, it's all frameworks and libraries. And then you pray they correctly implement the html5 spec, because if they don't... it's not something you want to reimplement yourself.


Did XHTML ever allow styling with XPath, or is it just used for jQuery-style element selection? My uneducated impression was that for performance reasons browser devs were rejecting even more restricted backwards-lookup and nesting selectors for styling.

I've encountered some uses of XPath to validate the semantics of XML data models (this kind of thing still has mindshare in some places - network devices for instance https://tools.ietf.org/html/rfc7950#section-7.21.5 ) and I've come to the conclusion that wanting XPath is usually a danger sign. It's helpful for manipulating content you can't control, but that leads to people designing interfaces and models that are too difficult to work with downstream. In document display settings that manifests as a content vs. presentation mentality where you have to write byzantine queries to wrestle data into reasonable output. In configuration use cases I've seen it lead to interfaces that claim way more general edit operations than the implementation can actually pull off, as people struggle to specify XPath-based constraints to make it tractable. It's much better if at all possible to have some kind of scripted layer to do transformations than to try to manipulate a general presentable-cum-semantic data tree.

On the XHTML vs HTML5 side, React at least does a good job warning you if you're trying to render something that violates DOM nesting (out of necessity as much as anything, since it will need to operate on the generated tree).


You could use XPath in an XSLT stylesheet to style XHTML.


In fact, you pretty much had to...


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.

Are there any more articles like this? I'd read them all day.


A good history of where modern JavaScript comes from (from old school to webpack and babel).

https://medium.com/the-node-js-collection/modern-javascript-...

Helped me understand the how and why of webpack.


When people shit on modern web development, it's hard to explain how responsible tools like webpack and babel have been in pushing the web forward so we can actually build what we can imagine.

There is SO MUCH we simply don't think about anymore because the tools do the thinking for us, like CSS prefixing mentioned in the article. I can't remember the last time I manually prefixed a CSS property, I've used tools that have autoprefixing built in since 2015. I just don't think about it anymore. Nor the differences between ES3, ES5, ES2015, ES2017 or a host of other things.

This means my brain is free to spend that energy in other places and that's absolutely a godsend for productivity.


People shit on modern web development exactly because these kludges are necessary in the first place. Imagine if that time and effort was spent on something more productive instead.


The problem is that those tools, while solving some problems in the development stage, create a host of other problems at other points in time: first install, building, deployment, maintenance...


My uncle likes to call it “fictional nonfiction,” saying that the human brain is better at following stories than piles of facts.


At St. John's College (back in the 90's anyways), we called this "teaching science and math historically" (as opposed to teaching the history of science and math -- which tends to emphasize dates and names).

By telling the story of science and math, we gained the context of who did what for what reasons. Which unlocked my understanding of science and math in a way that textbooks never did.


Hence why The Phoenix Project was much better at teaching the basic concepts of DevOps than any DevOps how-to book or technical reference.


I've got this problem when teaching people things. When I need to explain a single feature, I feel it helps to give historical context for why things are the way they are, but it's hard to concisely give just the relevant context in that case - because there's just so much of it. Getting the whole picture in one go might be a lot better.

(Interestingly, the historical context could also pre-empt much of the criticism of "the modern web", or lamenting about not every browser building on Chromium.)


I have a slightly wild theory. I think that it has to do with my brain seeing the textbook topic as one item on a massive stack of items to study. Kind of like how much easier I find it to do a chore when it's not literally an infinifely looking sized amount of work ahead.


The original thesis is very instructive.

https://www.wiumlie.no/2006/phd/


CSS today is so good that I now design websites in CSS and just present a website to the client.

If you use grids and flex you can rearrange content very quick if the customer wants to move it.

My workflow is now much faster. Great for the client, great for me.

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.


The thing that baffles me is that even in the present day, (some) graphic designers are still trying to create web sites using a different medium than the end product. Sure, back in 2005 that was the norm, but it’s like nothing has changed for these folks. The platform has evolved so dramatically, but the “Photoshop workflow” stays the same.


CSS is horrible for quick mockup iteration.

While Grid(I love named areas!) and Flexbox have improved layout, the initial layout process is still rougher than it should be.

Pretty much every other design/layout/ui creation tool has all kind of helpers which pure CSS lacks.

I am talking about basic guidelines, rulers etc that every tool/layout under the sun (QT, WPF, WinForms, Photoshop, Illustrator even Powerpoint, you name it the basic alignment rearrangement functions are a mouseclick away.

Sure the created document might be a huge mess, but that is not the point when you are messing around.

If you start messing around with CSS you enter a world of pain unless you know the properties down cold.

Client asks how would that picture look here and that menu shrunk a bit down here?

With CSS it would take much longer to iterate than with any other tool.

With something like WPF I do not need to know XAML by heart to quickly create some reasonable working mockups for a .net application.

This explains why it is much easier to do creative mockups in another tool (I see designers who use Adobe XD quite a bit now).

When one is in the creative stage CSS is a huge hindrance.


It depends on what a "mockup" is. In sane web development, done by a web designer with HTML and CSS (not by a graphic designer with Photoshop), a mockup is a web page with mock content and incomplete stylesheets.


I remember the days of “pixel perfect HTML” where clueless clients wanted the resulting web page to look exactly like the Photoshop mockup down to the pixel.


I spent so many work hours devoted to getting elements lined up pixel-perfect to match jpegs from graphic design, and then struggling to get them to also match up in the other browsers. During some periods you even had to fight between versions of IE. Man, those were some expensive pixels!


In my experience, designing websites in the browser limits the imagination and thus the design ends up being easy to build in HTML/CSS, but it isn't very interesting. Using design tools makes it easier to get the look you want - and from there you figure out how to put it together in the browser. It's an extra step, but my own designs are much better when created this way.


Same. I find it faster to make a couple of quick rough mockups on Illustrator or even paper and then do the final design in HTML.

15-20 years ago we used to make the final design of every page in Photoshop or Freehand and show that to the client. Now I just make the front page in HTML so that we can agree on the look&feel.

Another benefit of working directly on HTML is that you can start proofing some of your design decisions. Many problems are still not obvious in Illustrator/Sketch/whatever. Specially for the client. In my current project I envisioned a featured to open a form on a modal but when I started doing it looked nice but it just felt wrong. The form worked a lot better in a tooltip-like element.


>CSS today is so good that I now design websites in CSS

There are so many things missing that people are forced to use Javascript and a div-mess to implement widgets. Ex elements like dropdowns, numeric input, the small scrollbar that appears for elements, I am wondering if browser makes are just ignoring css and focusing on JS.(I admit flexbox and grid layout is cool)


Why do you want to style dropdowns or scrollbars? Using those "designer" dropdowns is a pain on mobile, while simple dropdowns just use native controls and work flawlessly. Same about scrollbars, I hate websites that interfere with my scrolling.


This is not true at all, modern component based projects like https://element.eleme.io/ work perfectly find in mobile and you only load the CSS/HTML/JS per component so it doesnt need to load tons of JS just to render simple form or UI components from Vue or React.


I literally watched the select dropdown jitter all over the place scrolling on mobile. It's bad. The native controls don't require a library and are fine. And all of the event handling and HTML5 form validation works as expected.


Is not me, the designers want it, we need to ask them why? But in my case it was a complex application that is not intended to be used from a phone.


> Is not me, the designers want it, we need to ask them why?

Yes: JS widgets have a usability impact and especially accessibility, which is a legal requirement in much of the world. Some libraries have good accessibility stories but given that this is an ongoing cost which will need to be supported it’s always important to link it to an actual requirement (e.g. searchable drop downs) to justify the expense.


There is ARIA, but ARIA isn't quite good enough. I also suggested a <widget> element, which allows you to define your own widgets and provide an implementation in HTML and JavaScript to be used if the browser cannot use it directly (if the widget is implemented directly (subject to user configuration), then the stuff inside the <widget> block is ignored or used in an implementation-defined way; if the widget is not implemented, then the <widget> is treated the same as a <span>, and any <script>, <noscript>, etc it contains is interpreted normally). (For selections from lists, there is already <input> anyways, and the browser can include whatever special features they want; they may be disabled in application mode if needed.)


ARIA is always improving but really the problem is that most developers either don’t use it or don’t test their usage. This is not a problem of needing new technology as much as companies skimping until they get sued.


Brings up a good point—the importance of understanding the requirements/levers of other groups in order to get things done. In this case, pointing out the law.

Back when IE was ascendant and Mozilla was fading, another group in my corp developed a web app lousy with proprietary Microsoft code (ActiveX?). All it took for the CEO to shoot it down was me mentioning that a fifth of our customers wouldn’t be able to give us money. He would’ve done the same for the Mac users at 5%, given the option between a functional and a flashy site. (Seriously, with a Clippy-like assistant!)


> it was a complex application that is not intended to be used from a phone

I've heard that so many times and eagerly await the day they want a mobile version for same number of times.


Styled scrollbars just might happen https://drafts.csswg.org/css-scrollbars-1/


for example, when you need a special drop-down doing something that the vainilla version can't. For example a drop-down showing a hierarchy


The moment people start building their own numeric input they create all kinds of problems on different devices.

I think people should just accept the browser default.

And dropdowns can easily be created CSS only.

To me the use of JS to get the design right always smells like bad practice.


I know, it is not the developers at fault , we the devs pushed against this, we tried to get the native input to look as much as possible as the design but it was not accepted, we had no choice but to use JS and get teh pixel perfect design.


I’ve been in Product Management positions and always advocate for native controls over custom. Too many times I’ve seen custom stuff take way longer to build and make work responsively. Native might not be pixel-perfect to a design but that’s okay; design is how it works, not how it looks.


> we had no choice but to use JS and get teh pixel perfect design

There was another choice: sacrifice the pixel perfect design and accept the native inputs.


By "we" I mean the developers, we can explain the upsides and downsides of the solutions but we don't decide the look and feel.


Agreed. There remains many moments where I'm questioning why I have to use JavaScript. A css concept exists to accomplish what I'm doing, but it's incomplete. It is also often blind to stuff where css could be useful like basic-auth.


You can make smooth scrolling, dropdown etc.. With just CSS


What I mean for dropdowns is to get css properties to style the "select" element and not have to use div inside divs. For scrollbars I do not remember now the issue we had to use JS, I think on some browser you could not get the exact colors/look the designers wanted.

Edit: as an example in other GUI frameworks you are also limited but you can extend the widget with a custom render function and you can paint the widget as you want, you get the look you want but you keep the native widget behavior like the correct events and keyboard handling where with the nested DIVs you get most of the time missing or broken functionality, even Google could not properly implement the Search and dropdown in YouTube, it gets stuck open sometimes and you have to reload the page.


What is needed is better way for the user (rather than the document author) to customize it. For example, I may want to disable smooth scrolling, or make other adjustments.


For me it still fails short of what I am capable to do with native toolkit layout managers, and grids come from WPF by the way.

HTML + CSS to me, even after all these years still feels like programmer art when starting from a piece of paper, while with native coding it just flows, maybe I am tainted by my game/demoscene grassroots.


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

I also remember that centering any block element within another block element with CSS was somewhat absurd. The trick was to do something like

.centered { margin-left: auto; margin-right: auto; }

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.

That's the only other painful thing I vividly remember behind what Eevee posted.

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

Wonderful post! Would love to see more.


That’s still how I do horizontal centering, FWIW. I guess I have some catching up to do.


Take a look at FlexBox - if you've been around the CSS layout block a few times you might find yourself going "finally - they figured it out!"


Flex has indeed figured it out, I use it for everything now and rarely touch margin: auto unless I'm being lazy or there's a very simple usecase.

But that said Flex still very much classic CSS: the awkward naming schemes, the excessive options for each parameter, the mixing of different options available, etc... it's still very much CSS in all it's quirky dirtiness.

CSS Grids kind of shocked me that they weren't entirely convoluted.

Maybe it's the design-by-committee stuff but even as CSS has gotten better: it still took way too long and it's still very weird. Maybe like JS this will slowly no longer become true, but I'm kind of happy I grew up without Flex/modern CSS because I'm unafraid of that quirkiness.


JustifyContents and AlignItems are like inserting an old USB key: I always get it backwards the first time and have to switch it over.


On that note, did you know there's also justify-items and align-content?


Thanks; I shall. In fact, I’ve been putting it off for lack of browser support, but I suppose that is no longer a valid excuse.


For the benefit of any reader who may not be aware, s/I remember all of the pain points he did/I remember all of the pain points she did/


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!

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


> because beautiful was impossible

Definitely for forms, but for static content? Our design sensibilities weren't there--we were too busy adding animated gifs and blink--but the tech was. Look at a post on Medium. A lot of that style could have been done in 1998.


I'm somewhat ashamed to admit I still write HTML the same way I did in the 90's.

i.e. In notepad using <table> to control the layout.

I never learnt CSS at some-point I should learn it but I work with html so infrequently I never bothered. My "notepad html" is more than enough for anything I've had to do in last two decades.

edit. One thing I do miss is being able to hit view source in browser and understand everything, nowadays all javascript.


God, I'm in the same boat. I don't do web programming, so my web design skills stagnated around the end of the Space Jam Era documented here. I don't work with CSS often enough to memorize its inconsistencies (why is text colored with "color" but backgrounds are colored with "background-color"?), so it's mostly a baffling series of frustrated googling whenever I'm unlucky enough to work with it.

I'm glad you all like it, though.


> (Native buttons also went out of vogue, for some reason.)

Ah, I still remember native buttons being introduced. 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.)

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.


Browsers still lose my 15 minutes of typing when something goes bad and I'm returning back to page. I understand that it's usually caused by websites forbidding caching, so browsers have to reload page, but they still could save that data somewhere and present me an option to restore it, at least for some time. Something like auto-complete.


> Browsers still lose my 15 minutes of typing when something goes bad

It’s not browsers but poorly-designed JavaScript: if you use a standard HTML form all browsers will preserve state and resubmit it for you on retries. The problem is when you have JavaScript altering the form but not reimplementing the standard state management, and since few sites do more than casual testing these days it tends to require a number of user reports before that’s prioritized since it’s so easy for lazy developers to blame the error condition rather than accept that handling it is part of the job.


It's a specific case of a larger symptom: when you implement something in JavaScript that replaces default browser functionality, you also have to re-implement all of the related error handling, edge cases, etc., and can't rely on the work that has already been put into making things work correctly in the browser. But in practice, JavaScript developers never fully re-implement the features that they replace, which means all that work on the browser has gone to waste.


For this reason I attempt to develop a habit to type every comment or post in vim first. This loss of typed text happens maybe once in 2-3 months but it's extremely annoying.


Exactly! Sometimes I wonder why browsers have no hook for launching external editor for textbox input, like EDITOR env in shell? This could also solve the need for RichTextbox with JS based controls for bold/italic/bullets etc.


Yes, I would want to have more user commands for many things such as:

- External editor for textbox input

- Save form data to a local disk file

- Recall form data from a disk file (on the same or a different webpage than it was saved from)

- Replace scripts in the document

- Document/application mode switch

- Disable rich text editing

- Specify a remote filename when uploading files using forms


> - Replace scripts in the document

You might be interested in https://decentraleyes.org/


That would be good for replacing jQuery and so on, but I would want to be able to replace inline scripts too sometimes. (And also some sites have their own copy of jQuery; I will still want to substitute my own if their own copy is otherwise unmodified.)


Back before Firefox Quantum, the Vimperator addon had this. Mine was setup to launch gvim from any (focused) text field when I hit ctrl+i.

I consider this the biggest loss in that transition.


With Tridactyl for Firefox it is still possible to launch external editor by typing Ctrl-I in textboxes and text inputs.


I wouldn’t fancy random ad networks throwing arbitrary payloads at my editor. Which I’m sure they would at least try.


Tridactyl for Firefox can launch external editor (vim) by typing Ctrl-I in textboxes and text inputs.


One of the few add-ons I've installed that's been worth its weight in gold has been "Form History Control (II)", which passively saves every comment as I type it. It's saved me no end of grief in these scenarios.


For a moment browsers were pretty good at this because pages were still static enough that browsers could keep track of elements over page reload. But now that everything is dynamically generated by a few megabytes of opaque javascript? It's a much trickier problem. But "luckily" there's LocalStorage these days so website devs can just go and reimplement the feature…


Oh, and to add to the author's list of upcoming CSS changes: apparently some people are very excited about Houdini: https://developer.mozilla.org/en-US/docs/Web/Houdini


Interesting. And it looks like it's already supported in Chrome and Edge.

https://caniuse.com/#search=houdini


Oh man, I think there's so much low hanging fruit left. Browser native components for autocomplete, infinite scroll, an actual rich text editor, scroll / zoom controls, etc. would all be very welcome.


Absolutely, in terms of things that should be added to the standards and then supported by browsers, there's plenty left to do. I was mainly referring to things browsers could add on their own accord, though, like spell check, or a password manager.

(Just though of another example: Picture in Picture video playback, like Firefox recently added and Chrome and Safari have technically already had for a while.)


Sadly the native dialog element was axed.


>> (Native buttons also went out of vogue, for some reason.)

They’re back now for mobile with react and ionic. In a weird what comes around way.


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.

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.

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.

I switched to Tailwind CSS months ago. Adam Wathan is the hero we deserve.

[1] https://www.wiumlie.no/2006/phd/css.pdf


Can you elaborate on what problem tailwind is solving? My first impression is that it looks like a set of custom built css classes.


No, not custom at all. Quite the opposite - it's a well-curated set of standard classes. It's the focus on utility-based composition of style that sets Tailwind apart. For me the problem being solved is maintainability, recognising that CSS is tremendously brittle with regard to the application it serves and the context in which it is evaluated.

Probably best to read https://adamwathan.me/css-utility-classes-and-separation-of-... which does a much better job of explaining the motivations, and the conceptual journey of its creator, than I ever could.

Many folks (not all, but many, I'd even venture to say ... most) have a four step reaction to Tailwind:

1. That is the stupidest webdev idea I ever heard, and I've heard a lot. // 2. Fine, I'm trying it because everyone else keeps prompting me to and/or its creator seems competent. // 3. This is weird but actually quite helpful and totally not what I expected. // 4. You have ruined me for any other CSS framework and I never want to use anything else.

All CSS is crap. Tailwind is (in my experience and opinion) the least crap and most productive approach yet.


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 also created websites back in the day with spacer gifs and framesets, but I don't understand this qoute.

People still create their own website. There are still a lot of forums with a wide range of topics.

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.


People still create their own website.

Far fewer than back in the late 90s and early 2000s. I think the reason for that is because people didn't actually want to make websites - they wanted to have a voice on the internet and making a website was pretty much the only way to do that. Now if you want to publish your ideas about reef tanks you could learn to write HTML and CSS and make a website, or you could write on Twitter, or you could make YouTube videos, or you could do a podcast, etc, etc.

There are fewer people making websites but there are more people publishing something on the web.

I think when the web industry's old guard lament the fact that no one really builds homepages any more it's genuine and heartfelt because they (and I include myself in this) really enjoyed looking at what people made. For me to see what interesting and exciting ideas people have that they can do with HTML and CSS is much harder now. There's Glitch and Codepen and stuff, but I feel like I'm still missing loads of the best stuff.


And it was great. It was a barrier of entry for speech. You could do it, it was free, but you had to apply some effort, you had to have something to say.

Now the Web is flooded with morons on Twitter who's opinion is just the noise you have to filter through.


Don’t over romanticize it. There were a lot of experiments, goofiness, and bad information in those days, too. It was also nearly impossible to find anything.


There was a beautiful period before Google was reverse bought by DoubleClick where you could find damn near anything. Searching was a solved problem by Inktomi and AltaVista but PageRank solved sorting search results (for a while).

Before Google AltaVista's search was pretty good at filtering out the meta tag spam that bubbled up in other search engines.


> beautiful period before Google was reverse bought by DoubleClick

That's a beautiful way to put it. I remember those days and thing is, much of Google's reputation was built during those days, a coattail they're still coasting on today.

In those days I remember you could find anything at all in just a moment. "Information snacking" was a thing, versus "being given the answer we think you want (or the one that will make us the most money)".

"Reverse bought by DoubleClick", will have to remember that..


"Reverse bought by DoubleClick" is the best description of Google's degeneration that I've ever seen.


InfoSeek was also good while it was around.


Experiments and goofiness were (part of) what made it good, and bad information is far, far worse now.


There are a lot of intelligent, interesting people who would be filtered out by the barrier of learning HTML.


There were many sites written in Word. Also intelligent people don't tend to create SPA blogs with angular and webpak.


It doesn't have to be raw HTML. Even creating a blog post with existing hosted tools is a barrier enough.


My personal take on this, I think this quote stems largely from the fact that a lot of people funnel into their social media walled garden without second thoughts, and simply publish there. Without it, you have to self publish on what we know as a website. (Just think of it, what would you do if you have something to say but there are no social media behemoths)

Further, your audience was potentially everyone with a browser. You had full reign in your creativity, your means to style your page to your like was limitless, even if that meant 20 rotating gifs that took forever to load on dial up.

All the social media bubbles score low on self expression- I personally feel this is what is missed most on those platforms. Yes, even if some were butt ugly. :)


Myspace scored big on self expression and eventually that's what's killed it.

What's missing from the so called social medias is genuineness, when you have your own website you don't usually post crap there (well some ppl do shit where they eat but that's an exception).


Making your own website today is still possible, but the chances of people actually reading your content is really low unless you invest a lot of time into SEO. A large part of the browsing population never leaves their walled garden and only reads what's posted there. So unless you get crossposted into their filterbubble, your content is just invisible.


Well in the old days this was way worse. Maybe you could get your site on a link list or in a link ring but that was all.


On the flip side, I was personally always venturing out into the Wild Wild Web to find new, interesting content. It had this sense of adventure that is pretty much gone nowadays


Link rings were great because often it stayed on topic, if you visited an aquarium blog you would usually encounter other aquarium sites.


> People still create their own website

It's not the same. Those who create their own websites today do so by buying a domain and some equally cheap webspace.

Back then this was not an option, and we were glad to have sites like Geocities.

Many of us were kids or teens with no access to credit cards or PayPal, and the web was really new. The animated "under construction" GIFs served a purpose, and the topic we posted on felt different. As if it was for fun, saying "I'm here", instead of "Look at what a pro I am, what knowledge I have, book my time".


I don't agree. There are a ton of people on Wordpress, Blogspot and other free places.

Geocities was also a walled garden, but the scale was totally different. It is amazing how many people are online today.


And beside the blog platforms, lots of people making fully custom sites on services like https://neocities.org/


AOL and CompuServe were huge walled gardens


Wild. I remember every single one of those milestones.

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.

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


Wow, I wish I'd had this article a few years ago.

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.

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.

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.


> There's no one place to learn the whole thing, which I suppose is expected.

Mozilla Developer Network is what I highly recommend. It covers so much of the web they even have Django web development guides / tutorials. Ages back Microsoft contributed their own docs to MDN as well (not to be confused with MSDN, which is Microsoft specific and possibly where that spec came from).


You still can write static HTML/CSS and host it on your machine (if you have accessible IP) or some cheap VPN. It'll work just fine. It's possible to write a very complex websites nowadays with those technologies. But not every website have to be complex.


Yeah but you don't get eyeballs with that anymore unless you have something really unique.

When the web was new you could get a lot of hits with static content. It is not so easy to do that now.


How many hits is a lot?

Not a lot of people had computers with Internet back then. So sure, you can’t captivate the same percentage of the entire World Wide Web - but why would you expect that to be a reasonable assumption?

Sure, in a world where the web was a couple million nerds you’d expect your content to be a bit more visible.

But the web is measured in billions of users now.

I would also suggest that writing content just to ensure that people read it is looking at it the wrong way. That’s a shallow popularity contest. If the production of that content doesn’t bring you satisfaction on its own then it doesn’t matter whether you have 1 view or a million, it’s not making you happy.


Humans seek social interaction, whether that's in person or online, or by doing good or bad things to get attention. I would not call that a popularity contest because it happens with everything. A popularity contest would be one extreme end of a range of behavior.

If you are producing content for yourself and it makes you happy then you don't need to put it in public view. The whole point of the internet is to interact, share your work and see others' work.


Indeed in web 2.0 content is not a concern, the point is number of likes.


That is the point I was refuting. In the current web, communication is still the overarching motivator. Content still matters, and the usability of your site is a factor in communicability. So, if someone's site is easier to navigate and more frequently updated due to the use of updated technology, that may be a factor when people decide where to spend their time.


How many megabytes of JS frameworks do you need to get eyeballs on your blog posts then?


Gigabyte page will get some eyeballs or sure.


Unless you have something unique to offer, you likely should not publish.


Which doesn't mean you HAVE to do it this way. The new generation of devs is, well, young, and they have yet to learn that complexity will come back after their asses with no mercy.

Us old farts, we learned that complexity is our biggest enemy.


That assumes that all of this complexity was done for complexity’s sake.

There’s a big difference between a web developer who has to serve a few thousand people 10 webpages with someone who has to serve millions of customers in hundreds of countries with dozens of languages.

I suspect that a lot of the “old farts” you reference in this way aren’t old farts at all, but are just folks who haven’t been full time web developers in years, or have never done web development for a large web-based SaaS company.

I don’t think it’s about physical age at all.


And how many developers do you think out there have to "serve millions of customers in hundreds of countries with dozens of languages"?

Most of them solve problems they don't have.

Ask anyone to build a Hello World in Javascript, and it will be a Node app with 30,000 packages, using 7 AWS services, with a full CI/CD pipeline, running on Amazon Fargate.

Because this Hello World is going to be BIG, it has to be webscale.


> Ask anyone to build a Hello World in Javascript, and it will be a Node app with 30,000 packages, using 7 AWS services, with a full CI/CD pipeline, running on Amazon Fargate.

I don't think the mentality that drives this is "is has to be web scale" or "it will be BIG". The justifications I've heard are more along the lines of "now I don't have to manage a server". Except... you either have to learn/know how to configure something else and tell it how to manage a server, or just copy/paste/trust that you're telling service X how to configure/manage the server that you eventually need.

Or... lambda - because somehow every single problem people think of can just be broken down to chaining AWS lambdas together. I've run in to that mindset a couple of times, and it's just so foreign to me. I can't say it's "wrong" as I've not done it 'for real' (beyond playing with hello world stuff), but it typically ignores a lot of stuff I've come to embrace (like testing).


> Ask anyone to build a Hello World in Javascript, and it will be a Node app with 30,000 packages, using 7 AWS services, with a full CI/CD pipeline, running on Amazon Fargate.

I think you're just exaggerating to make a point of outrage. I don't think anyone would write a Hello World that way.

There is nothing to be outraged about.


You are confusing outrage with sarcasm ;)

Also, how many companies do you think decided to go serverless and then discovered after the fact that they can't serve a live website because of Lambda's spin-up delay, coming up with a patchwork of cache bandaid that made things just worse?

But it's new, and it's cool, and in the language of us Mandalorians - THIS IS THE WAY.


I see.

I will also elaborate further:

> And how many developers do you think out there have to "serve millions of customers in hundreds of countries with dozens of languages"?

I actually think the answer to that question is most. Most web developers are working for mid-size to large companies, especially when you consider the wider variety of non-SV companies like financial firms that might not be "tech companies."

I think the people that would have written simple web pages that don't require that complexity essentially don't exist in the business world, and probably not so much in the hobbyist world, either. Smaller companies would be better off using code-less website builders and such. And if all these web developers wanted to spend so time making simple blogs and web pages I wonder why they choose services like Medium to do it for them.

As far as small companies that actually write web software as their primary form of business, I would venture a guess that in terms of quantity, compared to FAANG, Chase, Bank of America, Nationwide, State Farm, Progressive, etc, there probably aren't that many.

I would argue this about your point on Lambdas:

A business outgrowing abstractions is okay. That means the business has grown to the point where it can hire enough developers to maintain a more sophisticated infrastructure. The fact that AWS has so many abstractions is a reason why so many startups have been able to exist in the first place.

I've never used Lambdas for a web application, and I do see that Amazon advertises that as a use case, but it's also the second to last one on their list. I think it's far better suited to doing things like responding to AWS CloudWatch Events or triggering other asynchronous actions.


I'm pretty sure any decent web designer can write simple pages, see https://text.npr.org/


Use create-react-app to setup an empty project. It will have 36,000 dependencies.


Exactly.


Things aren't done for complexity's sake, but yet most of the web (and software generally) is way more complex than it needs to be. See the 30 million line problem for a good deep dive: https://www.youtube.com/watch?v=kZRE7HIO3vk

It tends to be related to physical age because the problems of complexity manifest with the passing of time. The more projects you work on from start through long term maintenance, the more you personally experience the issues inherent in complexity. Over time your appreciation for simplicity increases and you get a better sense of tradeoffs and long term costs.


>That assumes that all of this complexity was done for complexity’s sake.

Or they just don't know any better.

https://www.youtube.com/watch?v=o9pEzgHorH0


If you want to go back further, the best article on how the web and styling worked circa 1993 is this http://contemporary-home-computing.org/prof-dr-style/

And alternate articles

http://art.teleportacia.org/observation/vernacular/

http://contemporary-home-computing.org/vernacular-web-2/


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 (http://minid.net/2019/04/07/the-css-utilitarian-methodology/) and I don't want to look back anymore (http://minid.net/2019/08/12/in-defense-of-functional-css/).


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

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.

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.

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? :)


> 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? :)

Happened to me last year, with the steadily-increasing annoyance at how complicated it's gotten at work - just to see how easy/difficult it would be to put together that blog I'd been thinking about for years, without using a single frontend framework.

(That blog isn't live, it got put aside for other projects in case anyone was wondering. But yeah, particularly with grid-template-area, it's not difficult at all anymore to do whatever layout you want. Even got some limited component-y goodness with inclusion templates and direct-descendant selectors.)


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.


> remember when Microsoft could only ship Trident updates as part of huge Windows updates?!

They had the ability to parallel install all along, eliminating the need for updates as part of huge Windows updates: https://news.ycombinator.com/item?id=20495979


The link inside the link says that clicking on the favorites menu would cause the browser to crash. Not exactly ship-able.


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

This is an amazing reference. K. A. Applegate's post-series Animorphs site, hirac delest, 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: http://www.hiracdelest.com/database/index_database.htm

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:

  <body text="#CCCCCC" link="#33CCFF" vlink="#33CCFF" onload="MM_preloadImages('../images/menu-v2/over_thumb/about.jpg')">
(hirac delest is from the period when I first started learning html/css/js, within a year or two)


MM_preload...

That's Dreamweaver I think, steaming pile of crap its pages were.

Edit: actually, it was a very good IDE for writing html at the time I used it; it's wysiwyg led people to make pages that were a terrible mess under the covers though.


> MM_preload...

Yep, just trigger some trauma for me there. Had long since buried that.

>That's Dreamweaver I think, steaming pile of crap its pages were.

... seriously, this post brought up things I had long intentionally forgotten. I was one of those poor fools that fella for the WYSIWYGness of DreamWeaver


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.


Let's not forget Firefox and Gecko still exist, though.


Yes, but it seems like Firefox is only keeping up, they are playing defensive, while they really ought to attack weakness in Chromium or give users a reason to switch. Right now Chrome is slightly more efficient, slightly better feature coverage, etc.' One reason why I still use Mobile Opera is because it automatically adjust the text when I zoom in... A bold move for Mozilla would be to cut down expenses to a 3 year buffer, cut their funding from Google and force themselves to become independent.


Reason to switch?

Trust.

Mozilla cf Google.


95% of Mozilla money comes from Google. Last time I checked Firefox still sends everything you type into the address field to Google. So if you do not trust Google, how can you trust Mozilla!?


> We have committees writing new "standards" faster then anyone can implement them.

This isn't really true; the committees writing the standards are primarily formed of implementers, and the implementers aren't paying anyone to write a standard they aren't going to implement in the near future. That said, the early idea-incubation committees too often end up with just a single implementer involved.


I would like to add Bootstrap to the list, including other CSS libraries/frameworks.

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.

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 https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid renders incorrectly in chrome 79, the current stable release. (It looks fine on Canary and in Safari.) The more things change...


For me, the grid version is broken, I open dev tools and it fixes itself, I close dev tools and it remains fixed, I refresh the page and it remains fixed, I close and reopen the tab and it remains fixed, I close the tab and open it again from the link and it's broken again.

Just plain haunted.


I think the most important step was Firebug: the first good browser dev toolbar.

http://positioniseverything.net/explorer.html saved me hours of debug multiple times when IE6 was the main browser around.


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

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.

And as the last section demonstrates, you can now write front end code that is so simple and yet flexible, maintainable and (mostly) portable.

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?


For a simply objective look at the different positions of MS than and Apple now, there are three significant points that spring to my mind:

1. Apple do not have anything like the monopoly stronghold on the phone & tablet market that MS had on desktop and laptop PCs.

2. They are not (that I know of) directly using the market power that they do have to try completely block competitors. While there is no doubt some coercion going on (if you give iDevices pride of place in your store we may give you preference over others when supplies are low) there isn't the outright "stock Android and we won't give you any iDevices to sell" equivalent to MS's behaviour with regard to DRDOS/BeOS/OS2/... in the 90s.

3. They are not being deceptive about their position, like MS quietly but very deliberately scuppering DRDOS during Win3.1 development (https://en.wikipedia.org/wiki/AARD_code). Apple-land is officially a walled garden where MS were at least pretending to operate openly in a shared market.

More subjectively, whether these objective differences are enough to justify the relevant authorities not going after Apple is a matter of opinion and/or complex legal wrangling concerning the interpretation of monopoly/anti-competition/other legislation and its wording.


Are we not supposed to use server-side includes anymore? I never stopped. I find them quite useful, and they use virtually no resources on the server.


Web technologies are barbarianism.

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.

Won't drop any shade on TBL for this mess though. V1.0 seemed more focused on information access than design.


Page layout for print is very different than for screen. It was designers with a print background which insisted on writing "Best viewed on a 640x480 monitor with 24bit color. Please maximize your browser window for the optimal experience" on websites back in day.

Actually I think the designers of CSS consulted traditional print too much, by adding confusing and useless stuff like "pt" measurements.


Print people at the time had no idea what 640x480x24 even means. That was all IT dorks and amateur self-styled "designers." (i.e. barbarians)

The Bringhurst book was published 1992. Web tech learned zero from that book.


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.

[0]: https://teamfortress.com/


You guys ever saw the Captain Marvel promo site, made in the style of the 90s web? It's f---ing brilliant.

https://www.marvel.com/captainmarvel/


That is great, but how ridiculous is it that this microsite is made with 100% js dom manipulation instead of just static html? I wonder if they did that because using static html would have potentially not rendered the way they intended on all the current devices...


that would only make it more authentic


the webpages in the 90s and early 00s are so random. Today almost every goddamn webpage looks like something derived from bootstrap.


Does anyone remember messing around with ‘chromeless windows’?

A misleading phrase that means something completely different to a newer generation...


I remember making a page that when browsed to, would pop up an all-black full-screen "chromeless window" and start slowly typing green text Matrix-style. Very neat trick in those early-teens years...


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

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.

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?

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

I remember a magazine I had that was full of crazy flash sites. I recently fondly remembered Fly Guy (still works in Firefox!)

https://web.archive.org/web/20050317021634/http://www.trevor...



What about spacer.gif?!


A bit of explanation: In the old days of table layouts, the width attribute of a dt element would declare the maximum width of that element only. In order to provide a minimum width, you'd insert a transparent 1x1px image and give it the appropriate width. This could be used both for flexible (min, max) layouts and rigid designs, where everything would be positioned by a system of pole-like transparent images, much like in a Dali painting.

Note on both frames and tables: Right from the beginning, you could declare width and height units in HTML both in percent and in absolute units, like "px". However, Netscape browsers used internally only percents! Meaning, if you you intended to span the entire width of a document, Netscape would convert your absolute units to percent and from this back to px (using integer math for speed) and you would end up with some rounding error depending on the width of the browser window, which could add up to a deviation of 4px or so. Which was, of course, a constant pain, when you intended to line up elements, like a logo on top and a structure with a navigation and a main content area in different colors below.


Wow.

I was doing Web development in 1999 for a year or too

I never got that deep.

But I recall clearly adopting a left/right column for static content and center column for the CGI output custom stuff.

Choose that format because IIRC it was easy to implement in straight HTML

I looked at CSS then, but it did not make sense business wise when we could make vanilla HTML work.

It was a different world


>No, Firefox really got a foothold because it had tabs. IE 6 did not have tabs;

I don't think this is right. Firefox got a major foothold because it blocked ads.

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.


Before switching to Firefox, I previously used Internet Explorer, which had no tabs support. In an era of frequent pop-ups, your desktop ended being a mess.

It was annoying, but that is what I was used to. Then Firefox came and allowed to have all your browsing in the same window, without polluting the taskbar.

In my case, I clearly remember that tabs were the reason to switch into Firefox.


I had similar reasons with one more anecdote: my first internet access was through a Nokia 2G phone and I « dialed » to connect in Windows XP. Thank you Nokia PC Suite (which I could only get from the Byte magazine CDs and DVDs).

But boy, IE6 was painful! And i needed tabs to open pages and do something else while I wait for pages to load. That made me switch to Firefox after Opera. It wasn’t that long ago, I think 2007 sorts?

In my job now, I still try to make sure people can access my pages with as little resources as needed.


> Internet Explorer, which had no tabs support. In an era of frequent pop-ups, your desktop ended being a mess.

This is how I remember it: Firefox didn't block popups on its own, but they were constrained to another tab instead of a new window, which alone was a huge bonus.


You mean pop-up windows. Actually ad-blocking came a bit later.


CSS has gotten great, but I feel things have gone in opposite direction for general web dev.

Careful cascading styles and clean and readable markup have gone straight out the window.


Like with all things, it depends!

Since HTML5’s introduction of a bunch of new elements, I like to think markup has the potential to be a lot more readable and semantic now than it ever did when I first starting making websites in the 90s, even/especially given such a broad new range of element types.


Really? Tools like React and Angular have made my life much easier when it comes to styling and readable markup.


I think image maps are due for a comeback. There has to be a creative and beneficial use for this, right? That shit seemed like magic in 1998.


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.

Hello Chrome. This is why I use Firefox.

> The W3C’s solution was XML, because their solution to fucking everything in the early 2000s was XML.

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.

* A two-column layout http://dionidium.com/design/leftbar/leftbar.html

* A valid XHTML 1.1 version of that layout http://dionidium.com/design/leftbar/xhtml11/

* Two-column layout with equal heights http://dionidium.com/design/column/

* My old "default styles" stylesheet http://dionidium.com/design/default.css

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>italics</i> and <u>underline</u>. I think I like markdown better but I digress.

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

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.


If you ever feel nostalgic for using that beautiful thing which was IE3 or NN3 or pre-JS Opera, they're all welcome on my forum website.


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.


It was called DreamWeaver.


Now I remember why Flash websites were popular in the early 2000s. I am glad css caught up!


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

Nice write up. I also learned a couple of things I didn't know about grids too!


Ah, <marquee>, the Sonic to <blink>'s Mario.


I wonder what is the energy needs of css vs js vs rendering on morden browsers


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.

Get off my lawn. :)


>>> [<br />] might lead you to believe that <script/> is an empty <script> tag — but in HTML, it definitely is not!

? What is "<script/>"?


The script tag can't have an ending slash, so the browser turns it into a regular script tag. Since there's no closing one, the rest of the website becomes the content of that script element.


Hacker News "webmaster" stopped in 90's.


And it is better that way!


What's hilarious, it's mostly the same "old" css that you still have to work today for html emails :(


What a great trip down memory lane...


Then there is new new CSS with styled-components where you don't need classes anymore!


> especially now that flexbox and grid have solved all our problems.

That is certainly not the case. Look at https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid

Large gaps of empty space. A manual layout would pack the thumbnails much more densely.


That's because the author intentionally added gaps via "grid-gap:10px" and changed the alignment via "align-items:baseline". You could easily undo either of these styles to achieve the desired effect.


https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-f... can do dense packing in a grid. Supported by all browsers except IE.


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


Html tables are not all comparable to newspaper columns. Newspaper-style columns (where text flows from the from bottom of one column to the top of the next column) can be achieved with the "columns" property in CSS.

But newspaper-style columns are not as useful on the web, since it is really annoying if the columns are longer then the screen and you have to scroll up and down. In that respect the web is very different than newspaper layouts where the dimensions are fixed.

As for <grid>, layout should be specified in CSS rather than through the html element, which is why we have "display: table", "display: grid" etc. in CSS, which should do what you want.


Agreed. But tables in the HTML was a mess to maintain, and does not readily translate to a phone screen (which is well over half of Internet usage these days). What I did, in the early 2010s, was use “display: table” CSS for the elements in up to date browsers, then use some ugly “<!--[if lt IE 8]><TABLE><![endif]-->” for Internet Explorer 6 and 7.



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.


such a good read. was always wondering how things went back in the 90s with internet and web development in particular.

seems like an internet wild west


> Still, it was better than tables.

Well, no. Nothing wrong at all with tables.


Yes and no, but there is some confusion due to terminology.

There are HTML tables, created with the <table> tag, and then there are CSS layout tables created with the "display:table" property. Neither are inherently good or bad, it is just a question of when they are appropriate.

The problem with tables back in the day was that browsers didn't support "display:table", so the only way to get a grid-like layout was to use the <table>-tag. In cases when the content wasn't semantically a table, you had a dilemma. Either you would have to abuse the <table> tag thereby hurting accessibility, or you would have to use CSS floats and hacks to achieve the desired grid-like effect. Neither was really desirable.

Today we have "display:table", but we also have flexbox and grid which is are much more powerful, so the use of tables-for-layout are mostly irrelevant.


> browsers didn't support "display:table"

Internet Explorer on Windows was the singular offender. ISTR that other ones with at least 0.7% market share were implementing the display property correctly.

A desirable solution was to just paper over the bugs and other shortcomings with Javascript: https://github.com/seancoyne/ie7-js

That way one could simply write standard compliant code and not waste any time with hacks and float work-arounds.


"Internet Explorer on Windows was"... 90% plus of the market


The trick I did was “<!--[if lt IE 8]><table><![endif]-->” for older IE and “display: table” for anything standards compliant.


> In cases when the content wasn't semantically a table, you had a dilemma.

If you have text that's laid out with a fixed number of columns and a dynamic number of rows, than what you have is exactly a table.

Absolutely no reason to get your underwear in a bunch in a rage of hipster semantic pseudo-purity just because it's not literally a table of Excel figures.


HTML Tables does not support a dynamic number of rows. But you can do that with CSS grid.


Unless you depend on screen reader support. Table-based layout (as this is what you are quoting) is inaccessible.


Netscape ran on Unix platforms.. buggy or not its support was vastly more important than IE on an ethical level.


I used NN3 and 4 back in the day (and still do, kinda, Firefox is still my main browser), but man, writing CSS for Netscape was a nightmare!

I still remember that weird bug that forced everyone to create a single, empty, invisible DIV at the beginning of the page if you wanted to set absolute positions for the other DIVs in the page.

In Javascript land, we all had our little script to detect the browser and do things like finding the element you wanted (IIRC, only IE had find by id).

All in all, I miss the carefulness webdevs had to have at the time (I remember uglifying my files by hand to make everything weight less than 24KB, which was the self-imposed limit we had at the dotcom I worked at) but, in general, I don't miss those days at all.


NN didn't actually do CSS, it did JSS (Javascript Style Sheets, something Netscape hoped would fly) with an added translation layer. That meant that you could only style an element through its hierarchy (since there was no equivalent of IE's document.all in Netscape's DOM). $DEITY help you if you were trying to do a hybrid tables/CSS thing, especially with nested tables.


Nice article. Surprised it does not mention the acid tests https://www.acidtests.org/


Acid1 and Acid2 are kinda legacy. Acid1 is so old that IE6 passes it. Acid2 was mentioned in an article.

Acid3 is kinda... controversial. Its tests were kinda nonsensical and hardly useful. Some of things it asked for (in particular about SVG fonts) were implemented minimally, just to pass the tests.

A lot of Acid3 tests involved checking the error code for weird edge cases specifically, stuff like testing whether `document.createElementNS(null, "d:iv")` throws `NamespaceError` (browsers these days throw `InvalidCharacterError`). This isn't really useful for web developers, because actual websites won't test for edge cases like this. It's to the point where Servo (a web engine written in Rust) outright asks the user to report a bug in Servo if unpaired surrogates in DOM are used on a page that isn't Acid3. So far all the bug reports were for Acid3.


> A lot of Acid3 tests involved checking the error code for weird edge cases specifically

If the browsers implement these specification details correctly you don’t have to have all these workarounds that make web development incredibly tedious and unpredictable. That’s the point.

Of course it’s impossible to predict outright which things are going to be used and which things aren’t. Otherwise you could just not create a specification for the useless parts.


Not really. A lot of DOM tests involve try/catch, and checking whether the exceptions are precisely right. Web applications tend to not intentionally throw exceptions.

Acid3 also tested some other things like SVG fonts. SVG fonts specification didn't make any sense, browsers were against implementing an under-defined specification not designed to interact with HTML and Acid3 test authors likely realized this, because a lot of tests were like: a web browser can do this or this or this, because we have no idea what the specification requires. You really don't want a standard like this in a web browser. Web browsers implemented bare minimum sufficient for Acid3, but literally nothing else. WOFF won over SVG fonts in the end as it was a better specification, but Acid3 insisted on SVG fonts. Case in point about issues with SVG fonts: what should `<iframe>` in an SVG font do? The specification won't tell you.

Some other tests also feel weird. For instance, test 86 is literally checking whether `new Date().setMilliseconds()` returns `NaN`. I mean, that doesn't seem very useful to me, why would anyone pass no arguments to a setter intentionally? Official ECMAScript Conformance Test Suite would be a better place for this test.

What I think is fine in Acid3 is CSS selector tests, the rest is honestly kinda pointless. I have the same issue with Acid2, the CSS tests in it were fine, but Acid2 test also decided to include an SGML comments test for who knows what reason. Web browser vendors were against this test, but had to support it anyway. SGML comment test broke real world web sites without providing any real value. Thankfully, this test is now gone from Acid2.

I hope Acid4 won't happen or if it will, it will ONLY have CSS tests and won't test anything else. Although, it likely won't (thankfully) due to The Web Standards Project's closure.


These days, both Firefox and Chrome get 97/100 out of Acid3 (Edge gets 98/100) so there is a small number of tests in that old page which do not make sense for the web of the 2020s.

The point of Acid2 was to make it visible just how awful IE6’s CSS support was.


I'm surprised you didn't notice the acid tests being mentioned repeatedly from about half-way through the article!


Interestingly enough, it seems my Chrome 80 on Safari does not fully pass neither ACID2 nor ACID3 test.


Firefox 72 had just failed them both :-\ Chrome 79 passed Acid2, but scored 97/100 in acid3, just like firefox.


ACID3 is impossible to score 100/100 while respecting modern standards: https://news.ycombinator.com/item?id=15256890

ACID2 looks fine to me in Firefox 72, but then, it doesn't show a score, so...


Acid2 fails in a strict sense if 1 image pixel != 1 device pixel != 1 CSS pixel.

For Acid3 there's http://wpt.live/acid/acid3/test.html which reflects what browsers are actually targetting (and is what runs in everyone's CI system): see https://github.com/web-platform-tests/wpt/commits/master/aci... for the history.


I was running ACID2 on a retina display and it is very distorted around the eyes in Firefox. Chrome did render it ok.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: