CSS media for printing on monochrome or greyscale printers for our new print CSS styles

During today's telcon I mentioned that it wasn't possible unless we made a dropdown box to select the printing style. However, I have since come to a different conclusion.

You can use the following CSS style to specify styles for monochrome media (or use "print" for only printers):

@media all and (monochrome) { ... }

And you can use the following for B&W printers (if we so want to):

@media all and (max-monochrome: 1) { ... }

You can even select a style specific to a certain bit depth of the greyscale, the following is for 8-bit depth and higher:

@media all and (min-monochrome: 8) { ... }

Conversely, you can use the following to specify color-printers-only styles:

@media print and (color) { ... }

Or even devices that use indexed colors (do they even exist?):

@media print and (color-index) { ... }

And if we want to get creative, we could help styling oblong formats:

@media print and (orientation: landscape)

To simply use separate (or overriding) stylesheets, we can use something like the following:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

 
Some of these examples were found here, including test pages: https://www.sitepoint.com/media-queries-look-different-media-features/
Others here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 

It even appears to have relatively good browser coverage: http://caniuse.com/#feat=css-mediaqueries (though this page shows it is only "known" for Chrome: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/monochrome)

Since I don't have a monochrome printer or screen I have no idea to test this properly.

Cheers,
Abel

Received on Thursday, 17 November 2016 20:20:48 UTC