“Grayscaling” in non-IE browsers

James — Mon, 11 May 2009 09:03:41 +0000

This started out as a little experiment and eventually turned into quite an endeavor. The task was simple enough; to emulate Internet Explorer’s ‘grayscale‘ filter in all non-IE browsers. The solution, much to my initial surprise, is not as tricky as you would think.

The ‘grayscale‘ filter in IE can be applied to any element and visually transforms the element itself into grayscale. You can apply the filter using one line of messy proprietary CSS:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

This can also be defined in your StyleSheet:

elem {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* Element must "hasLayout"! */
    zoom: 1;
}

As shown, getting this to work in IE is a piece of cake; other browsers, however, require much more attention!

There are two things to consider; images and everything else. “Everything else” is quite simple; loop through all elements within the document and look for colour properties such as ‘backgroundColor’ and ‘color’, then convert their RGB values to grayscale. There are a few ways of doing this; note that we’re not talking about desaturating a photo; “grayscaling” is slightly different (as I understand it):

// Desaturate:
function RGBtoDesat(r,g,b) {
    var average = (r + g + b) / 3;
    return {
        r: average,
        g: average,
        b: average
    };
}
 
// Grayscale:
function RGBtoGrayscale(r,g,b) {
    var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    return {
        r: mono,
        g: mono,
        b: mono
    };
}

So, each element with a colour property has it converted to grayscale; the original colour is stored somewhere for resetting purposes.

Whether our image can be converted to grayscale depends on two things; the browser in question must support the HTML5 canvas element and its ‘getImageData’ method and the image must be hosted on the same domain; externally hosted images cannot be passed into ‘getImageData’ regardless of whether it’s supported. Google Chrome and Safari (<4) don’t support ‘getImageData’ so we’re stuck there, but, on other browsers that support the canvas element “grayscaling” images can be achieved!

The only way to do this is to “manually” traverse all pixels of the image in question and apply the same ‘RGBtoGrayscale’ function as we did for the CSS colour properties. This can really eat up the browser; even speedy JavaScript engines can suffer considerably with large images.

For the reason mentioned above it makes sense to add a ‘prepare’ function to run before anything actually needs to be “grayscaled” – this function can use the classic zero-timeout recursion technique so as not to lock up the browser. If only small images need to be converted then you can avoid using ‘prepare’ and go straight ahead with the brute-force conversion.

Why, oh why?

You may wonder what the point is in “grayscaling” anything… Well, for one; eliminating colour detracts focus from the user therefore leaving their attention open for other focus-grabbing items on your website; e.g. a lightbox. Forum software such as vBulletin makes it so that the page goes entirely grayscale when you click logout; this brings up a confirm box which is quickly and easily identifiable since it’s the one of the only things with colour left on the screen.

The real reason behind this whole “grayscaling” obsession is that I was curious about whether it’d be possible to achieve; I knew about the filter in IE and wondered if other browsers could be made to emulate this handy effect. I know the effect itself might be considered out-of-date but I really don’t care; I was only interested in getting it to work.

Demo

For those blood-thirsty demo hunters lurking around I’ve created a demo page which shows the functionality as described in this post. Remember, it won’t work properly in Safari (<4) or Chrome (and probably some old version (pre v.2) of FF); also remember it’s just an experiment!

The DEMO: /demos/grayscale/

Usage

To “grayscale” an element you need to call grayscale() with that element passed as a reference, e.g.

var el = document.getElementById( 'myEl' );
grayscale( el );
 
// Alternatively, pass a DOM collection
// (all elements will get "grayscaled")
grayscale( document.getElementsByTagName('div') );
 
// Even works with jQuery collections:
grayscale( $('div') );

To reset an element (back to its original colourful state) you must call grayscale.reset() and pass whatever elements you want reset:

grayscale.reset( el );
// reset() also accepts DOM/jQuery collections
grayscale.reset( $('div') );

The ‘prepare’ function, as discussed earlier, should be called when there’s a large image to process or even if there are several smaller images. Be aware that larger images will take quite a while to process (just a 300×300 PNG takes about 3 seconds in ‘prepare’ mode).

grayscale.prepare( document.getElementById('myEl') );
// Also accepts DOM/jQuery collections
grayscale.prepare( $('.gall_img') );

Fixing “:focus” in Internet Explorer

James — Thu, 16 Apr 2009 16:48:24 +0000

Currently, Internet Explorer doesn’t support ‘:focus‘ within CSS selectors, a dynamic pseudo-class implemented in CSS2. The Anchor and most form elements (input, textarea etc.) support this psuedo class. It’s normally used to make it obvious to the user where ‘focus’ currently is. This can be especially useful for users who browse without a mouse (just using a keyboard).

It’s easy enough to fix with JavaScript; you can just apply the styles on the ‘focus’ and ‘blur’ events. The problem with this is that you’ll also be affecting browsers that already have support for ‘:focus’. So you need a reliable way (no browser sniffing) of determining whether or not it’s supported. Also, manually adding these event handlers where needed is a bit of a pain… something we could certainly do without.

‘pseudoFocus’ is a jQuery plugin that fixes the ‘focus’ pseudo class in all browsers that don’t support it. It doesn’t use browser sniffing to determine support, but instead performs a check to determine whether the browser in question supports the specific feature:

var focusIsSupported = (function(){
 
    // Create an anchor + some styles including ':focus'.
    // Focus the anchor, test if style was applied,
    // if it was then we know ':focus' is supported.
 
    var ud = 't' + +new Date(),
        anchor = $('+ ud + '" href="#"/>').css({top:'-999px',position:'absolute'}).appendTo('body'),
        style = $('').appendTo('head'),
        supported = anchor.focus().css('fontSize') !== '10px';
    anchor.add(style).remove();
    return supported;
 
})();

Once it has performed the check it will then run through all the StyleSheets looking for selectors with the ‘focus’ psuedo class (or ‘:unknown’ in IE6) and then automatically attaches the ‘focus’ and ‘blur’ handlers to whatever elements are targeted by each of those selectors.

Note that this will only work if your rules are defined in an external StyleSheet, the plugin won’t check for styles within

James Padolsey» CSS category – James Padolsey

“Grayscaling” in non-IE browsers

Why, oh why?

Demo

Usage

Fixing “:focus” in Internet Explorer