3 ms·
Oh yeah. The fucking CSS Zen Garden. It started the trend that led to utter degradation of any usability in modern web interfaces. The idea was to make HTML dec
by cyberax 25d ago
Oh yeah. The fucking CSS Zen Garden. It started the trend that led to utter degradation of any usability in modern web interfaces. The idea was to make HTML decoupled from presentation, but the feeble CSS of that time could not express any real layouts.
So very quickly web designers started to just hard-code pixel widths into the CSS, removing any dynamic sizing.
For example, on this very page: https://csszengarden.com/ https://csszengarden.com/ the two-column layout is done by using two overlapping DIVs with a padding on the left one. You could do 3 columns by using the same trick with left padding.
Want to do four columns? Tough. You'd better redesign your whole HTML for that to work. Or just hardcode the sizes.
Of course, this quickly led to interfaces where buttons have text that is cut off. But with lots and lots of useless whitespace padding around them.
- whalesalad 25d agoUmm... this is disingenuous. At the time, most websites were built using tables and were completely non-accessible. One of the reasons we moved to XHTML, semantic markup, CSS instead of Tables... was to enable accessibility.
- cyberax 25d agoNo, it's not disingenious. Tables _were_ accessible and easily navigable, including by screen readers. They are also a very logical way of organizing content. > One of the reasons we moved to XHTML, semantic markup, CSS instead of Tables... was to enable accessibility. Again, nope. Try a design with 3-4 columns with the old CSS and see how it behaves. The order of elements in the HTML often differs from the visual order, confusing the readers. It also breaks tab-navigation, even the https://csszengarden.com/ https://csszengarden.com/ has the "View All Designs" button that is inaccessible. Then add absolutely-positioned headers and other popular CSS patterns.
- agos 25d agotables are a very logical way of organizing _tabular_ content. they're a terrible tool for layout, accessibility wise
- cyberax 25d agoNo, they're not. They are _perfect_ for layouts, as they naturally support "move left/move right/up/down" directions. To this day, this is STILL not working well for DIV-based designs.
- krupan 25d agoI remember tables within tables within tables. Were those really accessible? The humans writing that html couldn't always keep it straight
- cyberax 25d agoYes? What's problematic with nested tables? You just tab in and out of them. Now try to navigate something like the WSJ/NYTimes home page. If you remember the old days of good UI, there was this idea of "tab groups".
- yosito 24d agoYour frustrations with the state of CSS 2.0 at the time were quite common, and part of what CSS Zen Garden aimed to inspire people to transcend. Now, CSS has evolved to the point where none of these hacks are necessary. You can now write pure, semantic HTML, and pure CSS, and implement full-fidelity designs that work across all modern browsers. That was the whole dream of the CSS Zen Garden, which wasn't fully realized at the time, but now it is.
- cyberax 24d agoThat's the issue. The CSS pushers did not have any ways of solving the CSS issues. All that "inspiration" resulted in a loss of scalable interfaces and a switch to hard-coded element dimensions. And this persisted for a LONG time because Web UI designers are, in general, bad and were fine with flashy UI that is finger-breakingly bad. Heck, it's _still_ a problem because people are by now completely oblivious to that. The art of automatic UI layout has been lost completely.