7 ms·

HTML5 Readiness : A visualisation of HTML5/CSS3 browser support

39 points by deepakjois 16y ago

gibsonf1 16y 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.
- deepakjois 16y ago
  This is a nice idea : http://github.com/paulirish/html5readiness.com/issues/closed#issue/2 http://github.com/paulirish/html5readiness.com/issues/closed...
btw0 16y ago
The page looks great, but for the purpose it's less intuitive than a plain table IMHO.
- Timothee 16y 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.
- ryanjmo 16y ago
  Welcome to HTML5! Completely overdone graphics with no usability (for a while anyway).
  - treyp 16y 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.
- w1ntermute 16y ago
  For those interested, this information can be found in table form on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(H...
- nimbupani 16y 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 http://whencaniuse.com
  - Qz 16y ago
    Why not aim for a visualization of both?
Rust 16y 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 16y 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 16y 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.
ygd 16y ago
Imagine the ultimate irony if it were written using Flash.
iamwil 16y ago
terrible to use to make comparisons.
jrw89 16y 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 16y 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."
deepakjois 16y 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 http://github.com/paulirish/html5readiness.com
andrewcaito 16y ago
If you were curious about what this looks like in IE8 http://i41.tinypic.com/24eatud.png http://i41.tinypic.com/24eatud.png
MDX 16y 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 16y ago
Perhaps this is a good example of what E. Tufte calls "chartjunk" in his book "The Visual Display of Quantitative Information".

39 points by deepakjois 16y 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.

deepakjois 16y ago
This is a nice idea : http://github.com/paulirish/html5readiness.com/issues/closed#issue/2 http://github.com/paulirish/html5readiness.com/issues/closed...

btw0 16y ago

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

Timothee 16y 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.
ryanjmo 16y ago
Welcome to HTML5! Completely overdone graphics with no usability (for a while anyway).
- treyp 16y 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.
w1ntermute 16y ago
For those interested, this information can be found in table form on Wikipedia: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(H...
nimbupani 16y 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 http://whencaniuse.com
- Qz 16y ago
  Why not aim for a visualization of both?

Rust 16y 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 16y 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 16y 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.

ygd 16y ago

Imagine the ultimate irony if it were written using Flash.

iamwil 16y ago

terrible to use to make comparisons.

jrw89 16y 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 16y 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."

deepakjois 16y 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 http://github.com/paulirish/html5readiness.com

andrewcaito 16y ago

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

MDX 16y 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 16y ago

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