I just stumbled on a cool site – html5readiness.com. The site displays a break down of browser support for HTML5 and CSS3 (Canvas, SVG, GeoLocation, Transforms, Border Radius, etc). The browsers included for 2010 are IE 7, IE 8, IE 9, FireFox 3.5, FireFox 3.7, Opera 10.50, Safari 4, and Chrome 4.

I wasn’t surprised to find that Safari and Chrome have the most HTML5 and CSS3 support (since both use the webkit engine). Firefox support for HTML5 and CSS3 is not far behind Safari and Chrome.

I was not surprised to find that Internet Explorer lags far behind (although IE 9 adds support for SVG, Video, SVG as Background, Media Queries).

I was very surprised to find that HTML5 and CSS3 support in Opera 10.50 rivals that of FireFox.

Anyway, if you ever need to know what is supported by each browser, take a look at html5readiness.com.

P.S. I wonder why Safari and Opera aren’t used as much as Firefox, Chrome and IE. Safari can be used with a Mac or PC, but appears to be used primarily by Mac users. Chrome has been around since 2008 and already has 5 times as many users as Safari (see browser stats).

I have been using the YUI Selector Utility for a few months, but I just recently discovered how powerful it really is. I have been converting my imValidateForm JQuery plugin into a YUI widget. One of the validations this widget checks is whether a set of radio buttons are checked. I originally created validation object with pure Javascript. To determine whether the radio buttons were checked, I created the following code:

var flds = document.getElementsByName(‘gender’);
var nL = flds.length;
for (var j=0; j<nL; j++) {
     if (flds[j].checked) {
          ischecked = true;
          break;
     }
}

This is so verbose when compared to the YUI implementation of the same code:

var ischecked = (YAHOO.util.Selector.query('input[name=gender]:checked').length > 0) ? true : false;

Not only am I able to use the CSS3 Attribute Selector and Pseudo-classes, I can combine the two to create more succinct code. Marvelous.