CSS Grayscale Filter (not Greyscale)

Today's comic pokes a little fun at Internet Explorer. It's certainly not the first time I've done that. The comic talks about one of the most ubiquitous features of modern browsers, tabs. And while there was a time when no browsers had them, I chose IE for the comic because it got them later than anyone else. Microsoft's victory in the Great Browser Wars was a loss for the world - as all web innovation stagnated for years in a single-browser ecosystem.

The ironic thing is that the comic uses a feature that is not supported by even the latest version of Internet Explorer. No, wait. Ironic isn't the right term. What word am I looking for? Oh yeah, expected. The expected thing is that the comic uses a feature not supported by IE. Because it never seems to support anything, even today!

Alright, enough of the IE-bashing. The feature I'm talking about is CSS Filters. Microsoft used to support a propriety version of most of them, so at least developers had an option to make pages look similar in all browsers, but they removed that support in IE9. Even 11 doesn't support Filters yet, although it looks like it might soon. But it should, because filters are great.

The same page in Chrome 44 (left) and Internet Explorer 11 (right)

The filter I used today was grayscale. Why not greyscale? I don't know, what's up with the whole gray/grey thing? Maybe I'll talk about that some other time...

I wanted to show a comic cell that was the imagination of something in the past. Even though the date was only 2003, everyone knows that the past is always in black-and-white. So I used the grayscale filter to get rid of 80% of the color.

<div id="cell-2" style="-webkit-filter: grayscale(80%); filter: grayscale(80%);">

    <!-- comic cell contents here -->

</div>

It's really simple to use. Just specify a percentage of how much grayscaling you want. 100% will mean absolutely no colors. I left 20% of the color there and I liked how it looked. It's not 1950's black-and-white, but it still makes you think of the past. Note how I did it on the container DIV and all elements inside of it were in grayscale. It works on all elements, not just images.

I have to use the -webkit-filter and filter both because only Firefox currently supports the standard version. Still, better than IE where I get nothing. In the past I've avoided including things like this in the comics. If I couldn't make it happen in the modern version of all the major browsers I wouldn't do it. But I felt that in this case, the missing feature doesn't detract much or ruin the joke - so I went ahead with it.

Some other filters that I've wanted to use are invert and blur, but they were going to be more integral to the joke and without IE support I didn't do it. IE is limiting my creativity!

So enjoy today's comic - preferably not in Internet Explorer.

Amphibian.com comic for 5 August 2015