There’s an aspect of this that is not readily apparent unless you were a web developer around the time this was created.
Before CSS, layouts were implemented by abusing table elements to create a grid. Then images were sliced up into sections, and each section was placed into the table. This has generally been remembered in the present day, however what seems to have been forgotten was the pushback against CSS.
There was a large number of web developers who were happy with the status quo and refused to learn CSS. One of the most persistent myths was that you couldn’t make anything look nice with CSS. Specifically, CSS was accused of only being able to create “boring, boxy” designs.
It wasn’t true at all. Even back in the early days of CSS, you could create great layouts. It was especially absurd because the approach favoured by the people saying this was literally abusing tables to create grids.
So along comes Dave Shea and points out that this is ridiculous, that CSS is capable of great designs, and puts the CSS Zen Garden up. A whole bunch of people contribute good-looking designs and make it impossible for people to claim that “CSS can only produce boring, boxy designs”. I think it’s amusing that he won the argument so conclusively that people forget it was even an argument in the first place.
Not to mention that early on, CSS was very lacking compared to today. We didn't even have `border-radius` until something like 2011! Consider that this relatively simple site design[1] takes about 420 lines of modern CSS[2]. And that's even using nesting, and liberal use of :has, which is a game changer. I remember having to restructure both my CSS and my HTML to achieve appearances which were otherwise impossible to create in the intuitive way, all because of inherent limitations to CSS at the time.
CSS rounded corners often looked a bit pixelated in the early days, and I remember doing image-based corners well after border-radius was widely supported.
By the time CSS rounded corners became really smooth a lot of designers had moved on to the boxy flat look, and square corners were fashionable again.
The reason we used tables was because getting things right in CSS in the early days across all of the browsers was a nightmare. An expensive nightmare. Which was fine if you were a well funded startup and could afford to rebuild your HTML regularly.
CSS at the time was still a leaky abstraction: in order to get things working, you had to include extraneous DIVs in the HTML code as anchors for the CSS rules.
The standard body has attempted to address this issue with pseudo-elements and pseudo-classes as well as other features I may not be aware of.
At least though, these extra DIVs weren't disrupting the page layout (eg. when disabling the CSS - something that was still possible at the time), which was beneficial for accessibility.
I kept our internal reporting site running for 3-4 years, I used CSS for layout.. it required regular maintenance but I had enough time to do it as my main job was as a Database Admin / Data Engineer (I'd have been called "devops engineer" nowadays as I had quite a broad set of responsibilities).
It always felt like a fun challenge. For me, it was a crucial part of my love of the web (and eventually, programming): the hackability and the way that there was no canonical correct way to solve a given problem. I miss those days.
I'm fuzzy on the timeline, but there was a time where the emerging CSS wasn't up to the task of creating more complex layouts (no flexbox, not to speak of the grid). CSS Zen Garden was just there to show what could be done by that point.
Things have certainly gotten easier, but even back then CSS had things like pseudo-elements and display: table-cell. The main problem was Internet Explorer 6 holding everybody back so floats were the main way of laying things out, and those go back to CSS 1 (1996).
> layouts were implemented by abusing table elements to create a grid.
Never understood what was actually wrong with it, apart from the whole "semantic html" yadda yadda that is meaningful for a small subset of applications.
The main problem with table layouts was that a site re-design meant rebuilding all the pages/templates from scratch, where as in theory CSS-based layouts meant changing just a single CSS file.
In practice though we always had to clean up and modify the HTML anyway. Sometimes just to remove all the old table cruft, but often adding and removing page elements. But pages did become cleaner and easier to maintain without table layouts, so it was a net improvement.
I don't remember pushback against CSS, but I do recall it was common for websites to dabble in CSS for styling fonts but still use table layouts. That's not pushback, just practicality.
If you wanted a solid predictable grid, you used table layouts. Particularly for tight and complex layouts. It wasn't uncommon for the navigation section to be a table layout even if other parts weren't. "Pixel perfect" was the name of the game. There emerged some pushback against the elimination of pixel-perfect design, not CSS.
They never caught on. Pixel GIFs were more common and predictable.
Until flexbox went mainstream in 2014, CSS float layouts were an exercise in balancing spinning plates. Empty divs didn't behave the same as divs containing content, and it sucked. We'll never get those hours back, but at least we were paid.
The idea that early CSS gave us wonderful "zen garden" layouts doesn't align with my experience. Then again, I was making information media sites not fun arty sites.
> Tables have existed as part of web standards since the HTML 3.2 standard (January 1997). The standard referenced an earlier RFC and was intended to be compliant with the table tags Netscape had already added to their browser, but this was their official addition to the HTML standard.
> The standard pointed out that tables could be used for tabular data or layout purposes, but cautioned that using them for layout would impact accessibility.
> In HTML 4 (April 1998), this warning was strengthened to "Tables should not be used purely as a means to layout document content", and we were pointed to the addition of CSS1 to help accommodate this. It was noted, however, that using deprecated features was expected to continue for a little while [heh] in order to support older browsers (browser listed above).
Semantically speaking, tables are supposed to contain tabular data, not to be used solely for their layout capabilities. That's why it's called an abuse.
An HTML table describes data that is related across multiple axes. A grid is a typical presentation for that data. That does not mean that creating a grid is the purpose of a table, and it doesn’t mean that any instance of a grid should be a table.
With all due respect to Dave, no. Please stop rewriting history without the relevant details.
CSS Zen Garden is a project that demonstrated that "progressive enhancement" and "semantic HTML" were nonsense. The only reason something like CSS Zen Garden worked at all is because all the markup is fixed, all the content is static, and the designs are not really responsive.
There is no CMS with a theming system that offers the flexibility that CSS Zen Garden claims one can have with a single .css, independent of the HTML. And this is because web developers were huffing the HTML/CSS gospel too much, fussing over not having extra divs in their source and what not, and celebrating "semantic HTML" without ever running their website through a screen reader.
The reason people stopped using table layout when they were doing CSS is because CSS1 did not support the _most common way of doing layout at the time_, and IE6 held the web hostage for a decade. This is a remarkable thing because it means everyone hopped on this bandwagon despite it being very obviously ill-informed and not ready for production. The CSS Zen Garden era designs can be expected to be full of float/clear tricks, requiring careful layout dependency between elements so everything gets pushed down just far enough. And it looks exactly like the table-based layouts they were replacing, except they will scale improperly or not at all.
The "status quo" attitude has also not vanished, as witnessed by CSS variables, custom properties and all the other epicycles that keep getting added on to CSS instead of actually just scrapping the parts that are dumb. None of these CSS experts have the vision or depth of experience to really know what it takes to implement what they spec, or what is even still relevant today and what isn't.
I actually implemented my own web layout system for Use.GPU from scratch, with flexbox and blackjack and hookers, and it's remarkable how much of HTML/CSS you don't need, and also, how many parts of it are still laughably inadequate (like text-ellipsis).
Dave did not win the argument. The people who celebrated CSS Zen Garden were cargo culters who confused a pretty design for a structurally sound layout, and who honestly just wanted something they could feel good about while dealing with pre-Firebug / pre-Dev Tools CSS development.
There is a really easy way to test this too, and I would challenge Dave to do it: translate all the content to another language. See how many of those beautiful CSS-only designs fall apart.
This sounds less like you want to correct something I have said that was inaccurate and more like you have a fundamental disagreement with the design of CSS.
Where in your comment did you mention the IE angle? The effect of lack of dev tools? Where did you mention the boondoggle of CSS2 tables and how everyone had to learn a whole new way of making floats behave? Where did you mention the laundry lists of named hacks that people used to get around browser parser differentials?
You didn't. You wrote the story as it is being told instead of how it happened.
I didn’t mention any of that because none of it is relevant to the point I was making about design.
> You wrote the story as it is being told instead of how it happened.
I did the opposite of that. I was very clearly and specifically recounting an aspect of the situation that is not being told today. When was the last time you heard somebody talk about how CSS could only create “boring, boxy” designs? It’s got to be about twenty years for me. It’s practically forgotten. Pointing that out was the whole purpose of my comment.
Both of your replies to me in this thread are about that chip on your shoulder, not about what I am saying. You should post your own thoughts as a top-level comment like I did, not get angry with me for not talking about what you want to talk about.
Pop quiz: make a 3 columns layout with fixed width header and sidebars, with a sticky footer at the bottom of the page, and which reaches full height even if the main content is shorter than the sidebar, or vice versa... even if the whole page is shorter than the browser. It must work in IE6-8.
Before CSS, layouts were implemented by abusing table elements to create a grid. Then images were sliced up into sections, and each section was placed into the table. This has generally been remembered in the present day, however what seems to have been forgotten was the pushback against CSS.
There was a large number of web developers who were happy with the status quo and refused to learn CSS. One of the most persistent myths was that you couldn’t make anything look nice with CSS. Specifically, CSS was accused of only being able to create “boring, boxy” designs.
It wasn’t true at all. Even back in the early days of CSS, you could create great layouts. It was especially absurd because the approach favoured by the people saying this was literally abusing tables to create grids.
So along comes Dave Shea and points out that this is ridiculous, that CSS is capable of great designs, and puts the CSS Zen Garden up. A whole bunch of people contribute good-looking designs and make it impossible for people to claim that “CSS can only produce boring, boxy designs”. I think it’s amusing that he won the argument so conclusively that people forget it was even an argument in the first place.