A brief history of CSS
CSS. What’s the deal?
Why is everything in boxes?
Why is it so hard to make dynamic pages?
Why does my div slightly overlap in Firefox and not in Chrome!?
What the hell is specificity?!
If you’ve created anything on the web in the last 20 years and you’ve tried to make it look even slightly nice looking, you’ve probably found yourself frustrated with CSS. CSS has been around a long time — about 23 years — at this point it’s living with its parents and applying to grad schools. And while it has worked well enough for a fairly long time as far as technology tools go, a lot of its original logic just doesn’t really make sense anymore. Unless you really know your way around CSS it can feel a little bit like a black box, I still find myself slapping on styles, refreshing and hoping for the best.
One thing that has helped me get a better hold on CSS was looking up the history behind it. When I’m trying to learn a tool or a framework, it helps me to think about the original problems the tool was trying to solve. Knowing what the author(s) were attempting to create helps me understand the original design. And knowing the original design gives me an opportunity to understand the tool and not just memorize how to use it. So I looked into how CSS got started…and like a lot of programming from the 90’s it all started with an incredibly long email thread.
“In fact, it has been a constant source of delight for me over the past year to get to continually tell hordes (literally) of people who want to — strap yourselves in, here it comes — control what their documents look like in ways that would be trivial in TeX, Microsoft Word, and every other common text processing environment: “Sorry, you’re screwed.” -Marc Andreessen (co-founder of Netscape)
The message is available from the archives at http://www.webhistory.org/www.lists/www-talk.1994q1/0648.html
It’s 1994, the web is gaining stamina, and primarily being used for online publishing. One major component still missing is a tool to style pages. In the early days of the web, there was debate about who should be styling the web page — the viewer (really the browser) or the publisher. Many of the early browsers (NeXT, Viola, Harmony browser) had their own way of determining styling with a simple stylesheet. On the other hand many authors were complaining about not being able to style their content. A lot of the original web pages were thought of as online published documents and the web in general as a form of online publishing. In the physical publishing world, the author has complete control of the style and view of the page. These ideas conflicted and there was somewhat of a standstill on who should own and control styling.
This issue is really what projected CSS into the center of early styling discussions, and set it apart from the other style tool proposals. In 1994, 3 days before Netscape was made available as a browser, Håkon Wium Lie published the first draft of the Cascading HTML Style Sheets proposal. The proposal took into account that neither the author nor the reader could completely control the style of the document on their own, their styles needed to be combined, or cascaded in some way. After a lot of debate, with Microsoft signaling they would support CSS in their browsers, it was selected by W3C as the recommended styling tool for the web.
This debate about who should own styling is ultimately why CSS won out, it had a plan for how to combine styles. Although the original proposal had some strange logic for the cascading part of CSS…
The general idea for cascading styles stuck and ultimately it’s what led us to CSS specificity. There needed to a way of combining styles and deciding whose style takes priority.
Another result from this same debate about author vs reader, is the browser style inconsistencies we deal with today. Authors might write the CSS but browsers are still free to interpret what each style means, which has led us to something like this:
nav {
background-color: red;
background-image: url(gradient-slice.png);
background-image: -webkit-linear-gradient(top right, #A60000, #FFFFFF);
background-image: -moz-linear-gradient(top right, #A60000, #FFFFFF);
background-image: -ms-linear-gradient(top right, #A60000, #FFFFFF);
background-image: -o-linear-gradient(top right, #A60000, #FFFFFF);
background-image: linear-gradient(top right, #A60000, #FFFFFF);
}I actually got this example from the W3 website in the article titled Optimizing browser content-the RIGHT way.
And what about ALL THE BOXES?!?.
Why is everything in a box? Remember how I mentioned much of the early web was thought of as online publishing. The box model seems to have been inspired by the newspaper print style. In fact, Håkon had previously worked on personalized newspaper publishing at MIT Media Laboratory. CSS was not made with complex and fluid designs in mind but for much simpler layouts of texts and pictures.
When Håkon created the tool he had the content — the HTML in mind. Håkon, along with encouragement from Dave Raggett, who was creating HTML 3.0, both had the foresight to realize that HTML needed to be merely text based and kept separate from styling to keep it standard across all browsers. He says “the primary reason for doing CSS wasn’t really to do cool presentation — it was to save HTML.” So while we might struggle to create flexible and fluid layouts today, CSS did nail its original designs: to create simple editorial style layouts and to make “sure we had a text-based, semantic-based language underneath there.” Håkon credits the success of HTML becoming the agreed upon standard to the creation of CSS.
So maybe CSS is a little frustrating, and maybe it’s a little tough to deal with it, but it solved a lot of difficult problems and ended a lot of ridiculously long email threads and so if it did all that doesn’t it deserve a little more respect?! I certainly think so, and so does the CSS working group in W3. They meet 4 times a week, its members from all over the world pushing our little CSS to be better and better.
CSS and I thank you for your time and support. Got any other interesting historical tidbits about CSS? Let me know in the comments!
Most of the information for this article was taken from W3 and this interview with Håkon Wium Lie.
