Monday, April 19th, 2010
HTML5 and CSS3 Readiness Visualization
Category: CSS, HTML
, Showcase
, Standards
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:
-
-
jQuery(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
-
var newval,
-
num = $('div.css-chart p').css('padding-left');
-
-
delta = delta || e.detail || e.wheelDelta;
-
-
if (delta> 0 || e.which == 38) {
-
newval = parseFloat(num) + 10 * (e.shiftKey ? .1 : 1);
-
} else if (delta <0 || e.which == 40) {
-
newval = parseFloat(num) - 10 * (e.shiftKey ? .1 : 1);
-
} else {
-
return true;
-
}
-
-
$('style.padleft').remove();
-
$('<style class="padleft"> div.css-chart p { padding-left : '+newval+'px; }')
-
.appendTo(document.body);
-
-
e.preventDefault();
-
-
})
-
Related Content:
- Use HTML5 to make developing mobile applications less costly, complex
Doing mobile application development with HTML5 isn't the most common path, but it can be less costly and... - Inline styles make XML files easy to share in IE5
John Turnbull shows us how to add CSS styles to an XML document so that Internet Explorer 5 will display... - The Importance of CSS to XML
4.2 rating from 22 votes
Here’s the link to the source: http://html5readiness.com/.
Opera deserves a version number too, they are doing a d… good job !
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.
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/
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.
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…
Web Sockets are missing or what?