I'm working on some print stylesheets. The only way I can view the results of my changes is by using a print preview. It's very tedious and clunky. Even though it will be inevitable once I need to test page-breaks, I have been trying to figure out if there is a way to spoof the #media print in the browser so I can use the inspector, and see all of the things that are switched around to look different for printers.
A good example is that if you have Bootstrap installed, they are using a trick with anchors so that the URL is printed out in parens after the anchor text. So, while I can temporarily change my own print stylesheet to #media screen, I don't see those Bootstrap #media print things until I hit print preview.
Yes.
In chrome go to Developer Tools > Emulation > Media > check css media and select print from the dropdown
Related
Recently i began a new job, and one thing i noticed in their boilerplate is that on their CSS, the print styles are separated into a diff file. I asked about the reasoning and was told IE8 doesnt support #media print.
Now, for the last couple of years i've worked on a couple of sites, where IE8 was supported and which required print support. And i've always included the print styles using the #media print method. The funny thing, is that print works using this method. Any idea why ? Now that i think about it, if #media print is not supported on IE8, but the print styles are working on my projects, where is the catch?
By the way, the project im referring to, where the print styles are working on IE8 is this one: http://news.hydroquebec.com/en/press-releases/704/addenergie-will-supply-the-fast-charge-stations/?fromSearch=1
Could it be the printshiv ?
IE8 supports #media print just fine. print by itself is just a media type and not a full-fledged media query, which old versions of IE understand just fine and has worked on all browsers for over a decade.
Nothing to do with printshiv — while it provides fixes for rendering HTML5 elements to print, that is a separate thing from #media print entirely.
I've set up a print stylesheet and in firefox it looks well.
In Chrome the whole page is broken in the print preview (CTRL+P), but if I open the Chrome DEVTools (F12) and use the emulate CSS media function the page looks correct - like in firefox.
The weird thing is, if I open the print preview again, after I've activated the emulate option once, the page looks correct in the print preview! Even If I just activate and then deactivate the emulate option, the print preview is always correct after doing that!
My print.css starts with
#media print { ... }
and is included in the page <head> like this:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I've tried to remove the media="print" but nothing changes.
In your print style sheet, you need do add the following:
* {
transition: none !important;
}
It appears that Chrome doesn't disable the transition property for print media.
Here is where I found the answer.
If you have not find solution in given answers then i have something to say about it:
in Chrome DEVTools print option in emulation css media is only for applying print css rules to the page, for testing purpose, it does not account for all the other things that go along with print, it display the print preview but sometimes it do not display the print page as actual print preview.
if you are using bootstrap then if you are using only col-md-* or col-sm-* it will not work, but if you use col-xs-* then it will work because The issue is that the page itself is small in terms of pixels, so bootstrap thinks it needs to apply the xs style.
And different browser behaves differently in printing the page.The only optimal way to test print is by actually printing, or printing to pdf.
I ran into the exact same head breaking problem and I've been able to fix it.
In my case the problem was caused by using a custom #font-face for the 'print' CSS which i did not use in the 'screen' CSS.
It seemed the browser dit not load the custom #font-face from the print stylesheet for the first preview and renders the page more or less empty. It would render perfectly on the second print preview.
My solution was to load the same #font-face rule from the pint css also in the screen css. That way the font is loaded already by the browser when viewing the print preview and it all works like a charm.
To add to Ustice's answer and Jeeva Jsb's comment: you may need to allow the DOM to rerender after applying the transition: none !important rule. I accomplished this by adding a print CSS class to the body before I programmatically printed the page:
CSS:
body.print * {
transition: none !important;
}
JS (using jQuery):
$('body').addClass('print');
setTimeout(function() {
window.print();
}, 0);
Don't forget to remove the print class once your user has finished printing the page. (See how to detect window.print() finish.)
I'm helping improve a Wordpress site with a responsive design. Currently, I have media queries set up for the different screen sizes, but there are no CSS rules in them right now.
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles go here */
}
Is there a way to edit and add brand new rules into the media queries live on Firebug? It would be more convenient than adding a "dummy" CSS rule, putting it on the FTP, then testing it in the browser and editing from there.
Thanks
Yes you can, just click on the CSS tab and then Source Edits. Then copy over your changes to your actual CSS if it's what you want. Just keep in mind though that you are defining your media queries with min-device-width, so on a desktop this will not render any changes because the device width doesn't change if you resize the browser.
Likewise, you can also use the Chrome's Debugger Tool - I find this a lot more helpful. You can make changes to the CSS on the "Elements" tab. Then click on the "Resources" tab find your Styles folder - Chrome will actually tell you which CSS files you've edited and also have them versioned for you. Simply right-click and save the version of CSS file that matches the edits you want.
If I understand your question correctly, no you cannot make edits in firebug that will affect your site permanently. You can alter the code to see what it does and then copy and paste it into a separate script. As for your answer though, you'll ultimately have to write a separate css script for it.
That would be nice if you could (maybe an upgrade), but it would probably require some sort of password for security purposes so not just anyone could edit it.
How do you get cross browser compatibility in Print? any tips for print css file to make print on paper identical from all browser.
Edit
I'm already using Eric meyer CSS but still facing inconsistencies in different browser when we take print from site.
Is there any CSS declarations which we can use always and put at a top in print css , Like other css resets which work good in media=screen?
I'm already using a different css for print (print.css) with media="print"
Would it be better to keep * {posotion:static} , *{float:none} , * {clear:both}
in print css always?
Identical results are impossible. The output depends not only on CSS but also on individual settings for page margins, the printer’s capabilities, available fonts, paper format (A4 vs US Letter) and probably a lot more.
For CSS
Avoid floats and positioning (relative, absolute and fixed). Especially Mozilla (Firefox) can not handle those properties very well.
Use page-break-* but don’t rely on it. Some browsers insert page breaks even in images.
You don’t know the page width and height (could A5). Keep anything as flexible as possible.
For performance, put your print style into the main stylesheet in a #media print {} rule.
Use pt not px for borders and margins. A printer doesn’t know what a pixel is and may come to strange results.
Develop your print layout in Opera, which has the best support for #media print currently, and insert compatibility hacks, when you’re done.
Internet Explorer may crash on print, if you use its reserved IDs.
Never rely on print preview. You get very different results on real printouts. Save the rain forest with a print-to-pdf-driver. :)
In html there use a link with the attribute "media" set to "print".
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">
You can disable all other css and just use your "print" css. set the media first to "screen". Test it just like your testing a normal css in all browsers.
In my experience, what it looks in the screen, will pretty much look when it's printed.
Advice:
1) keep your layout as fluid as possible for it to be flexible to what ever the paper margin it was set to.
2) keep it simple.
3) In IE, backgrounds might be missing. To fix this, go to: Tools>Internet Options>Advanced. on the Settings box, scroll down to Printing and enable "Print background colors and images"
I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:
change code
command-tab
reload
but that whole process gets much more arduous when you're trying to print:
change code
command-tab
reload
print
squint at print-preview image
open PDF in Preview for further inspection
Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?
There is an option for that in Chrome's inspector.
Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.
Then, select Media in the emulation drawer, and check the CSS media checkbox.
This should do the trick.
Update: The menus have changed in DevTools.
It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.
Source: Google DevTools page*
I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use #media screen to debug - #media print for final css
Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a #media query.
#media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the #media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to #media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the #media screen rules to the referenced file.
Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.
W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48 you can debug print styles within the Rendering tab.
Click the menu icon top right of inspector and Rendering Settings.
Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering
In Chrome v41, it's there, but in a slightly different spot.
There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):
Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features
Now you are viewing the print CSS and you can reload your page indefinitely.
Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.
HTH.
Chrome's UI is different again as of v53.
I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.
Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.
Now scroll down in the Rendering section. It's often below the fold.
Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:
Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.
2019 - Updated instructions
Open Chrome inspector
From Mac => option + command + i
From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow
If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.
Heres an example of how this can be done with JavaScript / jquery
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.
One drawback is that it does not clearly delineate the page boundaries.
In DreamWeaver there is a toolbar that shows virtually any rendering option you want:
screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc.
This is what I use especially because it: instantly shows a preview with 1 single press of a button.
I use macros to send keypress and mouse clicks repeatedly.
Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.
Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)