front-end technology talk

Forcing browsers to print all pages in grayscale

11 June 2012 by @ddprrt

Very short snipplet, but very effective.

With Chrome 18 CSS3 filters are finally implemented and you can do amazing stuff with them. One thing we tried and which we found rather useful than fancy is to force Chrome printing all content on your website in grayscale.

And this is the code:

@media print {
  body {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%); /* Does not work atm */
        -ms-filter: grayscale(100%); /* Does not work atm */
         -o-filter: grayscale(100%); /* Does not work atm */
    filter: grayscale(100%); /* future-proof */
  }
}

And that's it!

Update

And for the record, here is the full flegded version covering all major browsers:


@media print {
  body {
    /* IE4-8 and 9 (deprecated). Thanks Travis for the tip! */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, 
       Safari 5.2 and Opera 11.6 -- does not 
       need to be prefixed. See below */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for
       future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */
  }
}

And here's the SVG Markup for the grayscale filter:

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 
                                       0.3333 0.3333 0.3333 0 0 
                                       0.3333 0.3333 0.3333 0 0 
                                       0 0 0 1 0"/>
 </filter>
</svg>

Comments

comments powered by Disqus