4 ms·

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, wit

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 3y ago
>> 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 3y ago
  ...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 3y ago
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 3y ago
  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.
- eska 3y ago
  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.
- bombcar 3y ago
  If you want to relive hell, work on HTML emails. Yay for outlooks ie6 renderer :(
johnnyanmac 3y ago
>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.
quectophoton 3y ago
> 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 3y ago
  Ya, I remember reading tutorials that suggested this. It was a very confusing time.
eska 3y ago
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 3y ago
  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 3y ago
    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 3y ago
    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.
- sodapopcan 3y ago
  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 ;)
sodapopcan 3y ago
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 3y ago
> 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 3y ago
  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 3y ago
    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.

rablackburn 3y ago

>> 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 3y ago
...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 3y ago

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 3y ago
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.
eska 3y ago
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.
bombcar 3y ago
If you want to relive hell, work on HTML emails. Yay for outlooks ie6 renderer :(

johnnyanmac 3y ago

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

quectophoton 3y ago

> 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 3y ago
Ya, I remember reading tutorials that suggested this. It was a very confusing time.

eska 3y ago

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 3y ago
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 3y ago
  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 3y ago
  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.
sodapopcan 3y ago
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 ;)

sodapopcan 3y ago

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 3y ago

> 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 3y ago
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 3y ago
  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.