Monday, April 19th, 2010

HTML5 and CSS3 Readiness Visualization

Category: CSS, HTML, Showcase, Standards

<p>html5cssreadiness

Paul Irish and Divya Manian have created a fun visualization on readiness of HTML5 and CSS3 standards in various browsers.

It uses a bunch of the usual CSS cool-suspects: -webkit-gradient, -webkit-transition, -webkit-border-radius, and the like (and -moz/-o too).

The added feature is…. do a mouse scroll on the page:

javascript
< view plain text >
  1. jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
  2.     var newval,
  3.         num = $('div.css-chart p').css('padding-left');
  4.  
  5.     delta = delta || e.detail || e.wheelDelta;
  6.  
  7.     if (delta > 0 || e.which == 38) {
  8.         newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
  9.     } else if (delta < 0 || e.which == 40) {
  10.         newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
  11.     } else {
  12.         return true;
  13.     }
  14.    
  15.     $('style.padleft').remove();
  16.     $('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; }')
  17.         .appendTo(document.body);
  18.  
  19.     e.preventDefault();
  20.  
  21. })

Related Content:

Posted by Dion Almaer at 6:57 am
7 Comments

++++-
4.2 rating from 26 votes

7 Comments »

Comments feed TrackBack URI

Here’s the link to the source: http://html5readiness.com/.

Comment by janaagaard — April 19, 2010

Opera deserves a version number too, they are doing a d… good job !

Comment by Rusco — April 19, 2010

I love the trend of web apps like this, CSS3 Please, and the HTML5 slideshow just flat out not working in IE. It’s brave and beautiful.

Comment by Baryn — April 19, 2010

Because I’ve used my own js lib for a long time, I thought it could be nice to share my feature detection sources as open source.

The supports.js lib is a customizable and extendable javascript library providing multiple feature detecting technics.

Please take a look and see if it matches your needs. http://supports.netzgesta.de/

Comment by ucanmexwise — April 19, 2010

this is great. nice and clean.
It would be even nicer if there was a mobile devices view, specially for android (different versions) and apple os devices.

Comment by guacamoly — April 19, 2010

Meh. Novelty for it’s own sake, which is like a lot of CSS3 stuff we’ve been seeing.

The original money/religion graph they copied was way more readable.
And I mean “copied.” They got the look & feel of the graph, but not the instant comprehension. If you switched axes (browsers as radii, attributes as colored blocks), then it would be way easier to get the whole thing. However, the graph would have to be way bigger…

Comment by Benxamin — April 20, 2010

Web Sockets are missing or what?

Comment by winkeyo — May 6, 2010

Leave a comment

You must be logged in to post a comment.