Anyone that follows me on twitter knows I’m a big Modernizr fan. There are so many practical uses for it. Yesterday, I finally upgraded my browsers to the latest versions — Firefox, Chrome, Opera and Safari. As I was working on a project, I noticed in my Modernizer string that there were less “no-” properties shown in some of the new browser versions (as well as more properties Modernizr is testing for in the new version—nice!). So here’s another handy use for Modernizr—showing you what’s new in your upgraded browser. 
In Chrome 5.0.375.125, I have:
html class=” js canvas canvastext geolocation crosswindowmessaging websqldatabase no-indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface”
In Firefox 3.6.8, it says:
html class=” js canvas canvastext geolocation crosswindowmessaging no-websqldatabase no-indexeddb hashchange no-historymanagement draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity no-cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio localstorage sessionstorage webworkers applicationcache svg no-smil svgclippaths fontface”
In Safari 5.0, we now have:
html class=” js canvas canvastext geolocation crosswindowmessaging websqldatabase no-indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface”
Finally, Opera 10.6 looks like this;
html class=” js canvas canvastext geolocation crosswindowmessaging websqldatabase no-indexeddb no-hashchange no-historymanagement no-draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface”
UPDATE: Decided to add IE 8:
html class=” js no-canvas no-canvastext no-geolocation crosswindowmessaging no-websqldatabase no-indexeddb no-hashchange no-historymanagement draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-smil no-svgclippaths
Looks like everyone’s getting closer, doesn’t it? (Well, save IE where we’ll continue to wait for their holy grail version—soon I hope.) What it can’t report is things like—Safari 5.0 no longer requires the -webkit prefix for border radius (though you’ll still need it for older versions and mobile Safari), or changes in a property that was already supported. Still, it’s a handy comparison chart when you need it.
Happy coding!
