carlos-sanchez
11/14/2013 - 3:59 AM

Print. Okay, there are many things to note here. Let’s start with the color stuff. You have probably understood the point of turning everyth

Print. Okay, there are many things to note here. Let’s start with the color stuff. You have probably understood the point of turning everything into black and white: saving money. Do you know how much a color ink cartridge costs? :D

The first four lines take care of 75% of the job by turning the font color to black and removing backgrounds and shadows.
The filter stuff mostly takes care of images by desaturating them. Internet Explorer uses an old proprietary filter, Chrome supports new CSS3 filters and for the others there is SVG.
A few days ago Christian Schaefer released a JavaScript polyfill for CSS filters using the unprefixed syntax getting back to Internet Explorer 6 (!).

This was about the grayscale thing. Now, what about anchors?

Since we removed colors, we’re back to the old-fashion way to show links: with an underline.
If anchors have a href attribute (and they should), we show their content after them.
But not if it’s a JavaScript or an empty link.
@media print {
    * {
        background: none !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
 
        /* Images, vectors and such */
        filter: Gray();                          /* IE4-8: depreciated */
        filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
        -webkit-filter: grayscale(100%);         /* Chrome + Safari 6 */
        -moz-filter: grayscale(100%);            /* Future proof */
        -ms-filter: grayscale(100%);             /* Future proof */
        -o-filter: grayscale(100%);              /* Future proof */
        filter: grayscale(100%);                 /* Future proof or polyfilled */
    }
 
    a {
        text-decoration: underline;
    }
 
    a[href]:after {
        content: " (" attr(href) ")";
    }
 
    a[href="#"],
    a[href="javascript:"] {
        content: "";
    }
}