How Does This Print Stylesheet Work

How can one detect via Javascript if a print stylesheet is in effect?

It sounds like you're confused that print style-sheets are used when you view a printer-friendly page, but that is not the case. A print style sheet isn't applied until the user actually sends the page to the printer. At this point, any javascript that is going to run has already finished.

What you want to do is put your SWFObject inside a div container, and have the container styled as display:none; for the print media.

Faster way to develop and test print stylesheets (avoid print preview every time)?

You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.

UPDATE 21/11/2017

The updated DevTools doc can be found here: View a page in print mode.

To view a page in print mode:

1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))

2. Start typing Rendering and select Show Rendering.

3. For the Emulate CSS Media dropdown, select print.


UPDATE 29/02/2016

The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.

Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.

UPDATE 12/04/2016

Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):

  1. Open Chrome DevTools
  2. Hit esc on your keyboard
  3. Click (vertical ellipsis)
  4. Choose Rendering
  5. Tick Emulate print media

See screenshot below:

rendering settings 12/04/2016

UPDATE 28/06/2016

Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:

https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.

rendering settings 28/06/2016

UPDATE 24/05/2016

The naming of settings have changed once again:

To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.

emulate CSS media

JavaScript Print Function not carrying the stylesheet

I ran into this same issue in Chrome. The problem I found was that the print preview doesn't completely render, but the page still prints without issues.

What I ended up doing was something like this:

var mywindow = window.open("", ...);
mywindow.document.write("...");
mywindow.document.close();
setTimeout(function() {
mywindow.print();
mywindow.close();
}, 10);

CSS @media print not working at all

If you are using @media print, you need to add !important in your styles, or the page will use the element's inline styles that have higher priority.

E.g.

<div class="myelement1" style="display:block;">My div has an inline style.</div>

In @media print, add !important and be a winner

@media print {
.myelement1, .myelement2 { display: none !important; }
}

CSS is not applied for print

add your css in your js surely it will works. check here https://jsfiddle.net/Udhaytitus/ou054d27/3/

function printData(){   /*newWin= window.open("");   newWin.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em; padding:10px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');   newWin.print();   newWin.close();*/window.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em;border:1px solid #000; padding:77px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');   window.print();   window.close();  }
$('#btnPrint').on('click',function(){printData();})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="button" value="print" id="btnPrint"/>


Related Topics



Leave a reply



Submit