Grayscale CSS and bookmarklet
A bit of code that can be used to convert any webpage (or part of a page) to grayscale. Because accessibility!
CSS
body {
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
}
JavaScript
(function () {
var body = document.body;
body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
if (!body.style['filter']) {
body.style['-webkit-filter'] = 'grayscale(1)';
body.style['filter'] = 'grayscale(1)';
}
}());
Bookmarklet
javascript:(function(){var e=document.body;e.style.filter="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)",e.style.filter||(e.style["-webkit-filter"]="grayscale(1)",e.style.filter="grayscale(1)")}())
References
- Questions on Stack Exchange [1] and [2]
- Browser Support
- Spec
- Tutorial