The CSS3 Wars

Remember the browser wars in the 90s? Then Netscape and Microsoft were engaged in a pitched battle for dominance of people accessing the Internet by enticing them with widely divergent implementations of HTML. In many cases you had to produce two completely different code bases to handle Netscape Navigator and Internet Explorer. To call it a developer’s nightmare would be mild. It seemed that the two companies could not agree on anything except to do things differently. Microsoft adopted the policy of bundling IE with their Windows operating system. It thus because the default browser an all Windows PC. They then cut a deal with Apple to make IE the default browser on the Mac. This effectively cut off Netscape from new users and directed the masses of people who were buying computers to access the Internet to use IE. Netscape basically curled up in a corner and died a slow death. In the early stages of its decline, Netscape had dedicated major resources to developing a new version of Netscape Navigator, one that would surpass IE. At the time the shipping version of Navigator was 4.8. Because the new version was to be so revolutionary, they changed its version to 6, skipping 5. By 1999 IE5 had become the dominant browser.

In 1998 Netscape opensourced their Mozilla project, as the new browser was called internally. In all, it took for four grueling years for Netscape to ship Navigator 6. It was bloated, but it was the first implementation of advanced CSS, DOM and JavaScript that would become the basis for the standards endorsed by the W3C. But Microsoft shortly thereafter shipped IE6. Enterprise workers rallied to IE6 and created Web sites that required it. Netscape continued to languish. In 2002 some enterprising developers took the opensource code for Navigator 6 and created a standalone browser that was lithe and fast. It would eventually be named Firefox. Shortly thereafter Apple came out with the own browser called Safari.

After the demise of Netscape, Microsoft disbanded their IE team and sat on their haunches. They mistakenly assumed no one would ever give up IE for another browser because the Web was being developed to be compatible with it. But the mere existence of Navigator 6 sparked intense interest among Web developers and designers, the prospect of tableless layout based on CSS. People began exploring the numerous bugs in IE6 and found ways to give one kind of CSS to it while using the cleaner, more elegant CSS for Mozilla browsers. It was finally possible to break out of the constraints of nested tables to create complex and sophisticated layouts.

At first, all the innovation in CSS was coming from the Mozilla/Firefox crowd. In time, though, Apple saw it in their strategic interest to have an opensource and powerful platform for Web applications. They opensourced their browser, calling it Webkit, and put resources in add advanced CSS features to it. Meanwhile Microsoft realized that a lot of people, actually, practically anyone who did Web develop, were criticizing IE6 for it’s innumerable bugs and bad implementation of CSS. There was a grass roots movement to dump IE, and it was gaining marketshare. Microsoft reconstituted the IE team and put them to work to fix some of the more egregious bug, but not all of them. Thus they shipped IE7, somewhat less buggy than IE6, but years behind Firefox and Webkit. By this time Apple had released its iPhone and iPod touch, which used Webkit as the rendering engine. And Google began building their own browser based on Apple’s Webkit.

Apple’s Webkit team had pushed the petal to the metal, pushing advanced CSS3 features into the browser at a dizzying pace. Whereas previously Firefox had been leading the charge in pushing advanced CSS, this crown had been snatched by the Webkit team. Seeing more and more users abandoning their browser because of its poor support for Web standards, Microsoft again decided to fix more bugs, releasing IE8 that could finally render CSS the way Opera, Firefox an Webkit had been able to do years previously. At this time the Webkit browser took over the Mobile space, dominating with the iPhone, iPod Touch, Palm Pre, Android and Nokia phones. Mobile Web development was Webkit development. Maybe this caused some envy in the Mozilla camp. Probably the release of Google Chrome, a browser based on Apple’s Webkit that rivaled Firefox for geek attention and respect, cause a change in mood in the Mozilla camp.

Seeing Firefox being left behind by Webkit’s push to implement advanced CSS3 features, they needed to play catch up. However, they sometimes chose to implement things differently from Webkit. They always had their reasons, but if Webkit had already implemented a feature and had submitted it to the W3C as a recommendation for standardization, why would the Firefox camp need to implement something different and they campaign to get their implementation accepted for standardization? This means that now we have write different CSS for border radii, CSS gradients. In general, the Webkit implementation is slightly more flexible than the Firefox version, though also more verbose. And now Microsoft has come back. As consumers and enterprise users continue to abandon IE, Microsoft is hard a work on IE9. They claim it will have full support for HTML5 and CSS3. If you go to their IE9 main page they have a graph of browsers’ performance with a suite of CSS3 test. Only IE9 passes these test 100%. All the other browsers fail miserably. Only one thing, this test suite was made by the IE team. That’s like students make up and administering their test to themselves. At the moment, as of beta 2, they only have support for borer radius, and that is implemented poorly with noticeable artifacts on the curves. From looking at what they have said they will support, it looks like once again Microsoft will release the most advanced version of IE that will at the same time be years behind other browsers. What scares me the most is that on their site the IE team discusses on videos that they looked at how everyone else was doing CSS3 and didn’t like their implementations. So they are going to do it their way. That means that whatever they implement will not look the same as other browsers, yay!!! We love cross-browser compatibility. So, between IE9, Firefox and Webkit, oh, and Opera, expect to be writing multiple versions of the CSS to accomplish the same thing in the different browsers. We are in the midst of the CSS3 Wars.

One thing to be aware of, in the mobile space there is but one browser and it’s Webkit. We’re talking about iPhones, iPod Touches, iPads, Android phone, Chrome OS, Palm Pre, and the new BlackBerry OS 6. That’s basically the entire smart phone, mobile device market there. This means that the Webkit code for everything will persist in developer usage and mindshare regardless of what Mozilla and Microsoft do. While desktops are not going away anytime soon, all growth and new momentum is in the mobile space. Webkit owns the mobile space. If you want to support Web anything in that space, you better be proficient in Webkit. Will the W3C force the Webkit team to adopt CSS3 standards pushed by Microsoft and Firefox? Maybe, but considering how Steve Jobs is pushing back against Flash, maybe not. My gut feeling is that in the future we’re going to have to deal with a fragmented implementation of CSS3 standards forcing us to write multiple instances of CSS3 to work across different browsers, the same as we’ve always done.

About Robert Biggs
Front end Web developer skilled at creating interactive, dynamic interfaces using HTML5, CSS3, JavaScript, SVG. Passionate about developing awesome user experiences in the mobile space.

Comments are closed.

%d bloggers like this: