MomBoard: E-ink display for a parent with amnesia

I've been watching the evolution of the web since 1995, and I remember when css got popular in the late 90s thinking that it didn't match real-world use cases. Somehow design-by-committee took us from drawing our sites with tables in the browser's WYSIWYG editor, to not being able to center text no matter how much frontend experience we have.

Css jumped the shark and today I'd vote to scrap it entirely, which I know is a strong and controversial statement. But I grew up with Microsoft Word and Aldus PageMaker, and desktop publishing was arguably better in the 1980s than it is today. Because everyone could use it to get real work done at their family-owned small businesses, long before we had the web or tech support. Why are we writing today's interfaces in what amounts to assembly language?

Anyway, I just discovered how float is really supposed to work with shape-outside. Here's an example that can be seen by clicking the Run code snippet button:

https://stackoverflow.com/a/33953666

Notice how this tiny bit of markup flows like a magazine article. Browsers should have been able to do this from day one. But they were written by unix and PC people, not human interface experts like, say, Bill Atkinson. Just look at how many years it took outline fonts to work using strokes and shadows, so early websites couldn't even place text over images without looking like Myspace.

I think that css could benefit from knowing about the dimensions of container elements, sort of like with calc() and @media queries (although @media arguably shouldn't exist, because mobile shouldn't be its own thing either). And we should have more powerful typesetting metaphors than justify. Edit: that would adjust font size automatically to fit within a container element.

IMHO the original sin of css was that it tried to give everyone a cookie cutter media-agnostic layout tool, when we'd probably be better off with the more intuitive auto flow of Qt, dropping down to a constraint matrix like Apple's Auto Layout when needed.

Disclaimer: I'm a backend developer, and watching how much frontend effort is required to accomplish so little boggles my mind.

Your comment is some interesting food for thought, but I wanted to respond to a couple statements you made:

> not being able to center text no matter how much frontend experience we have

Not being able to center things is a bit of a meme, but flexbox was introduced back in 2009 and has been supported by major browsers for quite a long time. Centering text and elements is now extremely easy.

> css could benefit from knowing about the dimensions of container elements

You're in luck! Container queries were added to CSS fairly recently:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_contain...

As someone who has struggled with getting CSS to do normal layout stuff that had clear precise semantics but required weird CSS trickery, it's actually more scary than lucky that stuff like container queries have arrived 30 years after CSS was introduced.

I agree with GP that CSS should be scrapped.

container queries have a very obvious chicken and egg problem if used a certain way: If this container is less than 30px wide, make its content 60px wide. Otherwise make it 20px wide. Now that container exists in a quantum state of being both 30 and 60px wide. I actually haven't looked into container queries to see how they ended up dealing with this yet.

Obviously this is a very contrived example but it can also express itself in subtler ways.

> so early websites couldn't even place text over images

I take offense at this! We weren't that stupid back then! We just put the text 5 times on the page, with position: relative, 4x in the outline color, each copy with a 1px offset in a different direction, and the final one in the text color. That trick worked with pretty early CSS.

CSS was doomed from the start, IMO. It was a poorly-targeted solution to a the wrong problem that could never have worked. But you don't have to use it. You can keep using tables for layout, all browsers render them well (generally faster than CSS, and with better progressive rendering too), real-world screenreaders and the like have had great support for them since before CSS emerged, there's no actual downside.

I made a handful of corporate sites, e-commerce, CMS and even flash lol, just out of college with boring defense contractor job. I didn't have time to be picky because I had a full time job so I always worked with whatever they had and a lot of stuff was made in Dreamweaver, and even a corporate site exported from Word. The code was awful but worked everywhere. And you always had to get into code anyway, so there was no time to even think about which of the tools was best. Something was always missing in some integration so you gotta code/script. I think a lot of people made money in the last cycle tech cycles and had nothing to do but create or fund a bunch of stuff to confuse the marketplace.

Comeau has a piece on that. Another property to constrain it is the solution.

https://www.joshwcomeau.com/css/container-queries-introducti...