At the time of this writing, this will only work in Chrome 18+, but it’s standardized so support will eventually come to everywhere.
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
I’m looking forward to:
Dave, I made something similar here.
Dave: Just do {filter: grayscale(0%); } and you can also use transitions. Check out this dabblet: http://dabblet.com/gist/2916403
I was trying to use this code in my blog social icons but it’s not working well:
Chrome – great result, the icon appears in grayscale
IE – the icon appears with color
Firefox – the icon doesn’t appear at all
I think it’s this line that doesn’t work:
I have the svg filter when the body tag opens as defined in the referenced url.
Any idea how to solve it?
for me its not working for IE10 how to make it for IE10
Not working for ie 10
Beware! This may have worked fine back in 2012, but using filter() in a print stylesheet in 2018 royally screwed up the print quality in Safari & even worse in Firefox on a mac with Mojave. Cost me about 3 hours of debugging and a good chunk of my hair today.
Print quality? Fascinating. Would be interesting to see some photos of printouts of images where a grayscale filter was applied and one where it isn’t.
Crazy, right? I printed a ton of pages during testing and debugging. Here’s a close-up of two pages: https://i.imgur.com/0mwUWvR.jpg
The page on the left was printed when the print stylesheet still had the filter() rules. The one on the right was the same page after I commented out the rules.
This seems to have only been a problem on OSX. And the problem was noticeably worse in Firefox, though prints from Safari were had jagged.