
Old CSS, New CSS - culturedsystems
https://eev.ee/blog/2020/02/01/old-css-new-css/
======
acabal
Wow, that took me back.

Small nitpick, XHTML does live on in one important place: epub, which is the
most commonly used file type for ebooks.

I do a lot of epub work at Standard Ebooks, and at first I hated XHTML for the
exact reason the article describes: A single tiny error makes the entire
document invalid and it can be hard to spot it and recover. Also, namespaces
were (and still are) a massive pain for little to no gain.

But over time I've come to really appreciate XHTML, again for that exact same
reason. It forces you to write correct XML, and there is no possible ambiguity
or multiple ways of representing a tag like there is in HTML5. `<br/>` will
always be `<br/>`, not maybe `<br>` or `<br/>` or even `<br></br>`. An XHTML
document from someone else will be both human-readable (after pretty-printing)
and easily machine parseable. You also get xpath, which is a way of selecting
elements akin to CSS but even more powerful.

Ultimately XHMTL is better suited to epub's use case, which is static
documents that are written once and not dynamically generated by templating
languages or libraries. Too bad there was some talk of epub switching to
HTML5, though it's unlikely future revisions of epub will ever see wide
adoption.

~~~
zAy0LfpBZLC8mAC
> Ultimately XHMTL is better suited to epub's use case, which is static
> documents that are written once and not dynamically generated by templating
> languages or libraries.

That's backwards. Relying on software to assign random meaning to broken input
is never a good solution to anything, neither for static documents nor for
dynamically generated documents. It's just that HTML allows you to get away
with it, kindof (i.e., no scary error messages, just subtle breakage
everywhere), which is why people built templating systems that didn't bother
with correctness either. If the web had been XHTML from the beginning,
templating systems would have been built in a way that makes it hard to
generate broken documents in the first place, because the error messages would
have created the incentive to do so, thus avoiding a lot of the subtle
breakage as well.

~~~
goto11
Agreed. Nobody is complaining that JavaScript terminate parsing on syntax
errors. Because it has been like that from the beginning.

The problem is introducing stricter rules which breaks existing content.

------
faitswulff
I feel like I learn a lot more about CSS from articles like these as opposed
to books because it puts CSS features into context with the problems they were
meant to solve. The historical context helps a lot, too. The way that I've
tried to learn CSS in the past was essentially a random collection of tricks.

Are there any more articles like this? I'd read them all day.

~~~
acid__
My uncle likes to call it “fictional nonfiction,” saying that the human brain
is better at following stories than piles of facts.

~~~
seanstickle
At St. John's College (back in the 90's anyways), we called this "teaching
science and math historically" (as opposed to teaching the history of science
and math -- which tends to emphasize dates and names).

By telling the story of science and math, we gained the context of who did
what for what reasons. Which unlocked my understanding of science and math in
a way that textbooks never did.

------
thdrdt
CSS today is so good that I now design websites in CSS and just present a
website to the client.

If you use grids and flex you can rearrange content very quick if the customer
wants to move it.

My workflow is now much faster. Great for the client, great for me.

The only design tool I use in the beginning is a pen and peace of paper to get
some ideas of where I want to go. But after that it's all HTML + CSS.

~~~
simion314
>CSS today is so good that I now design websites in CSS

There are so many things missing that people are forced to use Javascript and
a div-mess to implement widgets. Ex elements like dropdowns, numeric input,
the small scrollbar that appears for elements, I am wondering if browser makes
are just ignoring css and focusing on JS.(I admit flexbox and grid layout is
cool)

~~~
vbezhenar
Why do you want to style dropdowns or scrollbars? Using those "designer"
dropdowns is a pain on mobile, while simple dropdowns just use native controls
and work flawlessly. Same about scrollbars, I hate websites that interfere
with my scrolling.

~~~
simion314
Is not me, the designers want it, we need to ask them why? But in my case it
was a complex application that is not intended to be used from a phone.

~~~
acdha
> Is not me, the designers want it, we need to ask them why?

Yes: JS widgets have a usability impact and especially accessibility, which is
a legal requirement in much of the world. Some libraries have good
accessibility stories but given that this is an ongoing cost which will need
to be supported it’s always important to link it to an actual requirement
(e.g. searchable drop downs) to justify the expense.

~~~
zzo38computer
There is ARIA, but ARIA isn't quite good enough. I also suggested a <widget>
element, which allows you to define your own widgets and provide an
implementation in HTML and JavaScript to be used if the browser cannot use it
directly (if the widget is implemented directly (subject to user
configuration), then the stuff inside the <widget> block is ignored or used in
an implementation-defined way; if the widget is not implemented, then the
<widget> is treated the same as a <span>, and any <script>, <noscript>, etc it
contains is interpreted normally). (For selections from lists, there is
already <input> anyways, and the browser can include whatever special features
they want; they may be disabled in application mode if needed.)

~~~
acdha
ARIA is always improving but really the problem is that most developers either
don’t use it or don’t test their usage. This is not a problem of needing new
technology as much as companies skimping until they get sued.

------
baryphonic
Man, this brings me back. I started working on the web a couple years after
Eevee did. I remember all of the pain points he did. (One note: when I was
learning in 2001-2002, most of the tutorials and books still used <FONT>,
<CENTER>, <BIG>, etc., even though CSS was around. I remember using CSS was
extremely painful because of IE5, which was the default on my Win98 machine,
so I didn't bother really trying till hearing about Firefox - I mean Phoenix.)

I also remember that centering any block element within another block element
with CSS was somewhat absurd. The trick was to do something like

.centered { margin-left: auto; margin-right: auto; }

And of course, there was no way to vertically center an element within another
without hacks and HTML detritus that served no semantic purpose. It was almost
worse than the table-based layouts.

That's the only other painful thing I vividly remember behind what Eevee
posted.

Flexbox and Grid have made things a lot better, but I still run into weird
inconsistencies and exceptions frequently. (The latest involved trying to set
`max-height` on a `resize: vertical` element, and I couldn't get it to work
without hacks or JavaScript. Chrome implements resizing by overriding the
width or height on an element's style attribute.)

Wonderful post! Would love to see more.

~~~
hanche
That’s still how I do horizontal centering, FWIW. I guess I have some catching
up to do.

~~~
ajlburke
Take a look at FlexBox - if you've been around the CSS layout block a few
times you might find yourself going "finally - they figured it out!"

~~~
dmix
Flex has indeed figured it out, I use it for everything now and rarely touch
margin: auto unless I'm being lazy or there's a very simple usecase.

But that said Flex still very much classic CSS: the awkward naming schemes,
the excessive options for each parameter, the mixing of different options
available, etc... it's still very much CSS in all it's quirky dirtiness.

CSS Grids kind of shocked me that they weren't entirely convoluted.

Maybe it's the design-by-committee stuff but even as CSS has gotten better: it
still took way too long and it's still very weird. Maybe like JS this will
slowly no longer become true, but I'm kind of happy I grew up without
Flex/modern CSS because I'm unafraid of that quirkiness.

~~~
ajlburke
JustifyContents and AlignItems are like inserting an old USB key: I always get
it backwards the first time and have to switch it over.

~~~
Izkata
On that note, did you know there's also justify-items and align-content?

------
paultopia
Retro HTML was great! You never had to figure out why your CSS inexplicably
wasn't working, nobody complained when things didn't look beautiful, because
beautiful was impossible. Bring it back!

LOL, I particularly love the breakdown of Space Jam. Oddly enough, I very
briefly considered breaking out an old-school imagemap, like, a month ago. I
was trying to get one of those lightbox-style image galleries to work,
including a clickable area on the side of each image to get to the next one,
and I couldn't figure out how to do all the weird border-padding-whatever-else
unholy CSS witchcraft to get the clickable areas aligned correctly with the
images. Imagemaps may actually work better than the hacked-together solution I
eventually came up with...

~~~
bigger_cheese
I'm somewhat ashamed to admit I still write HTML the same way I did in the
90's.

i.e. In notepad using <table> to control the layout.

I never learnt CSS at some-point I should learn it but I work with html so
infrequently I never bothered. My "notepad html" is more than enough for
anything I've had to do in last two decades.

edit. One thing I do miss is being able to hit view source in browser and
understand everything, nowadays all javascript.

~~~
coldpie
God, I'm in the same boat. I don't do web programming, so my web design skills
stagnated around the end of the Space Jam Era documented here. I don't work
with CSS often enough to memorize its inconsistencies (why is text colored
with "color" but backgrounds are colored with "background-color"?), so it's
mostly a baffling series of frustrated googling whenever I'm unlucky enough to
work with it.

I'm glad you all like it, though.

------
Vinnl
> (Native buttons also went out of vogue, for some reason.)

Ah, I still remember native buttons being _introduced_. Good times, back when
browsers could introduce features that seem so obvious in retrospect - such as
spell check in text boxes. Feels like all the low-hanging fruit has been
picked by now. (Or is it? Firefox's integrating a password manager feels
pretty similar.)

Great overview, though. I feel like my history with the web has been almost
the same as the author's, and this brought back a lot of good and not-so-good
memories.

~~~
vbezhenar
Browsers still lose my 15 minutes of typing when something goes bad and I'm
returning back to page. I understand that it's usually caused by websites
forbidding caching, so browsers have to reload page, but they still could save
that data somewhere and present me an option to restore it, at least for some
time. Something like auto-complete.

~~~
anticodon
For this reason I attempt to develop a habit to type every comment or post in
vim first. This loss of typed text happens maybe once in 2-3 months but it's
extremely annoying.

~~~
zoomablemind
Exactly! Sometimes I wonder why browsers have no hook for launching external
editor for textbox input, like EDITOR env in shell? This could also solve the
need for RichTextbox with JS based controls for bold/italic/bullets etc.

~~~
zzo38computer
Yes, I would want to have more user commands for many things such as:

\- External editor for textbox input

\- Save form data to a local disk file

\- Recall form data from a disk file (on the same or a different webpage than
it was saved from)

\- Replace scripts in the document

\- Document/application mode switch

\- Disable rich text editing

\- Specify a remote filename when uploading files using forms

~~~
Vinnl
> \- Replace scripts in the document

You might be interested in
[https://decentraleyes.org/](https://decentraleyes.org/)

~~~
zzo38computer
That would be good for replacing jQuery and so on, but I would want to be able
to replace inline scripts too sometimes. (And also some sites have their own
copy of jQuery; I will still want to substitute my own if their own copy is
otherwise unmodified.)

------
inopinatus
Two decades ago I was overjoyed to discover that Scheme was finally going to
have a useful application beyond illustrating SICP and writing koans to amuse
myself, because DSSSL was on the cusp of evolving into the last document
styling language anyone would ever need.

Unfortunately following an incident with a broken Lisp machine, a liquid
lunch, and an unlicensed particle accelerator, I became trapped in a parallel
universe where the HTML ERB anointed CSS by mistake during a drunken night out
in Oslo.

The fundamental concept of CSS (best revealed by H.W.Lie's thesis IMO[1]) was
to create a rich and versatile and non-Turing-complete set of structural
selectors in lieu of DSSSL's recursive logic, and to allow styles to overlay
one another; two design choices that only by the application of gallons of
irony can explain why most web pages are composed of a bunch of nested DIV
elements with hashed IDs and overloaded semantic class attributes, and
everyone compiles their assets into a static file.

I switched to Tailwind CSS months ago. Adam Wathan is the hero we deserve.

[1]
[https://www.wiumlie.no/2006/phd/css.pdf](https://www.wiumlie.no/2006/phd/css.pdf)

~~~
blain_the_train
Can you elaborate on what problem tailwind is solving? My first impression is
that it looks like a set of custom built css classes.

~~~
inopinatus
No, not custom at all. Quite the opposite - it's a well-curated set of
standard classes. It's the focus on utility-based composition of style that
sets Tailwind apart. For me the problem being solved is maintainability,
recognising that CSS is tremendously brittle with regard to the application it
serves and the context in which it is evaluated.

Probably best to read [https://adamwathan.me/css-utility-classes-and-
separation-of-...](https://adamwathan.me/css-utility-classes-and-separation-
of-concerns/) which does a much better job of explaining the motivations, and
the conceptual journey of its creator, than I ever could.

Many folks (not all, but many, I'd even venture to say ... most) have a four
step reaction to Tailwind:

1\. That is the stupidest webdev idea I ever heard, and I've heard a lot. //
2\. Fine, I'm trying it because everyone else keeps prompting me to and/or its
creator seems competent. // 3\. This is weird but actually quite helpful and
totally not what I expected. // 4\. You have ruined me for any other CSS
framework and I never want to use anything else.

All CSS is crap. Tailwind is (in my experience and opinion) the least crap and
most productive approach yet.

------
thdrdt
_Damn, I miss those days. There were no big walled gardens, no Twitter or
Facebook. If you had anything to say to anyone, you had to put together your
own website. It was amazing._

I also created websites back in the day with spacer gifs and framesets, but I
don't understand this qoute.

People still create their own website. There are still a lot of forums with a
wide range of topics.

For example: not so long ago I was into reef tanks. There are a ton of forums
and websites about that subject. Maybe even more than in the old days.

~~~
onion2k
_People still create their own website._

Far fewer than back in the late 90s and early 2000s. I think the reason for
that is because people didn't actually want to make websites - they wanted to
have a voice on the internet and making a website was pretty much the only way
to do that. Now if you want to publish your ideas about reef tanks you could
learn to write HTML and CSS and make a website, or you could write on Twitter,
or you could make YouTube videos, or you could do a podcast, etc, etc.

There are fewer people making websites but there are more people publishing
_something_ on the web.

I think when the web industry's old guard lament the fact that no one really
builds homepages any more it's genuine and heartfelt because they (and I
include myself in this) really enjoyed looking at what people made. For me to
see what interesting and exciting ideas people have that they can do with HTML
and CSS is much harder now. There's Glitch and Codepen and stuff, but I feel
like I'm still missing loads of the best stuff.

~~~
papito
And it was great. It was a barrier of entry for speech. You could do it, it
was free, but you had to apply some effort, you had to have _something_ to
say.

Now the Web is flooded with morons on Twitter who's opinion is just the noise
you have to filter through.

~~~
toddmorey
Don’t over romanticize it. There were a lot of experiments, goofiness, and bad
information in those days, too. It was also nearly impossible to find
anything.

~~~
giantrobot
There was a beautiful period before Google was reverse bought by DoubleClick
where you could find damn near anything. Searching was a solved problem by
Inktomi and AltaVista but PageRank solved _sorting_ search results (for a
while).

Before Google AltaVista's search was pretty good at filtering out the meta tag
spam that bubbled up in other search engines.

~~~
RonanTheGrey
> beautiful period before Google was reverse bought by DoubleClick

That's a beautiful way to put it. I remember those days and thing is, much of
Google's reputation was built during those days, a coattail they're still
coasting on today.

In those days I remember you could find anything at all in just a moment.
"Information snacking" was a thing, versus "being given the answer we think
you want (or the one that will make us the most money)".

"Reverse bought by DoubleClick", will have to remember that..

------
lordnacho
Wow, I wish I'd had this article a few years ago.

Back in the 90s I wrote my high school's first website. We even got a scan of
a picture of the school done in way too high resolution. It was a massive pain
to get running, given my buddy and I were in our mid teens and the web was
moving fast. Everything was a bunch of different hand crafted pages of tags,
served from a machine sitting in the school. But basically we figured out how
to do it by reading one or two pages about it.

I left school and eventually did a lot of financial coding, which was mainly
backend stuff plus a small amount of desktop GUIs, or very very basic web
pages.

Not until a few years ago did I have another look at the web, and it had of
course changed enormously. It seems nowadays everything is a tool that
compiles into something else. There's a zillion frameworks in js, there's
webassembly, there's a bunch of things that you use to build the CSS. The page
itself seems to be a load of divs, many tags from the old days are archaic
now, only seen on old university sites. Sites themselves are served from a
datacenter, and not from one machine. Static content doesn't even need to come
from the same place. Security and privacy is a thing. There's no one place to
learn the whole thing, which I suppose is expected.

~~~
vbezhenar
You still can write static HTML/CSS and host it on your machine (if you have
accessible IP) or some cheap VPN. It'll work just fine. It's possible to write
a very complex websites nowadays with those technologies. But not every
website have to be complex.

~~~
unityByFreedom
Yeah but you don't get eyeballs with that anymore unless you have something
really unique.

When the web was new you could get a lot of hits with static content. It is
not so easy to do that now.

~~~
dangus
How many hits is a lot?

Not a lot of people had computers with Internet back then. So sure, you can’t
captivate the same percentage of the entire World Wide Web - but why would you
expect that to be a reasonable assumption?

Sure, in a world where the web was a couple million nerds you’d expect your
content to be a bit more visible.

But the web is measured in billions of users now.

I would also suggest that writing content just to ensure that people read it
is looking at it the wrong way. That’s a shallow popularity contest. If the
production of that content doesn’t bring you satisfaction on its own then it
doesn’t matter whether you have 1 view or a million, it’s not making you
happy.

~~~
unityByFreedom
Humans seek social interaction, whether that's in person or online, or by
doing good or bad things to get attention. I would not call that a popularity
contest because it happens with everything. A popularity contest would be one
extreme end of a range of behavior.

If you are producing content for yourself and it makes you happy then you
don't need to put it in public view. The whole point of the internet is to
interact, share your work and see others' work.

~~~
GoblinSlayer
Indeed in web 2.0 content is not a concern, the point is number of likes.

~~~
unityByFreedom
That is the point I was refuting. In the current web, communication is still
the overarching motivator. Content still matters, and the usability of your
site is a factor in communicability. So, if someone's site is easier to
navigate and more frequently updated due to the use of updated technology,
that may be a factor when people decide where to spend their time.

------
weeksie
Wild. I remember every single one of those milestones.

Back in 04 I wrote some forum software with XmlHttpRequest back before gmail
was released. The everybody thought I was a fucking wizard. Then gmail came
out and it was like oh you did that gmail thing. Good times.

But yeah, the long slow death of IE 6, crazy stuff. God, it feels like it's
been a decade since I've had to seriously think about cross browser bugs,
versus that eating up half my development time. Evert time I curse mobile
Safari these days I remind myself of IE 6 and calm down pretty quick ;)

------
mr-ron
If you want to go back further, the best article on how the web and styling
worked circa 1993 is this [http://contemporary-home-computing.org/prof-dr-
style/](http://contemporary-home-computing.org/prof-dr-style/)

And alternate articles

[http://art.teleportacia.org/observation/vernacular/](http://art.teleportacia.org/observation/vernacular/)

[http://contemporary-home-computing.org/vernacular-
web-2/](http://contemporary-home-computing.org/vernacular-web-2/)

------
meerita
With CSS-Grid now you can do practically most of the things without using
dozens of CSS properties. I barely use Flex, even. But it's late for current
CSS techniques, because I'm abduced to functional CSS
([http://minid.net/2019/04/07/the-css-utilitarian-
methodology/](http://minid.net/2019/04/07/the-css-utilitarian-methodology/))
and I don't want to look back anymore ([http://minid.net/2019/08/12/in-
defense-of-functional-css/](http://minid.net/2019/08/12/in-defense-of-
functional-css/)).

------
sixdimensional
I've been away from front-end web development for a while now. I've been doing
steadily less of it over the years, and by now it's probably been 4 years
since I've touched it at all. As memory serves, the last project was gulp,
typescript, SASS, and still jQuery.

When the front-end work began to fork off into it's own real separate
independent discipline, likely when we really achieved separation of the UI
from the backend, things started to change and I ended up having to make a
choice. With front-end build tools, CSS processing libraries, larger
frameworks like React/Angular, I ended up on the back-end side of the equation
- data platforms, databases, web services, application logic, integrations,
infrastructure, etc.

Seeing this reminded me of how much fun front-end development was, even with
having to deal with the annoying quirks of HTML, CSS, JS and all the browsers.

Did anybody else, like me, suddenly have a real hankering to sit down and
break out all the new HTML/CSS/JS toys and start playing? :)

~~~
Izkata
> Did anybody else, like me, suddenly have a real hankering to sit down and
> break out all the new HTML/CSS/JS toys and start playing? :)

Happened to me last year, with the steadily-increasing annoyance at how
complicated it's gotten at work - just to see how easy/difficult it would be
to put together that blog I'd been thinking about for years, without using a
single frontend framework.

(That blog isn't live, it got put aside for other projects in case anyone was
wondering. But yeah, particularly with grid-template-area, it's not difficult
at all anymore to do whatever layout you want. Even got some limited
component-y goodness with inclusion templates and direct-descendant
selectors.)

------
commandlinefan
I still maintain that the only (not the "best", but the only) way to really
learn something - even something technical - is to understand its history and
understand how it got to be the way it is. Everything starts out about as
simple as you expect it would be - probably the way you or I or anybody else
would put it together if we didn't have any guidelines to work off of, and
ends up being refined a bit at a time as more surprises are discovered. The
problem is, what you end up with - like modern CSS - just don't make a lot of
sense unless you understand what problems the current versions were refined to
work around.

------
georgespencer
I loved reading this. My first job was mainly spent fixing IE box model
problems (remember when Microsoft could only ship Trident updates as part of
huge Windows updates?!). I now have an allergic reaction to any cross-site
compatibility problems, because -- in a rare exception to the rule -- it
genuinely WAS harder in my day, and we managed it.

~~~
bmn__
> remember when Microsoft could only ship Trident updates as part of huge
> Windows updates?!

They had the ability to parallel install all along, eliminating the need for
updates as part of huge Windows updates:
[https://news.ycombinator.com/item?id=20495979](https://news.ycombinator.com/item?id=20495979)

~~~
will4274
The link inside the link says that clicking on the favorites menu would cause
the browser to crash. Not exactly ship-able.

------
Izkata
> Half the Web was fan portals about Animorphs, with inexplicable splash pages
> warning you that their site worked best if you had a 640×480 screen.

This is an amazing reference. K. A. Applegate's post-series Animorphs site,
_hirac delest_ , is still online - and was originally written around this era
(series ended in 2001, so its last update, if not creation, is a bit later).
It has some newer stuff like CSS, but definitely check out the source here as
well:
[http://www.hiracdelest.com/database/index_database.htm](http://www.hiracdelest.com/database/index_database.htm)

Just with a quick scan on the main page, it has a mix of upper and lowercase
tags, a "best views in" resolution, various font tags, and body tag similar to
the SpaceJam one:

    
    
      <body text="#CCCCCC" link="#33CCFF" vlink="#33CCFF" onload="MM_preloadImages('../images/menu-v2/over_thumb/about.jpg')">
    

( _hirac delest_ is from the period when I first started learning html/css/js,
within a year or two)

~~~
pbhjpbhj
MM_preload...

That's Dreamweaver I think, steaming pile of crap its pages were.

Edit: actually, it was a very good IDE for writing html at the time I used it;
it's wysiwyg led people to make pages that were a terrible mess under the
covers though.

~~~
SlowRobotAhead
> MM_preload...

Yep, just trigger some trauma for me there. Had long since buried that.

>That's Dreamweaver I think, steaming pile of crap its pages were.

... seriously, this post brought up things I had long intentionally forgotten.
I was one of those poor fools that fella for the WYSIWYGness of DreamWeaver

------
z3t4
When the browser wars ended 15 years ago, not much have happened. The
innovation has instead moved to userland, which achieve things with crazy
hacks and meta/trans-compilation. We have committees writing new "standards"
faster then anyone can implement them. But there is no natural selection. What
browser engine are you going to switch to if you are unhappy with your current
one? That said, most of the hard problems have already been solved, so writing
vanilla html/css has been a breeze ever since things settled. And its also
very stable.

~~~
feanaro
Let's not forget Firefox and Gecko still exist, though.

~~~
z3t4
Yes, but it seems like Firefox is only keeping up, they are playing defensive,
while they really ought to attack weakness in Chromium or give users a reason
to switch. Right now Chrome is slightly more efficient, slightly better
feature coverage, etc.' One reason why I still use Mobile Opera is because it
automatically adjust the text when I zoom in... A bold move for Mozilla would
be to cut down expenses to a 3 year buffer, cut their funding from Google and
force themselves to become independent.

~~~
worik
Reason to switch?

Trust.

Mozilla cf Google.

~~~
z3t4
95% of Mozilla money comes from Google. Last time I checked Firefox still
sends everything you type into the address field to Google. So if you do not
trust Google, how can you trust Mozilla!?

------
c0ffe
I would like to add Bootstrap to the list, including other CSS
libraries/frameworks.

In Bootstrap case, it included a grid, and other UI components (like a
dropdown menu, and a modal dialog), but most importantly, it took care that
the page worked the same in all major browsers of the time.

It helped me to prototype various projects over the years.

------
antibland
A friend of mine new to CSS was rebuilding the Google homepage using Flexbox.
He asked me why Google uses <center> in their HTML, to which I told him it's
most likely due to compatibility. Google is accessed by every web capable
device and browser ever made. Yet, seeing <center> feels unacceptable.

------
bla3
The grid version, praised as the best version, on
[https://eev.ee/media/2020-02-css/thumbnail-
grids.html#grid](https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid)
renders incorrectly in chrome 79, the current stable release. (It looks fine
on Canary and in Safari.) The more things change...

~~~
jtolmar
For me, the grid version is broken, I open dev tools and it fixes itself, I
close dev tools and it remains fixed, I _refresh the page_ and it remains
fixed, I close and reopen the tab and it remains fixed, I close the tab and
open it again from the link and it's broken again.

Just plain haunted.

------
arkh
I think the most important step was Firebug: the first good browser dev
toolbar.

[http://positioniseverything.net/explorer.html](http://positioniseverything.net/explorer.html)
saved me hours of debug multiple times when IE6 was the main browser around.

------
_hardwaregeek
What a great article. It manages to simultaneously understand and debunk the
nostalgia for the old web. I find it a little frustrating to hear people
complain about how complicated the web has become and how simple things were
back in the day. I mean, sure, there is a lot more complexity in certain
areas, but that's because we've become significantly more ambitious and
because we've pushed formerly pervasive complexity to the edges (and thus
concentrated it to an extent). I'm so glad we don't have to resort to such
hacks to get _rounded corners_.

One could argue that the old-school equivalent of NPM dependency hell was all
the little snippets one had to copy and paste to get somewhat portable,
somewhat usable sites. Except those dependencies were managed in an entirely
ad hoc fashion, without any versioning or attribution.

And as the last section demonstrates, you can now write front end code that is
so simple and yet flexible, maintainable and (mostly) portable.

I'll admit, I'm a pretty adamant CSS in JS supporter, but I still do use CSS
at the end of the day. This post demonstrates that I still have a lot to learn
about proper CSS, but more importantly, there's a gigantic amount that I no
longer have to learn. Which is a testament to the progress made.

------
neop1x
"unless for some reason you use an iPhone, which forbids other browser
engines, which is far worse than anything Microsoft ever did, but we just
kinda accept it for some reason." \- yes...what is that reason? How is it even
possible?

~~~
dspillett
For a simply objective look at the different positions of MS than and Apple
now, there are three significant points that spring to my mind:

1\. Apple do not have anything like the monopoly stronghold on the phone &
tablet market that MS had on desktop and laptop PCs.

2\. They are not (that I know of) directly using the market power that they do
have to try completely block competitors. While there is no doubt some
coercion going on (if you give iDevices pride of place in your store we may
give you preference over others when supplies are low) there isn't the
outright "stock Android and we won't give you any iDevices to sell" equivalent
to MS's behaviour with regard to DRDOS/BeOS/OS2/... in the 90s.

3\. They are not being deceptive about their position, like MS quietly but
very deliberately scuppering DRDOS during Win3.1 development
([https://en.wikipedia.org/wiki/AARD_code](https://en.wikipedia.org/wiki/AARD_code)).
Apple-land is officially a walled garden where MS were at least pretending to
operate openly in a shared market.

More _subjectively_ , whether these objective differences are enough to
justify the relevant authorities not going after Apple is a matter of opinion
and/or complex legal wrangling concerning the interpretation of monopoly/anti-
competition/other legislation and its wording.

------
LeoPanthera
Are we not supposed to use server-side includes anymore? I never stopped. I
find them quite useful, and they use virtually no resources on the server.

------
Pxtl
I miss those days. In theory we're supposed to separate presentation from
content, but I've never seen anything non-trivial that doesn't have a lot of
nested inexplicable divs to workaround some confusing behavior. Nested tables
were an ugly hack, but it was at least clear how their layout worked (until
you wanted height 100% of course).

------
m712
About map/area: Some websites still use them, and really well too. The Team
Fortress 2 website[0] uses them with the images at the top of the page to link
each of the characters' description pages.

[0]: [https://teamfortress.com/](https://teamfortress.com/)

------
papito
You guys ever saw the Captain Marvel promo site, made in the style of the 90s
web? It's f---ing brilliant.

[https://www.marvel.com/captainmarvel/](https://www.marvel.com/captainmarvel/)

~~~
bigwheeler
That is great, but how ridiculous is it that this microsite is made with 100%
js dom manipulation instead of just static html? I wonder if they did that
because using static html would have potentially not rendered the way they
intended on all the current devices...

~~~
SPBS
that would only make it more authentic

------
est
the webpages in the 90s and early 00s are so random. Today almost every
goddamn webpage looks like something derived from bootstrap.

------
vwcx
Does anyone remember messing around with ‘chromeless windows’?

A misleading phrase that means something completely different to a newer
generation...

~~~
Izkata
I remember making a page that when browsed to, would pop up an all-black full-
screen "chromeless window" and start slowly typing green text Matrix-style.
Very neat trick in those early-teens years...

------
ltriant
> This was also the era of “web-safe colors” — a palette of 216 colors, where
> every channel was one of 00, 33, 66, 99, cc, or ff — which existed because
> some people still had 256-color monitors! The things we take for granted
> now, like 24-bit color.

Ah, I remember so many evolutions of my own websites using 336699 and 6699ff
as the main colors. I still default to them even now when I just need
_something_ that isn't default colors.

And wow, I forgot all about image maps! I used to stare in awe of the super
artistic websites that used image maps heavily, as if I was witnessing the
blackest of black magic.

------
andai
Does anyone know if there's a "CSS Zen Garden" for Flash?

I heard about Flash games archival efforts a while ago, so I wonder what
became of that (and if they included weird websites in their efforts too).

I remember a magazine I had that was full of crazy flash sites. I recently
fondly remembered Fly Guy (still works in Firefox!)

[https://web.archive.org/web/20050317021634/http://www.trevor...](https://web.archive.org/web/20050317021634/http://www.trevorvanmeter.com/flyguy/)

~~~
morelisp
[https://bluemaxima.org/flashpoint/](https://bluemaxima.org/flashpoint/)

------
rfsn-alex
What about spacer.gif?!

~~~
masswerk
A bit of explanation: In the old days of table layouts, the width attribute of
a dt element would declare the maximum width of that element only. In order to
provide a minimum width, you'd insert a transparent 1x1px image and give it
the appropriate width. This could be used both for flexible (min, max) layouts
and rigid designs, where everything would be positioned by a system of pole-
like transparent images, much like in a Dali painting.

Note on both frames and tables: Right from the beginning, you could declare
width and height units in HTML both in percent and in absolute units, like
"px". However, Netscape browsers used internally only percents! Meaning, if
you you intended to span the entire width of a document, Netscape would
convert your absolute units to percent and from this back to px (using integer
math for speed) and you would end up with some rounding error depending on the
width of the browser window, which could add up to a deviation of 4px or so.
Which was, of course, a constant pain, when you intended to line up elements,
like a logo on top and a structure with a navigation and a main content area
in different colors below.

~~~
worik
Wow.

I was doing Web development in 1999 for a year or too

I never got that deep.

But I recall clearly adopting a left/right column for static content and
center column for the CGI output custom stuff.

Choose that format because IIRC it was easy to implement in straight HTML

I looked at CSS then, but it did not make sense business wise when we could
make vanilla HTML work.

It was a different world

------
hoorayimhelping
> _No, Firefox really got a foothold because it had tabs. IE 6 did not have
> tabs;_

I don't think this is right. Firefox got a major foothold because it blocked
ads.

This was right as those ads that would open 4 new windows when you closed a
previous window started showing up on the web and IE6 could not handle them.
It would literally kill your browsing experience and sometimes blue screen
your computer. Firefox was the first mainstream browser to block pop ups out
of the box and it worked.

~~~
fcanela
Before switching to Firefox, I previously used Internet Explorer, which had no
tabs support. In an era of frequent pop-ups, your desktop ended being a mess.

It was annoying, but that is what I was used to. Then Firefox came and allowed
to have all your browsing in the same window, without polluting the taskbar.

In my case, I clearly remember that tabs were the reason to switch into
Firefox.

~~~
prashnts
I had similar reasons with one more anecdote: my first internet access was
through a Nokia 2G phone and I « dialed » to connect in Windows XP. Thank you
Nokia PC Suite (which I could only get from the Byte magazine CDs and DVDs).

But boy, IE6 was painful! And i needed tabs to open pages and do something
else while I wait for pages to load. That made me switch to Firefox after
Opera. It wasn’t that long ago, I think 2007 sorts?

In my job now, I still try to make sure people can access my pages with as
little resources as needed.

------
pcurve
CSS has gotten great, but I feel things have gone in opposite direction for
general web dev.

Careful cascading styles and clean and readable markup have gone straight out
the window.

~~~
ftio
Like with all things, it depends!

Since HTML5’s introduction of a bunch of new elements, I like to think markup
has the potential to be a lot more readable and semantic now than it ever did
when I first starting making websites in the 90s, even/especially given such a
broad new range of element types.

------
patentatt
I think image maps are due for a comeback. There has to be a creative and
beneficial use for this, right? That shit seemed like magic in 1998.

------
cjslep
Those gridded links remind me of the NeoPets site which would overlay a very
busy "map" image with a tiny link, which would take you to a page with tons of
powerful items. You used to be able to find the link with tab - the
accessibility feature that barely highlighted / cycled through links. They
simply removed that accessibility feature from their page.

------
SlowRobotAhead
> With IE 6’s dominance, it was as if the entire Web was frozen in time.

Hello Chrome. This is why I use Firefox.

> The W3C’s solution was XML, because their solution to fucking everything in
> the early 2000s was XML.

Ha! Man, got that right for sure. XML/JSX is one reason I just chose to avoid
React Native in favor of Flutter, I’ve this avoided XML and would like to keep
that streak going.

------
dionidium
I still have some of my stuff from this era up on the web. The source has all
kinds of CSS hacks called out.

* A two-column layout [http://dionidium.com/design/leftbar/leftbar.html](http://dionidium.com/design/leftbar/leftbar.html)

* A valid XHTML 1.1 version of that layout [http://dionidium.com/design/leftbar/xhtml11/](http://dionidium.com/design/leftbar/xhtml11/)

* Two-column layout with equal heights [http://dionidium.com/design/column/](http://dionidium.com/design/column/)

* My old "default styles" stylesheet [http://dionidium.com/design/default.css](http://dionidium.com/design/default.css)

This was a fun read!

------
mmphosis
IIRC, around the time of NCSA Mosaic, SGML was a developing standard for being
able to do <b>bold</b> <i> _italics_ </i> and <u>underline</u>. I think I like
markdown better but I digress.

Speaking of shady SEO leeches, "Block pop-up windows" was a dominant
preference. In my browser TenFourFox (Firefox), this "off by default"
preference has moved to about:preferences > Content > Block pop-up windows.
But, it doesn't matter because JavaScript has brought back the annoying popup.
At least, popups are constrained within the browser window. uBlock Origin and
uMatrix help to the point where some/many "modern" web pages render as a blank
page.

------
mekane8
Yeah this was a wonderful trip back in time for me too. I graduated high
school in 1999 so I got to spend a couple teenage years playing around with
HTML. I identify strongly with the "copy cool stuff from other teenagers'
sites".

At my first web development job in the early 2000's I did some work with SGML.
I forget now what I was specifying, but I remember finding it really
interesting to be able to understand DTD's. It was like seeing the DNA of
HTML. I also remember the miracles to productivity that were Firebug and
jQuery!

------
m000
This was a redeeming article for me. I remember volunteering with a friend to
update our university department's website back in 1997. The budget for that
was 0, so volunteering sophomores like us was the best they could get. The
result was a more consistent, but still fugly website. I always thought that
this was because we were completely clueless, but now I realize that fugly
websites was the norm back then.

------
lukaszkups
This is something. I remember times when inline styling was the thing. I have
started my journey with web development. Then I left, busy with high school
social life. Then, at the university I came back. And everything has changed:
css files, some crazy JavaScript + jQuery effects etc. And now here we are:
front-end development is heavily focused on JavaScript only, powered by
frameworks. Time flies like crazy.

------
thomasfl
Great article! CSS has become so easy to work with after css flexbox and
various css preprocessors became available. I remember how excited we were in
1995 when we discovered we could use ta les and gif spacers to achieve almost
any kind of page layout for our clients. The web is a big stack of different
hacks that slowly improves over the years. CSS has become wull continue to
evolve for many years.

------
forgotmypw15
If you ever feel nostalgic for using that beautiful thing which was IE3 or NN3
or pre-JS Opera, they're all welcome on my forum website.

------
Andrew_nenakhov
No, I don't miss those days. Making a website look the same in
Opera/Mozilla/IE was an insane challenge. The approach I've found worked best
was going Opera first, then adapt to Mozilla and IE, in that order. That way
the amount of work was minimal. If you did go IE first, ... well, you wouldn't
succeed anytime soon.

------
dehrmann
Considering how repetitive pre-CSS web development could be, I'm surprised a
templating framework for compiling static HTML files didn't catch on. These
days, we have things like Sass, but we also have CSS, so there isn't as big of
a needs as there was in the late 90's.

~~~
giantrobot
It was called DreamWeaver.

------
davycro
Now I remember why Flash websites were popular in the early 2000s. I am glad
css caught up!

------
cfv
CSS layout is, in more than one way, like string semantics in c++. A whole lot
of innovation and a few gross missteps happened there, with the side effect of
pushing everyone and also the language itself forward

------
iamgopal
I wonder what is the energy needs of css vs js vs rendering on morden browsers

------
pier25
Started doing HTML in 97 so this brings a lot of memories like using a lot of
<marquee> and <blink> on my first Geocities site. :)

Nice write up. I also learned a couple of things I didn't know about grids
too!

~~~
bitwize
Ah, <marquee>, the Sonic to <blink>'s Mario.

------
winrid
Cool article. I remember waiting for things like border-radius to have the
prefixes removed too. Also, flexbox has turned my world upside down. Chrome
had just come out when I was learning web dev.

Get off my lawn. :)

------
_ZeD_
>>> [<br />] might lead you to believe that <script/> is an empty <script> tag
— but in HTML, it definitely is not!

? What is "<script/>"?

~~~
ihuman
The script tag can't have an ending slash, so the browser turns it into a
regular script tag. Since there's no closing one, the rest of the website
becomes the content of that script element.

------
wired_devil
Hacker News "webmaster" stopped in 90's.

~~~
timw4mail
And it is better that way!

------
aloukissas
What's hilarious, it's mostly the same "old" css that you still have to work
today for html emails :(

------
mathiasrw
What a great trip down memory lane...

------
unityByFreedom
Then there is _new_ new CSS with styled-components where you don't need
classes anymore!

------
petters
> especially now that flexbox and grid have solved all our problems.

That is certainly not the case. Look at
[https://eev.ee/media/2020-02-css/thumbnail-
grids.html#grid](https://eev.ee/media/2020-02-css/thumbnail-grids.html#grid)

Large gaps of empty space. A manual layout would pack the thumbnails much more
densely.

~~~
csallen
That's because the author intentionally added gaps via "grid-gap:10px" and
changed the alignment via "align-items:baseline". You could easily undo either
of these styles to achieve the desired effect.

------
buboard
for layout , i still think tables did it right, because web is primarily a
grid like newspapers. wish we had a <grid> type of element with responsive
rows and cols, if only to help with vertical alignment and those missing
</div>s

~~~
goto11
Html tables are not all comparable to newspaper columns. Newspaper-style
columns (where text flows from the from bottom of one column to the top of the
next column) can be achieved with the "columns" property in CSS.

But newspaper-style columns are not as useful on the web, since it is really
annoying if the columns are longer then the screen and you have to scroll up
and down. In that respect the web is very different than newspaper layouts
where the dimensions are fixed.

As for <grid>, layout should be specified in CSS rather than through the html
element, which is why we have "display: table", "display: grid" etc. in CSS,
which should do what you want.

------
vhiremath4
lol
[https://twitter.com/eevee/status/1223913737540657153](https://twitter.com/eevee/status/1223913737540657153)

------
mastrsushi
There should be less specialized languages. The web should work more on
mediums like WASM so all supported languages share the same functionality.
Everything CSS can define can be done in full programming languages.

------
mapleboi
such a good read. was always wondering how things went back in the 90s with
internet and web development in particular.

seems like an internet wild west

------
jstewartmobile
Web technologies are barbarianism.

We've been laying out pages for hundreds of years. I suspect that this would
be a much shorter article if Microsoft/Netscape/Opera/et.al had consulted with
experts in that business first, rather than re-invent the entire process from
first principles.

Won't drop any shade on TBL for this mess though. V1.0 seemed more focused on
information access than design.

~~~
goto11
Page layout for print is very different than for screen. It was designers with
a print background which insisted on writing "Best viewed on a 640x480 monitor
with 24bit color. Please maximize your browser window for the optimal
experience" on websites back in day.

Actually I think the designers of CSS consulted traditional print too much, by
adding confusing and useless stuff like "pt" measurements.

~~~
jstewartmobile
Print people at the time had no idea what 640x480x24 even means. That was all
IT dorks and amateur self-styled "designers." (i.e. barbarians)

The Bringhurst book was published 1992. Web tech learned zero from that book.

------
otabdeveloper2
> Still, it was better than tables.

Well, no. Nothing wrong at all with tables.

~~~
goto11
Yes and no, but there is some confusion due to terminology.

There are HTML tables, created with the <table> tag, and then there are CSS
layout tables created with the "display:table" property. Neither are
inherently good or bad, it is just a question of when they are appropriate.

The problem with tables back in the day was that browsers didn't support
"display:table", so the _only_ way to get a grid-like layout was to use the
<table>-tag. In cases when the content wasn't semantically a table, you had a
dilemma. Either you would have to abuse the <table> tag thereby hurting
accessibility, or you would have to use CSS floats and hacks to achieve the
desired grid-like effect. Neither was really desirable.

Today we have "display:table", but we also have flexbox and grid which is are
much more powerful, so the use of tables-for-layout are mostly irrelevant.

~~~
bmn__
> browsers didn't support "display:table"

Internet Explorer on Windows was the singular offender. ISTR that other ones
with at least 0.7% market share were implementing the display property
correctly.

A desirable solution was to just paper over the bugs and other shortcomings
with Javascript:
[https://github.com/seancoyne/ie7-js](https://github.com/seancoyne/ie7-js)

That way one could simply write standard compliant code and not waste any time
with hacks and float work-arounds.

~~~
worik
"Internet Explorer on Windows was"... 90% plus of the market

------
tooker
Netscape ran on Unix platforms.. buggy or not its support was vastly more
important than IE on an ethical level.

~~~
loopbit
I used NN3 and 4 back in the day (and still do, kinda, Firefox is still my
main browser), but man, writing CSS for Netscape was a nightmare!

I still remember that weird bug that forced everyone to create a single,
empty, invisible DIV at the beginning of the page if you wanted to set
absolute positions for the other DIVs in the page.

In Javascript land, we all had our little script to detect the browser and do
things like finding the element you wanted (IIRC, only IE had find by id).

All in all, I miss the carefulness webdevs had to have at the time (I remember
uglifying my files by hand to make everything weight less than 24KB, which was
the self-imposed limit we had at the dotcom I worked at) but, in general, I
don't miss those days at all.

~~~
stan_rogers
NN didn't actually do CSS, it did JSS (Javascript Style Sheets, something
Netscape hoped would fly) with an added translation layer. That meant that you
could only style an element through its hierarchy (since there was no
equivalent of IE's document.all in Netscape's DOM). $DEITY help you if you
were trying to do a hybrid tables/CSS thing, especially with nested tables.

------
pablobaz
Nice article. Surprised it does not mention the acid tests
[https://www.acidtests.org/](https://www.acidtests.org/)

~~~
GlitchMr
Acid1 and Acid2 are kinda legacy. Acid1 is so old that IE6 passes it. Acid2
was mentioned in an article.

Acid3 is kinda... controversial. Its tests were kinda nonsensical and hardly
useful. Some of things it asked for (in particular about SVG fonts) were
implemented minimally, just to pass the tests.

A lot of Acid3 tests involved checking the error code for weird edge cases
specifically, stuff like testing whether `document.createElementNS(null,
"d:iv")` throws `NamespaceError` (browsers these days throw
`InvalidCharacterError`). This isn't really useful for web developers, because
actual websites won't test for edge cases like this. It's to the point where
Servo (a web engine written in Rust) outright asks the user to report a bug in
Servo if unpaired surrogates in DOM are used on a page that isn't Acid3. So
far all the bug reports were for Acid3.

~~~
tinus_hn
> A lot of Acid3 tests involved checking the error code for weird edge cases
> specifically

If the browsers implement these specification details correctly you don’t have
to have all these workarounds that make web development incredibly tedious and
unpredictable. That’s the point.

Of course it’s impossible to predict outright which things are going to be
used and which things aren’t. Otherwise you could just not create a
specification for the useless parts.

~~~
GlitchMr
Not really. A lot of DOM tests involve try/catch, and checking whether the
exceptions are precisely right. Web applications tend to not intentionally
throw exceptions.

Acid3 also tested some other things like SVG fonts. SVG fonts specification
didn't make any sense, browsers were against implementing an under-defined
specification not designed to interact with HTML and Acid3 test authors likely
realized this, because a lot of tests were like: a web browser can do this or
this or this, because we have no idea what the specification requires. You
really don't want a standard like this in a web browser. Web browsers
implemented bare minimum sufficient for Acid3, but literally nothing else.
WOFF won over SVG fonts in the end as it was a better specification, but Acid3
insisted on SVG fonts. Case in point about issues with SVG fonts: what should
`<iframe>` in an SVG font do? The specification won't tell you.

Some other tests also feel weird. For instance, test 86 is literally checking
whether `new Date().setMilliseconds()` returns `NaN`. I mean, that doesn't
seem very useful to me, why would anyone pass no arguments to a setter
intentionally? Official ECMAScript Conformance Test Suite would be a better
place for this test.

What I think is fine in Acid3 is CSS selector tests, the rest is honestly
kinda pointless. I have the same issue with Acid2, the CSS tests in it were
fine, but Acid2 test also decided to include an SGML comments test for who
knows what reason. Web browser vendors were against this test, but had to
support it anyway. SGML comment test broke real world web sites without
providing any real value. Thankfully, this test is now gone from Acid2.

I hope Acid4 won't happen or if it will, it will ONLY have CSS tests and won't
test anything else. Although, it likely won't (thankfully) due to The Web
Standards Project's closure.

