Acid2: Electric Boogaloo

Step into the way back machine and visit the internet circa 1997. CSS Level 1 is the new standard, the wave of the future, promising newer and better ways to create web pages. But browser manufacturers are implementing the standard in a myriad of incompatible ways. So a group called "CSS Samurai" creates the "Acid Test", a test comprehensive, tough test suite that manufacturers can use to ensure their browsers render in a consistent manner.

The Acid test was instrumental in bringing CSS to a usable level in the major browsers. It took some time, but they got there. Now, with the impending release of Internet Explorer 7, plus the rise of Firefox and Safari and the decline of Netscape 4, WaSP, the Web Standards Project, has created "Acid2", to measure and test compliance with CSS2, the next level of CSS.

As they point out, even though the WaSP took the upcoming release of IE7 as the motivation for the new test, it's really designed to test all modern browsers, and at the moment, they all fail in really fun ways. Mozilla-based browsers like Firefox comes closest, with Safari not far behind, but none of them are good.

Nor should they, not at the moment. The test is a maddeningly tough little doozie, designed to make browsers sweat. It's a single page, and when a browser can render it correctly, it draws out a blocky happy face. When we get to a point where Firefox, Safari and IE can all render it correctly, we'll really have some exceptionally capable browsers.

And the good news is, it might be happening sooner rather than later. The test was posted in the last couple of days, and already Dave Hyatt, the big brain behind Safari's rendering engine at Apple, is already hard at work and blogging about it at the same time. If he keeps up this pace, Safari might be the first one to pass it, and I think that's his goal. As a fan of Safari, I'm rooting for him.

I do have one small beef with the test. There's a CSS display property called "inline-block". This doesn't get a lot of attention for some reason, which surprises me. It's one of those things that would completely change the way CSS is used if the big browsers supported it. Right now, to get a similar functionality, web authors have to either over-use the float: properties, or worse use tables. Neither of these workarounds are particularly good, and both of them are incapable of doing the things that inline-block can do. Right now, to my knowledge, only two browsers support it, and that's Safari and, very surprisingly, IE 5 for Mac. I'm hoping that it will get integrated into the test, because having that capability readily available will make a big difference for people who do the sort of work I do, and will result in much nicer browsing experiences for everyone else.

I wouldn't be surprised to see the first Acid2-compatible browsers within the next several months, which is great. Hopefully in a year or two, I can start abandoning some of the hack-ish things that the current state of browsers currently demand.