I’ve always felt like I haven’t learned CSS well (and probably have), heard about the history of JS a lot, but didn’t seem to know anything about the history of CSS. While history may not be useful for actual development (unlike Flexbox, so Grids can be used immediately), I always feel that this is also the soft knowledge a front-end engineer should have. Therefore, when you see the original English text of this article, you will have the impulse to translate. I hope you can have a harvest after reading it.

The text of the translation is as follows:

HTML and CSS are so inextricably linked that you might think they go together. In fact, for years after Tim Berners Lie invented the Internet in 1989, there was no such thing as CSS, and the original version of the Web didn’t provide a way to decorate a web page.

Buried deep in the WWW mailing list was an obscure E-mail written in 1994 by Marc Andreessen (co-developer of the later famous Mosaic and Netscape browsers). In that email, Andreessen pointed out that since there was no way to decorate a website through HTML, when he was asked about visual design, the only thing he could tell web developers was “Sorry you’re screwed.”

But then, just 10 years later, CSS was fully adopted by a modern Web community. Let’s see what happened along the way.

The Web is looking for a markup language

There are many theoretical ideas about how the Web should be laid out. However, this was not a priority for Berners Lie, and most of his employers at CERN were only interested in the web, so their main focus was on the web. However, developers in the community have come up with competing web layout theories, most notably from Pei Yaun Wei, Andreesen and HakonWium Lie.

When Pei-Yuan Wei created the graphic browser Violaww in 1991, he integrated his style language into the browser he developed, with the expectation that his style syntax would eventually become the web’s official style standard. Although this goal was not achieved, his style syntax did provide some inspiration for other style grammars.

Andreessen, meanwhile, tried something different with his Netscape browser. Instead of creating a separate markup language, he took the approach of extending HTML tags to include non-standardized HTML tags to decorate web pages. Unfortunately, it didn’t take long for the page to lose all semantematization and look like this:

<MULTICOL COLS="3" GUTTER="25">
  <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>Copy the code

Developers quickly realized that such an attempt was hopeless. The random Web community has produced many other alternatives, such as RRP, a style sheet language that uses abbreviations very succinct; PSL96- a language that supports functions and state statements. If you’re interested in seeing exactly what these languages look like, check out Zach Bloom’s excellent comparison article.

The language that was finally adopted was the style Grammar proposed by Hakon Wium in October 1994. It’s called a cascading style list, or CSS for short.

Why do we use CSS

The main reason CSS won out was its simplicity, which is even more obvious than its contemporary competitors. The syntax of the early CSS was as follows:

window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%Copy the code

CSS is a descriptive programming language. When we write CSS, we don’t tell the browser exactly how to render the page. Instead, we write out the rules that describe the HTML document one by one and let the browser handle the rendering. Given that the web is mostly built by amateur programmers and ambitious hobbyists, CSS follows a predictable, inclusive format so that anyone can easily use it, which means that CSS works even if some of the syntax is wrong, which is a feature rather than a bug.

CSS is also somewhat unique in that, as its full name style cascade describes it, CSS supports cascading styles. Cascading means that styles can inherit and override other styles previously defined by following a particular rule, and CSS supports the use of multiple stylesheets on the same page.

Notice the percentages in the original CSS syntax above? This is actually a very important point, Lie believes, because users and developers may define styles in different ways, and the browser acts as an intermediary between the two, negotiating differences to render the page. The percentage above represents the weight of the style, and the lower the weight, the easier it is to override. When Lie showed CSS for the first time, he even added a slider to switch between user-defined and developer-defined styles in the browser.

In the early days of CSS, this led to a big debate, with some arguing that developers should have complete control over styles and others arguing that users should have some control. Eventually, this percentage was removed to provide a clearer coverage rule, but this is why the concept of weight is supported in modern CSS.

It wasn’t long before Lie released his original proposal, and he found a collaborator in Bert Bos, the developer of the Argo browser, Bos, who also specified a style language compatible with his browser, which was then partially incorporated into CSS. The pair then developed a more detailed standard and turned to the W3C, the new HTML-creating working group, to promote it.

After years of effort, by the end of 1996, the CSS syntax looked like this:

html {
  margin-left: 2cm;
  font-family: "Times", serif;
}

h1 {
  font-size: 24px;
}Copy the code

CSS was born.

Browser trouble

At the time, since CSS was still a draft, Netscape’s browser focused on expanding HTML tags, using multicol, Layer,blink tags and the like. IE has adopted some CSS standards piecemeal, but their adoption is very partial and sometimes wrong compared to the standard. This means that after five years of official recommendation, there is still no browser that fully supports the early CSS standard.

The first full compatibility came from an unconventional place.

When Tantek Celik joined the Mac version of Internet Explorer in 1997, his team was very small. A year later, his team had been cut in half and he became the team’s rendering engine leader at a time when Microsoft’s browser team was mostly focused on Internet Explorer for Windows, but thankfully the Mac team was focused on their own devices. Starting with Internet Explorer 5 in 2000, Celik and his team decided to focus on CSS compatibility that no one else had yet focused on.

IE5 for The Mac took the team two years to develop, during which time Celik communicated with W3C members and Web developers using the same devices, and the IE-for-Mac team gradually validated all aspects of CSS. Finally, in March 2002, they released Internet Explorer 5 for Mac, the first browser to support full CSS level 1.

Document Type Switching

Remember, we mentioned earlier that THE Windows version of IE also added CSS support, but their implementation had some bugs and the box model they used was different from the standard. The Windows joint model includes attributes such as border and pading in the total width and height of the element, while the standard requires that box-sizing be set to determine whether it is added to the width or not.

Celik knew that for CSS to function properly, these gaps had to be reconciled. He talked to Todd Fahrner, an advocate of CSS standards, and came up with a document type switch you’ve probably seen before:

<! DOCTYPE html>Copy the code

This is the modern HTML5 way of writing it, but in the past, writing document types was a bit cumbersome, as shown below:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">Copy the code

Here is an example of compliance, where -//W3C//DTD HTML 4.0//EN is the key point. When a Web developer adds these to his or her own web page, the browser knows that the page will be rendered using standards Mode and that CSS will parse in accordance with the specification. If the document type is lost or out of date, the browser switches to ‘Quirks Mode,’ rendering the content based on the old box model, using the nonstandard parsing of the old browser. Initially, some developers even tended to intentionally set weird mode to get support for the old box model.

Eric Meyer(sometimes called the father of CSS) once said that document type switching saved CSS. He may be right, but without document type switching, CSS would still need to be written with a variety of tricks to achieve compatibility today.

Box model hacks

Separately, modern browsers work well with older sites when switching document types, but older browsers don’t work well with newer sites (IE is the main reason for this). Check out the Box Model Hack and you’ll see that Celik uses a very rare CSS property called voice-family to trick browsers into adding multiple widths and heights to a class. Celik recommends that developers put the old box model syntax first, then add a} to the voice-family property to close the tag, and then write the width that matches the new box model, as shown below:

div.content { 
  width: 400px; 
  voice-family: ""}""; 
  voice-family: inherit;
  width: 300px;
}Copy the code

Voice-family is not recognized in older browsers, but it parses defined strings, so when additional} is added, the browser stops parsing before reading the second width. This approach is simple and effective and has led many Web developers to adopt the standard pattern.

A pioneer in standard design

In 2001, Microsoft released Internet Explorer 6, which ultimately proved to be a major stumbling block for Web developers, but it actually brought in some pretty impressive support for the CSS standard, and it did a good job of popularizing CSS considering that it ended up accounting for as much as 80% of the market.

Standards are there, browsers are there, CSS is in production mode. What is needed now is for people to start using it.

Just because the Web has lacked a standard style language for the past decade doesn’t mean developers have stopped developing, they have actually developed a series of browser Hacks, such as table-based layouts, introducing Flash and doing things THAT HTML can’t. Standards-compliant CSS designs are a new trend, and the Web needs pioneers to embrace them.

Two websites have been redesigned using CSS, and they came out just a few months apart. Wired first launched its OWN CSS-BASED website, followed shortly after by ESPN.

Douglas Bowman is the head of The Web design team at Wired. In 2002, Bowman and his team found that no major web sites were using CSS in their development. Bowman felt it was his obligation to the Web community to reuse the latest compatible HTML and CSS to develop Wired. He pushed his team to design from the ground up, and in September 2002, they launched the redesigned site.

ESPN launched their own redesigned site just a few months later, using CSS standards on a much larger scale. These sites bet on CSS and even adopted some CSS technologies that were not considered promising at the time. But all the effort has paid off, and if you ask the developers involved in the refactoring, they’ll probably tell you all about the benefits of the new standard. Higher performance, easier to change, easier to share, and most importantly, CSS is Web-friendly. Wired initially even changed color themes daily.

If you look at the refactored code now, though, you’ll find some hacks. For example, the Web still only supports several displays of different sizes, and you might find that both sites use fixed-width columns combined with relative and absolute positioning for layout, with images being used instead of text. Despite these flaws, these sites set the stage for future development. They are worthy pioneers!

CSS Zen garden and semantic Web

In 2003, Jeffrey Zeldman published his book Designing with Web Standards, which has since become a handbook for Web developers learning about CSS Standards. The book strips away some of the legacy techniques and tricks of CSS, and most importantly helps Web developers see the scope for styling CSS. A year later, Dave Shea released CSS Zen Garden, which encourages developers to separate HTML from CSS. It also showcases the latest tips and advice, along with long-term explanations to convince people that it’s time to adopt standards.

Now, slowly but surely, CSS is getting more advanced and adding new properties, browsers are racing to implement new standards, developers are implementing new features in their own projects, and CSS has become the de facto standard. Just as it claimed long ago.

Useful links

  • A Look Back at the History of CSS
  • Link to this article on my blog