Web browsers standards support: A question of Chrome
Almost 3 years ago (November 2008), shortly after Google Chrome was released, I decided to test several browsers to see how each faired against well known web standards tests.
This is the result I got at the time:
| Acid1 | Acid2 | Acid3 | CSS3 Selectors | |
|---|---|---|---|---|
| Opera 9.62 | Passed | Passed | 85/100 | 578/578 |
| Google Chrome | Passed | Passed | 78/100 | 578/578 |
| Safari 3.1.2 | Passed | Passed | 74/100 | 578/578 |
| Firefox 3.0.3 | Passed | Passed | 71/100 | 373/578 |
| Firefox 1.5.0 | Passed | Failed | 53/100 | 578/578 |
| Firefox 2.0.0 | Passed | Failed | 52/100 | 578/578 |
| Internet Explorer 8 beta 2 | Passed | Passed | 12/100 | 349/578 |
| Internet Explorer 7.0.6 | Passed | Failed | 5/100 | 330/578 |
| Internet Explorer 6 | Passed | Failed | 4/100 | 274/578 |
| Internet Explorer 5.5 | Failed | Failed | 6/100 | - |
And this is what I wrote back then:
Not really surprised about the results. Firefox became a lot better with version 3, but it still doesn't support all CSS selectors. Chrome as a new browser and with a focus on standards makes a nice appearance. Opera as always very standards compliant. Internet Explorer still as a long way to go to catch up to the other browsers.
Now, after these years, what kind of evolution happened in the web browser arena? These are the results I get today with the latest stable version of all major browsers:
| Acid1 | Acid2 | Acid3 | CSS3 Selectors*1 | HTML5 (max. 450) | |
|---|---|---|---|---|---|
| Opera 11.11 | Passed | Passed | 100/100 | 574/574 | 278 + 7 bonus |
| Google Chrome 12.0.742.100 | Passed | Passed*3 | 100/100 | 558/574 | 328 + 13 bonus |
| Safari 5.0.5 | Passed | Passed*3 | 100/100 | 574/574 | 212 |
| Firefox 5.0 | Passed*2 | Passed*3 | 97/100 | 574/574 | 286 + 9 bonus |
| Internet Explorer 9.0.8112.16421 | Passed*2 | Passed*3 | 95/100 | 574/574 | 141 + 5 bonus |
| Android 2.2 browser | Passed*2 | Almost*4 | 93/100 | 574/574 | 184 |
| Android 3.0 browser | Passed*2 | Almost*4 | 100/100 | 574/574 | 222 + 3 bonus |
*1 The CSS3 Selectors Test now only has 574 tests (previously there were 578). The reason is that some of the tests cannot be performed anymore in the more recent browser versions due to privacy/security reasons. More details can be found on the CSS Selectors Test results page.
*2 There is a slight difference between the reference rendering and the result I get. The "i grow old" phrase occupies two lines in the reference as well as in the other browsers, except these, where it's all in the same line. I will consider them to have passed the test anyway, as the test doesn't give an exact score and it is almost completely correct.
*3 There is a very small difference in the nose size compared to the reference image. The only browser where this is not noticeable is Opera.
*4 The top of the head doesn't show (no black line). A red background appears in the eyes zone.
I added the more recent HTML5 Test, that wasn't available 3 years ago. I also decided to test the Android browsers. Sorry Apple/Windows/Blackberry/whatever fans, I don't have more devices available.
Amazingly, Chrome actually decreased in the CSS3 Selectors Test. I have no idea why, but after running this test again in the Chrome version of the beta channel I get 100% again (574/574).
For the rest of the results, it's quite clear the impact that the browser war that was brought by Chrome has had in the evolution of modern browsers. Almost all browsers now have perfect scores across all tests. The exception is the more modern HTML5 Test.
Of course, these tests are very specific and a browser can be measured by a lot of different metrics, but even if you consider a factor such as speed, all major modern browsers are approaching levels that can be considered almost negligible for users.
This war still hasn't finished and at the pace that major browser vendors are innovating, we can expect a bright future for the web. Chrome keeps adding support for more and more features (such as instant pages and WebRTC for real-time communications - just to name some of the latest) and pushes the bar higher each time. Other browsers don't want to be left behind - they realized the importance of it and are innovating in their own merit too.
