All geek questions in one place

Detect background image and background color support when printing from browser

When printing a page in a browser, this means the print.css stylesheet declared with media="print" . The browser disables some CSS rules, such as background-image and background-color , some browsers have options to enable them.

As said in this answer , it is not possible to override this behavior from the page code.

I have two questions:

  • Is there any documentation or a good link about these print rules? For instance:
    • What CSS rules are disabled?
    • Can Javascript do something on a page before printing?
  • Is there a way to detect the browser in print mode using Javascript and then make an elegant degradation system?
+6
source share
2 answers

How browsers print pages is a bit of a black box; I could not find the final links.

All major browsers have print options to "compress to fit" the web page on a paper page (enabled by default), and for printing background images and colors (disabled by default). Most users will leave these defaults as they are, even if they know that these options exist. I have not seen browsers "disable" any other CSS rules when printing. A.

Firefox and IE both support onbeforeprint and onafterprint , so you can detect when printing is done using JavaScript, although obviously this is not a cross-browser solution.

Most of the settings needed for printing can be handled by CSS (either in a separate print stylesheet, or as an @media print { ... } block in your main stylesheet):

  • CSS Wiki Discussion has a good page on how much you can control through CSS.

  • I recommend taking a look at the print styles from the HTML5 Boilerplate as a good starting point.

  • If you have a background image to be printed, you can add <img> elements to your page, hide with display: none , and then make them visible with display: block (or inline ) in your CSS print.

If you need to change the page for printing a lot, I suggest that you offer a separate version of the page just for printing, instead of trying to make changes to JavaScript.

+3
source

Not sure about the first question, but to detect the browser in print mode, you can do the same as for the screen. Either use Modernizr, or conditionally add classes for the supported functions, and then create CSS target rules, for example:

 body.whateverfeature .yourrule { }

or if it's just the IE that you want to test, use something like h5bp:

 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

0
source

Source: https://habr.com/ru/post/916045/

More articles:


All Articles