[filleduchaos]

You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

But then again, in my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works. At least the article's author is self-aware about this.

[rablackburn]

>> You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

Notably not a `block` element like a div or p - which is what most people are going to use as a container.

[filleduchaos]

...the entire point of CSS is that you can style any element (almost) however you want, which includes changing how it's laid out by the browser.

Case in point - unlike with HTML alone where `valign` only works on table-related elements, you can set `vertical-align` with a compatible `display`/layout algorithm on a div, p, etc as you wish.

[anticodon]

In 2000-2010 not only I was a fullstack developer, but also had to write CSS and HTML code for the websites I worked on often.

I remember that as an extremely painful experience. I can't remember all the details, but I remember that until flexbox and grid were implemented, everything CSS related was a pain. I vaguely remember that until 2008-2009 (maybe I'm off by 1-2 years) something trivial as rounded corners also was a pain.

I also remember that about 80% of the CSS pain was caused by Microsoft Intenet Explorer 6.0. It was complete garbage when dealing with CSS and Javascript (I was working with huge JS codebases at the time). But nobody in the web world could ignore it because it had a huge market share. I hate that browser and Microsoft with passion till this day. So many hours, days, weeks wasted to make everything work in a browser that wasn't updated by MS (why spend money when everybody is using it - they even fired the team that worked on it) and had a very "specific" implementation of Web standards.

[xp84]

You’re 100% correct in your recollections and the frustration of using CSS in those days contributed to me not wanting to keep working on the front end at all. And yes, F MSIE all the way to hell How many thousands of human lifetimes were spent trying to make that piece of crap work.

I still don’t know flexbox because I had given up by then. Thankfully I can have ChatGPT help me these days if it comes up, but thankfully FE is not really a part of my normal job.

[bombcar]

If you want to relive hell, work on HTML emails. Yay for outlooks ie6 renderer :(

[eska]

I remember setting up rounded corner PNGs with IE compat shims because it couldn't handle transparency otherwise..

I also switched away from frontend dev because of this silliness eventually.

[sodapopcan]

You aren't wrong, but I don't think it was the case of not doing diligence. I welcomed CSS and started using it when it came out, though it was certainly painful back then (as siblings have pointed out) and I don't believe it would be a good faith argument to say otherwise. I was aware of `display: table-cell` but it always felt like a hack. I'm well of the irony in that statement, but if I'm going to call something a table cell, why not use a table? Regardless of how that sounds, that's how people think, especially 19 year old me! Furthermore, the name was far too technical. People who had little-to-no experience with table layout weren't going to search for "table" when wondering how to centre something.

In any event, the main reason I stuck with tables (and this of course was only in person projects) was because CSS didn't have a viable way to do layout until 2017. Semantics aside, I still view table layouts as superior to floats and clearfixes. I was terrible about thinking about accessibility back then, of course, so I'm not sure of the impact there.

[JimDabell]

> You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

display: table-cell came along with CSS 2.0 (1998), and display: inline-block came along with CSS 2.1 (2011).

Unfortunately, there were huge amounts of CSS 2.0 that weren’t supported by Internet Explorer 6 (2001), and there was a five year gap until Internet Explorer 7 was released in 2006, which didn’t improve CSS support much (basically just support for a few selectors was added). It took until Internet Explorer 8 was released in 2009 before it supported the eleven-year-old CSS 2.0 properly. And after that point, web developers had to wait years before enough people had upgraded that it became possible to drop support for Internet Explorer 7 and below and start relying upon display: table-cell etc.

So even though CSS had display: table-cell in 1998, web developers couldn’t actually use it until after ~2011 or so. But still, that was 13 years ago now – time to stop beating the “Centring in CSS is difficult” drum.

[filleduchaos]

Yeah - I was squishing together the current state of things with the original. Maybe a clearer way to phrase that would have been that CSS has been able to vertically align elements like `valign` on a td does given a compatible display from day one, with the compatible displays starting with `inline` and eventually including `inline-block` and `table-cell`.

[sodapopcan]

Sure but we were told to move from tables to divs and "just use table-cell if you want vertical align" was not a great story nor was is discoverable to those had no prior context of table layout.

[johnnyanmac]

>n my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works.

I think the big issue in the 2000's was cross compatibility, and how seemingly simple elements on one web engine simply wouldn't work or look right in another. IE 6 was infamous for this. Tables were one of the few consistent elements, could be dynamically generated with ease, and simply feels easier to think about from a designer POV

I think that misalignment (no pun intended) is what lead to the huge snowball that is using frameworks upon frameworks to solve issues that some simple HTML/CSS should have solved. By the time the web engines evened out (and IE died) and CSS got better options, the damage was done. JS ruled the landscape.

[eska]

in my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works

As somebody who was actually there back then your opinion reads as arrogant and condescending. Do you really think the entire industry just did it wrong for decades? That people did not frantically search for an easy solution for this silly problem they faced constantly? You'd do well to learn to be more humble.

[williamcotton]

Having also been in this industry for two decades, you haven’t noticed the amount of wrongheaded groupthink that leads the entire industry astray with flashy marketing for the latest ill-conceived toy for both management and engineers alike?

[JimDabell]

Yeah, this industry seems particularly prone to it. Do you not remember the 90s and early 00s, where most of the industry was utterly convinced you needed unreadably small body copy and splash pages? Or how about CSS in general? I must have heard “you can only use CSS for boxy designs” a thousand times before Dave Shea got fed up and created CSS Zen Garden to conclusively prove them wrong. The number of times I’ve seen the majority of the industry believe something completely dumb and then figure it out 5–10 years later is insane.

[eska]

I have, but in this case it was truly necessary to do all the disgusting stuff like using Javascript to center stuff, because the content width had to be determined in hindsight. All suggestions in the article use features that came out in the late 2010s that solved this.

[filleduchaos]

The entire industry did, in fact, do it wrong for decades.

The problem was never that CSS - a DSL that exposed more of the browser's layout and painting engine than HTML did - was somehow less capable than HTML alone at implementing the same design.

The actual problem was that the requirements of designing for the web changed very rapidly. Take GP's example of text centred in a 600px yellow square; again it's not that it was soooo hard to achieve that specific layout with CSS. It was that they were trying to accomplish layouts a lot more complicated than that, often without breaking those layouts down well enough to be expressed in terms of the available layout algorithms. The longterm solution to this was of course for browsers to provide implementations of more advanced algorithms (like flex and grid) to match more advanced layout requirements, but that process was dragged out for far too long and eventually landed in a far too fragmented manner - a massive mistake.

And on top of that, it's not as if the existing layout algorithms were particularly incapable; on the contrary, they are well documented and you can get very far with them alone. So many questions ("how do you center a div??", "where are my margins??", "why isn't z-index working??") have answers that are quite apparent if you're familiar with the spec and thus understand what the browser is actually doing when it lays out your elements. But how many devs even know that e.g. stacking contexts exist, to talk of when they are created?

It's not as if it's even their fault, it's yet another thing that basically the entire industry did wrong for years. How many web design/frontend tutorials really explain anything about the CSS spec or about how UI rendering works in general, as opposed to just shoving arcane styling incantations at learners to cram? It's a failing of the industry that even today you have to go quite a bit off the beaten path to actually learn CSS (and HTML itself, while we're at it). Imagine if we taught any other language in the same haphazard manner! Just because they aren't technically programming languages doesn't mean that they're not worth proper instruction.

[eska]

If you look at any of the suggestions in the article, each uses at least one feature that came out in the late 2010s. Add a couple of years until initial bugs were fixed (which were there), and until browser adoption is high enough that older browsers can be ignored.

Back then I could whip up a dozen centering solutions, but not a single one that worked across all browsers in all cases. Tables just worked.

You're so wrong about the history that it makes me assume that you started webdev after this compatibility mess was fixed. It was truly disgusting. If anyone had found a solution back then everyone would have slurped it up immediately.

[sodapopcan]

Ha, ya you're right. My memory on table-cell was fuzzy and didn't bother looking into before making some other responses. IE 6 and 7 had no support for it and Firefox had partial support until 2008. I'm just looking at caniuse, of course, I don't remember what Netscape supported.

[leephillips]

I see overlapping text among a smorgasbord of other mistakes on the New York Times front page. Presumably they have the resources to hire top designers from this “industry”. No, I have no problem imagining that they did things wrong for decades.

[sodapopcan]

I agree with most of your comment but my sibling commenter isn't wrong. I certainly think we all do do things wrong. I mean, someone put JavaScript on the server after all ;)

[quectophoton]

> corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

I can't believe I didn't know about this until now.

Before flexbox and grid, I don't know how many times have I written `position: relative;` on parent, and `position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);` on the thing I wanted to put in the middle (vertically and horizontally).

[sodapopcan]

Ya, I remember reading tutorials that suggested this. It was a very confusing time.