HTML5 Readiness : A visualisation of HTML5/CSS3 browser support

by deepakjois • 16 years ago

39 20 16 years ago

Rust• 16 years ago

Interesting presentation, mostly well done :)

It would be easier to read if each spoke kept each browser colour in the same space. It's much easier to quickly memorize and patrec spatial relationships than colour relationships. If "light blue" (FF 3.5) was in the same location on every spoke, this would be much more useful.

judofyr• 16 years ago

Paste this into your console, and it should align correctly:

    var b = ["ie7","ie8","ie9","ff35","ff37","op","sa","ch"];
    var rays = document.getElementsByClassName("css-chart")[0].children;
    for (var i = 0; i < rays.length; i++) {
      var ray = rays[i];
      for (var j = 0; j < b.length; j++) {
        var curr = ray.children[j];
        if (curr.className != b[j]) {
          ray.insertBefore(document.createElement("b"), curr);
        }
      }
    }

roblocop• 16 years ago

It interestingly scales up and down when you use your mouse wheel over it.

I'd also make the CSS3 category color something other than a yellow that close to the Safari 4 color.

btw0• 16 years ago

The page looks great, but for the purpose it's less intuitive than a plain table IMHO.

w1ntermute• 16 years ago

For those interested, this information can be found in table form on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(H...

ryanjmo• 16 years ago

Welcome to HTML5! Completely overdone graphics with no usability (for a while anyway).

treyp• 16 years ago

really? can't the same be said about any language with graphics support? it's not a consumer-facing product; it's a language. it's what you make of it.

Timothee• 16 years ago

I'd even go as far as saying it's barely usable at all.

You can't tell anything from it at a glance; you have to hover each "ray" one by one to know what it's about, and then most probably for at least the first 5 or 6 times look at the top left to know what browser each color represent; and you're supposed to know what each feature presented actually mean.

nimbupani• 16 years ago

The intention of this visualization was to show how much support exists for a particular HTML5/CSS3 feature among the 8 browsers, but not which specific browser supports which feature, which are already covered well here: http://whencaniuse.com

Qz• 16 years ago

Why not aim for a visualization of both?

gibsonf1• 16 years ago

I like the presentation idea, but it should be inverted, so that browsers that have most features would be the innermost ring and create a nice consistent ring around. The outliers in providing features than would become graphically that as well, outliers.

deepakjois2• 16 years ago

This is a nice idea : http://github.com/paulirish/html5readiness.com/issues/closed...

ygd• 16 years ago

Imagine the ultimate irony if it were written using Flash.

iamwil• 16 years ago

terrible to use to make comparisons.

jrw89• 16 years ago

Tut tut tut, poor/non-existent support for 1024x768 monitors. The worst fact is the page hijacks the mouse scroll so it took me a few reloads and zoom-outs to realise there was some really bad placed text at the bottom

jackowayed• 16 years ago

The fact that even IE 9 is missing several important things, like the SQL db and Canvas, is ridiculous. I guess it's early-stage enough that they might add more. If not, I think IE might finally die when people see all these cool HTML5 near-desktop-quality webapps that say "just download Chrome or FF and you can use me."

deepakjois2• 16 years ago

Wow, looks like people are out with their claws over what is just a simple, fun experiment with CSS transforms.

FWIW, if you dont like it you can try tweaking it yourself : http://github.com/paulirish/html5readiness.com

andrewcaito• 16 years ago

If you were curious about what this looks like in IE8 http://i41.tinypic.com/24eatud.png

MDX• 16 years ago

I think that HTML5/CSS3 may bring back the days of useless animations, horrible text effects, and web pages plagued by usability problems due to the implementation of "features" for the sake of novelty that we had the "pleasure" experiencing in the 1990's.

I'm looking at all those novices out there that use Expression/FrontPage/Dreamweaver as their environment of choice for writing HTML once those WYSIWYG tools begin to incorporate HTML5/CSS3 into their toolkits.

The rest of us will make good use of these new features and only implement them when it makes sense. Sadly, many unprofessional elements within the web design community will be all too eager to show off their newfound "sKiLLz".

bluebird• 16 years ago

Perhaps this is a good example of what E. Tufte calls "chartjunk" in his book "The Visual Display of Quantitative Information".

HTML5 Readiness : A visualisation of HTML5/CSS3 browser support

Related Stories