I'd like to print http://www.delicious.com/tags/engmark to PDF (Using Firefox on Linux, if possible), but the result looks rubbish. How can I print without taking into account the print-specific CSS (which I think is loaded by the enormous JS on the site)? I tried to disable print CSS in the Web Developer extension, but that didn't affect the print output.
I looked through the HTML file and found that there's a link tag with the attribute of media="screen"
If you just remove that attribute, the CSS would then load.
Related
I would like to analyse the amount of unused CSS on my webpage. This web page is written in Angular 7 and the css is being added in the angular.json build configuration.
This seems to be appending the css to the head of the html file; in the developer tools I can see several style tags.
I have read in many places that I should use the coverage tab of the developers tools in Google Chrome to do this. For me this is working for JS but not for CSS.
Here are screenshots of what I am seeing:
It is all JS. If I filter for files that conatin css it returns no results
But I can see that css files have been downloaded here.
How can I analyse the code coverage styles in the head of the document?
The head of my document looks like this:
p.s. I am using Chrome Version 75.0.3770.80 (Official Build) (64-bit)
So all your CSS is internal it seems (they're not being served from a file, are bundled in the HTML).
Do a small test: put the CSS content of one of the <style> tags in a .css file (for instance, test.css) and include those files in <head> with <link rel="stylesheet" href="test.css">, and see if they work, and show up in coverage.
(and remove the corresponding <style> tag from original)
EDIT
If you don't filter by keyword CSS, you will see that there is a single row with type CSS+JS or JS, which DOESN'T show when you filter by keyword CSS.
Since your styles are all bundled in the HTML, they all clobber up to this row!
For instance:
Your address would be the root URL of the application.
EDIT
https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW
You were right regarding dynamic CSS, it just isn't covered in the tab. The above link puts a <style> tag via javascript and the rules never show in any rows of the coverage tab. Good job :)
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.)
If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:
But in Chrome 16, you only get the minified CSS as it was served out:
Is there a way to get Chrome to prettify the CSS?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.
If you use the Elements tab, the applied CSS properties are also shown per element.
I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool).
It can show you the source of the current page formatted and colour coded.
It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).
You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en
After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.
How do you usually handle changes to screen and print CSS files? I typically have one screen CSS and one print CSS file and for the most part the I would copy the contents of screen CSS to print CSS file and then modify some properties, classes or ids, maybe set some display:none to certain classes etc.
The problem is, while working on a site or web app I make numerous changes to screen CSS and usually forget about print CSS then I have to sync them from time to time and I just don't think that the most optimal way.
For print stylesheets I tend to also apply the media="screen" stylesheet to the media="print" as well as a second stylesheet that appears later, which essentially, just removes the elements I don't want to print.
It's a fairly simplistic approach, though, and only works to any potential if it's regularly reviewed, so I couple it with a policy of always revising (or, at least, checking) it when I revise the screen-stylesheet.
I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.
What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.
The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)
Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?
What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.
i've always used print preview, never had a problem with it. just open it up in IE; i'd target it with conditionals, but "hacks" work just as well.
you're seeing differences....what media attributes do your other link elements have? if you have one for all, switch it to type="screen, projection">