
CSS: It was twenty years ago today - ggurgone
https://dev.opera.com/articles/css-twenty-years-hakon/
======
cousin_it
> _In my initial CSS implementation in 1995 I used the “SkyBlue” constraint
> solver to resolve conflicting style sheet statements. (By the way, “SkyBlue”
> and “Cassowary” were both developed at the University of Washington.) Having
> a constraint solver allows you to express relationships between arbitrary
> elements and have conflicts resolved automagically. However, things can get
> complex when elements disappear and new ones arrive, like they do through
> DOM operations. Circular dependencies must also be handled gracefully.
> Therefore, the idea of allowing CSS to express layout constraints between
> any elements were dropped at an early stage._

That was the biggest mistake, IMO. John Nagle's comments here [1] express that
point really well:

> _With Dreamweaver 3 and tables, it wasn’t necessary to look at HTML to lay
> out a page. With Dreamweaver 8 and CSS, the page designer must understand
> CSS, HTML, and probably Javascript. That’s was a big step backwards. The CSS
> system is just too programmer-oriented. And I’m a programmer. (Programmer as
> in MSCS from Stanford, the Nagle algorithm in TCP, inventor of ragdoll
> technology, real-time robot vehicle control, not programmer as in “writes
> some Perl”. And my first web site went up in 1995.) It’s not that CSS is
> hard; it’s that CSS is bad._

> _The worst problem with DIV-based layout is that the layout system is too
> weak. There’s no form of “grid” layout. There’s no way to relate a DIV to
> anything but its predecessor, its parent, or an absolute position. The
> system is just too dumb. That’s why people have to stand on their head just
> to get three columns to work. Tables actually are a better designed layout
> system. Table layouts allow table cells which span multiple rows and
> columns. If all tables could do were simple grids of cells, the CSS approach
> might make sense, but tables are more general than that._

[1] [http://www.raizlabs.com/graiz/2006/09/25/ten-reasons-why-
css...](http://www.raizlabs.com/graiz/2006/09/25/ten-reasons-why-css-sucks/)

~~~
blowski
"Any donkey can kick down a barn, but it takes a skilled carpenter to build
one."

What language would be able to support billions of websites coded by millions
of developers, rendered on thousands of different types of media and be easier
to code with than CSS? Until I've seen a working demo of this mythical styling
language, I'll be very grateful for what I've got.

~~~
Someone1234
Unfortunately in the current climate you're unlikely to see someone even try
to develop a competitor to CSS, JavaScript, or HTML.

The problem is that those technologies are all held hostage by at least two
inefficient committees, and enough browser vendors have signed on to that to
make doing anything without their approval near impossible.

So let's say you had a magical CSS replacement which is perfect in every way,
that's ten years in committee which is a back and forward process where they
can effectively force you to alter the design for obscure reasons, and then
even after that you have to convince every single browser vendor to implement
it, and only then FINALLY will it take another ten years for all browsers to
support your new syntax so you can use it freely without worrying about
incompatibility.

~~~
blowski
Part of the achievement of CSS is precisely that they __have __managed to
convince every browser vendor to support it. It has overcome or is strongly
competing with Flash, ActiveX, native apps, PDF, and a lot else.

This magical CSS replacement would have to do that, even if CSS didn't exist.

------
lmm
I think CSS has become the thing it was supposed to prevent. A modern web page
is impossible to render as anything other than a web page; you can't separate
the styling from the content, and if anything the complexity of CSS makes
doing so harder than in the days of font tags and tables. Users were supposed
to be able to override the styles of their pages, but have you ever tried to
do that lately? (e.g. I wish I could make all the fixed-width pages on the web
full-width).

When CSS is being generated by programs, you might as well have those programs
generate inline styles - what would we lose? And we would gain in simplicity.

~~~
userbinator
_Users were supposed to be able to override the styles of their pages, but
have you ever tried to do that lately?_

That probably has more to do with the "appification" of web sites than
anything else, where huge amounts of JS and CSS are used together to produce a
poor imitation of a desktop application. Pages that aren't SPAs are far more
amenable to styling changes, and are often quite readable (or even more
readable) even with all author-CSS disabled.

 _When CSS is being generated by programs, you might as well have those
programs generate inline styles - what would we lose? And we would gain in
simplicity._

I see inline styles as being more of a "one-off" thing, while CSS selectors
can affect many nodes in the tree, so I think both have their uses. The
"simplicity" is offset by the increased memory consumption and overhead of
parsing every inline style, when much of them will be the same. You could
argue that pages could be compressed and maybe browsers could use methods to
identify duplicate styles so they can also compress them in-memory, but why do
all that (i.e. making every client, on every page reload, have to expend the
resources to derive this information) when you can group together common
styles under one selector for which the browser will naturally treat as one
object?

~~~
lmm
Maybe inline is an extreme example - but suppose we didn't allow the selector
syntax, only a simplified form of CSS where the only selector is a single
class, and only allowed one class per element? Then the browser could share
everything it can share today - it still needs to compute the final style for
every element on the page, so the only way it can reuse styling information is
if two elements come out with exactly the same style - but it would be much
easier to see why any given element was styled the way it was, the browser
implementation could be simpler, and our programmatic frameworks for styling
components on the page would still be able to help us avoid repeating
ourselves.

------
VeejayRampay
My exact thoughts on CSS are best summed up by this legendary item :

[http://craphound.com/images/css_is_awesome.jpg](http://craphound.com/images/css_is_awesome.jpg)

------
lsdafjklsd
CSS is problematic in every project I've been on. It takes a lot of effort to
stay disciplined and not just throw stuff in a class namespace that shouldn't
be there. This article [1] by Nicholas Gallagher sums up how I feel after
trying my damnedest to write maintainable CSS in my applications. I'm now
using the Suit CSS [2] preprocessor to enforce strict guidelines to our app's
CSS. It's working well so far.

[1] [http://nicolasgallagher.com/about-html-semantics-front-
end-a...](http://nicolasgallagher.com/about-html-semantics-front-end-
architecture/)

[2] [http://suitcss.github.io/](http://suitcss.github.io/)

~~~
talmand
Your first paragraph suggests the problem lies within your team and not CSS.
I'm sure that's not your intention but that's the way it reads.

~~~
lsdafjklsd
Yea, definitely didn't mean to sound like that. Edited my original post.

------
Kartificial
"What’s your opinion on pre-processors like SASS and LESS? Does CSS have
anything to learn from them?

(...) My own favorites would be nested comments, and single-line comments
(starting with //). When CSS turns 50 I’ll tell you why they were not part of
CSS from the beginning."

Now, this makes me really wonder why single-line comments weren't part of the
spec from the beginning. And I can't wait 30 years... Anyone an idea?

~~~
ggurgone
single-line comments are already supported in the way that are invalid css :)
so if you comment with // the stuff that follow will be ignored. Again, it is
invalid CSS and I am not suggesting that you should use it, just bringing that
up :)

I personally like how single-comments works on pre-processors. They are
ignored at compile time and therefore are a good way to comment on functions,
mixins or anything that won't be compiled to raw CSS.

~~~
phoboslab
Be careful with using // in CSS. It causes some browsers to completely ignore
the _whole rest of the CSS file_ after the line you wanted to comment out
(iirc IE9 does this).

When I want to quickly comment something out (and don't have an editor
shortcut handy), I just put an 'x' in front of the property name. I.e.:

    
    
        xbackground-color: #f0f;

~~~
ggurgone
Yeah, well anything invalid :)

------
Alex3917
If you haven't seen it, it's worth checking out his PrinceXML browser. It's
basically an entire web browser that implements many of the CSS working drafts
way before any of the mainstream browsers. It's designed for turning html/css
into professional quality PDFs, so it implements a lot of the very early print
media related working drafts, e.g. the one for running headers and footers,
and the one for generating a table of contents automatically from page
numbers. Turning analytics data into PDF reports is something pretty much
every big company asks for at some point, and if you're willing to spend the
time learning all the w3c specs then it's actually pretty viable.

------
unknownBits
CSS is pretty embarrassing if you ask me. Maybe it was suitable for simple and
small document styling for total noobs, ok, but as a standard for web
development it's rediculous and sucks all the way... And the worse part? They
are still adding to it instead of giving up and leaving it as it is.

We desperately need a better standard, more in the direction of QML, so you
can also talk with a lower level language. If you come from a systems
programming language and you want to design a UI with CSS, well, good luck! It
will suck all the joy out of your work. Center some text or a div? well buckle
up for some fine days of f@*$ing around with position: relative; or position:
absolute; margin: 0 auto; text-align: center; ? It all depends on the
situation, and if one thing changes, your whole design is gone.. ..it's
pathetic.

------
LeoPanthera
Great story. I have yet to think of a valid reason why "box-sizing: border-
box" should not be the default. It goes into every CSS document I've ever
written.

~~~
freshyill
Then you probably haven't been writing CSS for very long. Its support is quite
recent. border-box is a much smarter default, but they'd break a lot of old
sites by changing the default behavior.

~~~
LeoPanthera
Correct, only a year or two.

~~~
freshyill
It's funny—back in the day when IE 6's box-model did it more like this (it was
really margin-box, which still doesn't exist and probably never will), I used
to say that IE's model, _while incorrect_ was superior. And people would
disagree with me vehemently. Now, people swear by border-box, which is much
more like the old incorrect IE box-model (for good reasons). But it's funny
how anti-IE sentiment overruled common sense.

------
nanoscopic
I was looking for the following points when reading through this interview:

1\. A mention of the box sizing model ( which is imo the core of CSS )

2\. Following that, a mention of the double margin IE bug. Nope; but there was
vague mention of browser differing in spacing.

3\. Mention of the fact that nothing can be changed because browser vendors
don't get along and refuse to change stuff in any meaningful time-frame
regardless of the specs. Wasn't disappointed.

4\. Mention of SASS/LESS. It's there.

5\. A statement along the lines of "CSS is obviously wonderful because it's
still around. It will be around forever." Got it.

6\. Mention of the need for a way to do paging properly. Yay.

Pleasantly surprised by:

1\. Mention of the Acid tests.

2\. Mention that single line comments are desirable. Why still not there???

Unhappy with: Hatred for IE conditional comments, web fonts, and the video
tag. ( but confused since he advocated for both web fonts and the video tag??
)

All in all an interesting read.

~~~
jcampbell1
> Unhappy with: Hatred for IE conditional comments, web fonts, and the video
> tag. ( but confused since he advocated for both web fonts and the video
> tag?? )

The question was "what would you banish? what would you add?"

His response was like:

Banish: Conditional Comments Add (past): web-fonts, video tag Add (future):
Pagination.

I was confused as well, and had to read it like 4 times until it made sense.

------
jcampbell1
As far as I can tell there are three opinions on CSS:

1) CSS is a single-pass layout programming language. It is impressive, but the
single-pass constraint makes certain layouts very difficult to achieve.

2) CSS should be replaced with a constraint solver. Look how powerful Auto-
Layout in iOS is. With a constraint solver, you are only limited by your
imagination and intelligence, not some single-pass rule.

3) CSS sucks because people think visually in terms of grids and boxes, and it
is too hard to do even the simplest thing with a single pass layout language.

I am personally in Camps 1 & 2, but Camp 3 is by far the most vocal.
Constraint solvers are powerful, but they require a huge amount of thinking,
and you end up with stuff like '==|50[x(30)]<=|==' as the interface.

I think the "flexbox" stuff is pretty good as it is an attempt to accommodate
both groups 2 & 3.

------
gprasanth
The CTO's setup:

[http://hakon.wium.lie.usesthis.com](http://hakon.wium.lie.usesthis.com)

------
talmand
Somewhat interesting but not very thought provoking. But some of the history
of how it came about was nice. After all, he didn't even answer the question
about using a magic wand to banish features of CSS. The first two paragraphs
are browser features and the third paragraph speaks of adding features.

Which brings up an interesting point to me, even the creator of CSS provides
non-CSS complaints when asked what's wrong with CSS. A great deal of the
dislike and hate towards CSS seems to be so misplaced.

But I even do the same thing. When asked what I think is wrong with CSS my
response is all the designers out there that continue to insist on designing
web pages as if they were print designs for a magazine.

------
bibonix
CSS seems to be one of the worst designs in IT industry, isn't it? See
[http://www.zazzle.co.uk/css+is+awesome+mugs](http://www.zazzle.co.uk/css+is+awesome+mugs)

------
digitalcreate
It's 2014 and browsers are only now starting to add native support for CSS
variables. CSS would be so much easier and cleaner if it supported conditional
logic (for layouts) and more powerful variables.

------
webnrrd2k
I think they should have cloned HTML tables and called it <layout> or
something. It's certainly not perfect, but it would have been an easy way to
solve a lot of problems.

I know it violates the strict separation of style and content, but how well
has _that_ actually worked out?

(This is me just being cranky -- I've done a bunch of typesetting resume's and
such when I was younger -- so having tabs work like they used to on old
typewriters, where you set them to a defined distance from the left, would
have solved a bunch of problems, too.)

------
grokys
> I believe that the CSS code we write today will be readable by computers 500
> years from now.

Well, good luck with that one! I wonder if he seriously believe computers in
500 years time will actually resemble our computers in any way? Or was it a
throwaway comment? I hope for the sake of his sanity it's the latter!

~~~
Touche
Not sure what you mean. Are you suggesting everything produced today will
simply be thrown away? There will be much better computers 500 years from now,
but people will still want to see content created in the early days of
computers (if only to giggle).

------
Sharlin
Very interesting to learn that what we now call "responsive layouting" was
already proposed in the original document. Of course, at the time the proposal
was written the original "the user agent has the final say of rendering
decisions" philosophy was still going strong, before the years of rigid pixel-
size-everything, "requires 1024x768 or more" mentality borrowed from the print
world.

Also, I'm glad that the percentage-based weighted-average influence system did
not make it into actual CSS :)

~~~
exodust
I don't think rigid pixel-size-everything was a "mentality", so much as a way
around the lack of min and max-width we didn't have until CSS2. 100% width
websites looked bad.

Rigid made sense. Economical to make and most of your visitors were 800 x 600
and above for many years. Fixed width sites still look and function well on
tablets in many cases.

Absolute positioning rocks! I like it's predictability.

Funny that he said he doesn't like conditional comments! "Bad for web
standards". Agreed.

------
yuhong
Notice the proposal date back to when Mosaic Netscape 0.9 was released!

------
danielweber
I remember printing up the CSS rules, studying them instead of paying
attention in class, and then implementing them on my website...

...only to have all the CSS in the <head> get rendered by the popular browsers
of the time, and friends tell me that my webpage was broken and that if
employers saw I couldn't even make a website I'd never get hired.

Fun times.

------
minikomi
Who else is having a "bad css day"? Just spent a few hours nailing down font
rendering differences across Internet Explorer versions. Ended up using a
combination of conditional statements & weird ms-specific media queries. CSS.
Fun for the whole family.

~~~
matthewmacleod
Is that really a CSS issue?

~~~
talmand
I would say it is not.

------
hrish2006
I've never met anyone who likes CSS. Sure, I write it, the people I meet write
it and it's unavoidable but it's little more than a necessary evil, as nothing
else works on the web.

------
Raphmedia
Is it's birthday really today? I had heard December 17, 1996 which is 17 years
ago... ?

------
dsego
He's happy with CSS? I'm gonna shoot myself.

~~~
broodbucket
Regardless of whether you like the technology or not, it's used in virtually
every modern computing platform. I'd feel pretty damn good about creating
something like that.

~~~
rplnt
The guy who created comic sans doesn't agree :)

------
CmonDev
It's a legacy language now. Time to let go.

~~~
cookiecaper
What has replaced it?

~~~
crimsonalucard
Nothing, unfortunately. I guess he means it's been around to long and it's
based on flawed design principles.

~~~
CmonDev
Yes, I hate the ceremony. Oh the sacred ancient language that is so standard
we can never touch it because Open Web!

------
Mithaldu
Ah yes, the beginnings of Opera, when they had a management that was
interested in great technology; before it was exchanged for a management
interested in profits.

~~~
davidw
Perhaps the alternate universe ending is "before it went bankrupt".

~~~
Mithaldu
Nah, you can look at their financial reports that Opera 12 was still providing
good profits on the desktop WHILE they were working on making Chromera 15:
[http://www.operasoftware.com/company/investors/finance](http://www.operasoftware.com/company/investors/finance)

Once they were able to fire most of their dev staff though they made more
money with the Chrome clone.

------
trumbitta2
Sgt. Pepper taught the band to play...

Downvote me, I couldn't help it.

~~~
garethadams
Maybe you could read at least the first paragraph of the linked article.

~~~
trumbitta2
Maybe I love The Beatles and can't help completing that immortal verse.

Only THEN, I will read what it's there to be read by one of my myths: Bruce
Lawson.

