The Problem with CSS is ...

CSS and the Browser Wars

So what kept designers from embracing CSS page layout for so many years? Well, it wasn’t the initial shortcomings of CSS. It was the inability for CSS to grow fast enough to keep up with the needs of web designers.

More specifically, the state of CSS support in web browsers hadn’t kept up.

Even more specifically, Internet Explorer dropped the ball by resting on its laurels while the other major browsers continued their work to improve the layout capabilities of CSS.

Early Browser Support for CSS

Internet Explorer 3, released on August 14, 1996, was the first commercial browser with any support for the fledgling CSS specification. Microsoft released a CSS Gallery, pictured in Figure 1.4, in order to show off some of the new layout control enabled by CSS.

In retrospect, it’s extraordinary just how quickly developments were taking place at this point. Microsoft announced that CSS would be part of Internet Explorer 3 even while discussions were still underway as to which style sheet language should be used on the Web. Furthermore, Microsoft had an implementation of the language in its browser before the official recommendation was published by the World Wide Web Consortium (W3C).

At first, Microsoft’s main competitor, Netscape, took a wait-and-see attitude towards CSS, and focused instead on extending HTML, adding new tags with each release of the browser. For example, Netscape submitted its proposal for frames to the W3C in September 1995, but then implemented the idea in the browser before any real discussion had taken place about the addition.

This continual flow of innovation and drive to push features into browsers was stimulating the Web’s development, and enhancing the agency of page authors and designers. However, the addition of features to a web browser actually entailed changing the path of the Web itself, and two browser vendors attempting to go about it in different ways promised trouble.

The year 1997 saw the launch of the version 4 browsers … and the start of the browser wars.

The Version 4 Browsers

Netscape 4 was released in June 1997, with Internet Explorer 4’s arrival lagging slightly behind in October. Both browsers offered reasonable support for the CSS1 specification, at least where styling text was concerned, and developers were able to begin working with CSS. Developer adoption of the most basic parts of CSS was relatively quick, not least because both Netscape and Internet Explorer 4 included support for Dynamic HTML (DHTML)—using JavaScript to manipulate the Document Object Model of a page and CSS.

Netscape’s legacy as an early web browser was beginning to show. Microsoft had rebuilt its rendering engine for IE4—using the Trident engine, which continues to be used in browsers up to and including IE8—whereas Netscape was adding CSS and DHTML support on top of the existing browser codebase. This meant that as developers pushed the limits of CSS in the version 4 browsers, numerous strange bugs started to emerge.

Internet Explorer began to attract market share away from Netscape; the release of IE5 in 1999, with much-improved CSS support, cemented this trend. By early 2000, IE had pulled ahead to claim over 50% of the browser market share.

Internet Explorer 6 and the Long Sleep

Internet Explorer 6 was released in August 2001, and, with the dominance established by IE5—and the general lack of interest in the new Gecko-based Netscape 6—Microsoft’s ultimate victory was guaranteed in the browser wars.

Internet Explorer 6 was a good browser in its day. Its CSS support was mature enough for persistent designers to be able to achieve most page layout tasks, if they pushed the support to its limits. There were some peculiar bugs, but for those of us who had battled with Netscape 4 for years, they seemed fairly trivial. Microsoft had even released a version of Internet Explorer 5 for the Macintosh, which featured a brand new rendering engine with dramatically better CSS support than any previous Microsoft browser. Meanwhile, the W3C was working to define additions to CSS that promised to make page layout a cinch. The future was bright.

The problem was what Microsoft did—or didn’t do—next. Having produced a browser that made web developers relatively happy, which let them do most of the things they thought they needed to do at the time, and having effectively won the browser wars, Microsoft shut down its browser development and reallocated the team members to other projects. Internet Explorer fell asleep.

Once IE’s hibernation became apparent, many of us thought that the general population would start moving to other browsers. Firefox, based on Mozilla, had come onto the scene, and was more lightweight and robust than Netscape had ever managed. Opera had developed a browser with excellent CSS support and many other features, such as the first tabbed browsing interface. However, the general population saw that blue “e” as the Internet. Microsoft had created Internet Explorer simply as part of the operating system—the part that accessed the Internet—to the point that, even now, many regular web users are surprised to learn that there are other browser options.

Disappointed by Internet Explorer’s stagnation, the web development community took to alternative browsers such as Firefox, and was quick to point out where IE6 was lacking. As Firefox, Apple’s newly developed Safari, and that scrappy upstart Opera improved their browsers with every release, adding the unimplemented parts of CSS2.1 and fixing problematic bugs, the knowledge that IE6 wasn’t being improved to offer the same degree of standards compliance became more and more frustrating to web designers everywhere.

Firefox began to draw closer to Microsoft in the market share race, reaching around 11% market share by July 2007, and showed no signs of slowing down. This increase was partly due to evangelism from the web community, and a strong marketing campaign, but also because of the growing number of security problems reported with Internet Explorer 6. To gain that amount of market share, Firefox’s popularity had obviously spread beyond the web design community. Microsoft responded by announcing in February 2005 that a new version of Internet Explorer was to be released. The first beta version of IE7 became available in July 2005—almost four years after the release of Internet Explorer 6.

Internet Explorer 8 Changes the Game

Microsoft’s announcement that it had resumed development of Internet Explorer attracted the attention of a grassroots organization formed in support of web standards: the Web Standards Project. This standards body saw the opportunity to lobby Microsoft to include the CSS features needed to make page layout achievable by anyone, not just persistent experts. Thus, April 12, 2005, saw the birth of the Acid2 test.

This test was designed to test CSS1 compliance in browsers, as did the original Acid Test. The original Acid Test had been successful in demonstrating the limitations of the browsers of the time, and demonstrating what would be possible if those limitations were removed. This time, the focus was on CSS2. Håkon Wium Lie—the test author (and CTO of Opera software)—challenged Microsoft via a ZDNet article to release Internet Explorer 7 as a browser that reached the tested standards.

At that time, no browser fully satisfied the demands of this test, but Internet Explorer was by far the worst off, results-wise. By the end of that year, Safari, Opera, and the Linux/KDE browser Konqueror had released versions supporting Acid2.

Internet Explorer 7 was finally released on October 18, 2007—without support for the features tested by Acid2. Acid2 support was too great a leap for Microsoft to make in a single release, but it had made significant progress. Some of the truly bizarre bugs had been fixed, and some useful CSS properties from the CSS2.1 specification were now present in the browser. Whether you love or hate the browser, the IE7 release meant Microsoft was back in the game—with a browser that made an attempt to support web standards in a meaningful way.

Meanwhile, developers were actively promoting browsers such as Firefox on their personal sites. Designers would often add little touches viewable only in favored non-IE browsers. The question on everybody’s lips was that if Internet Explorer went back to sleep—now that IE7 had been launched and dealt with some of the biggest criticisms leveled at IE6—would we ever be able to enjoy some of the innovations made possible by a fuller implementation of CSS2.1, never mind CSS3?

Thankfully, the web community didn’t have too long to wait after the release of IE7 before it became apparent that there was another version of Internet Explorer in development. In December 2007, the existence of Internet Explorer 8 was confirmed on the IEBlog. On December 19, a post to the IEBlog confirmed that IE8 rendered the Acid2 test correctly, letting web developers everywhere know that the CSS2 properties we had long wished for would finally be part of Internet Explorer 8.

Once the first beta of Internet Explorer 8 was made available in March 2008, we were all able to see it for ourselves—the smiling face of an Acid2 test pass, shown in Figure 1.5!

An Internet Explorer that offers near-full support for CSS2 opens up vast possibilities. Until now, designers who build sites for mainstream users have had to steer clear of CSS2 features that could make page layout stable, predictable, and a whole lot easier, just because Internet Explorer didn’t support them. IE8 is a complete game-changer.

Our Part of the Bargain

For years, we in the web design community have bemoaned the state of CSS support in Internet Explorer, and the limited (and, in many cases, buggy) set of tools it gave us. Page layout with CSS was a black art that rarely worked perfectly, predictably, or reliably, even for its most experienced practitioners.

After Internet Explorer’s long sleep, Microsoft has finally responded with a browser that passes the Acid2 test, providing us with all the tools we’ve been demanding. With the imminent release of IE8, Microsoft has fulfilled its part of the bargain; now it’s time to fulfil ours.

It’s time for us to abandon the arcane CSS layout techniques we worked so hard to develop while Internet Explorer lay dormant. It’s time for us all to learn and begin using the new CSS, lest Internet Explorer decide the time is right for another nap. It’s time to embrace new ways of web design practice, seizing the new features that IE8 now joins the other major browsers in supporting. It’s time for us to show the beginners who are just now learning to design web pages for the first time that CSS isn’t too hard anymore.

In the next chapter, I’ll show you exactly how one particular CSS feature new in IE8 suddenly makes the most common CSS page layout tasks a piece of cake. You can keep reading by purchasing the book Everything You Know About CSS Is Wrong!, now available through sitepoint.com.

Image credit: Mattox