Grayscale Image When User Offline

You must have noticed, webapps images in chrome going grayscale to indicate that the network is down, a simple demonstration of the same is been done here.

The trick is with very simple HTML5 event and CSS3 trick, sometime back had blogged about HTML5+JS offline/online notification on the same lines have done some silly code to emulate the offline gray-scaling of images, checkout the demo .

Here is the code :

/* CSS grayscale */
-webkit-filter: grayscale(100%); /* Latest webkit */
-moz-filter: grayscale(100%); /* Mozilla */
-ms-filter: grayscale(100%); /* M$ */
-webkit-filter: grayscale(1); /* Old webkit */
filter: grayscale(100%); /* Current API */

// Javascript to change the class 
window.addEventListener('offline', function (evt) { 
  console.log("offline"); 
  document.getElementById('test').className = "offline"; 
}); 

window.addEventListener('online', function (evt) { 
  document.getElementById('test').className = ""; 
});

Can also use document.getElementById('id').classList.toggle('class'); to toggle classes :)

Update 1:

There were few comments in reddit saying this is not working on FF, the fix is as below :

filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);