Is there an easy way to overwrite all text/header styles to let the browser handle the text formatting in the print stylesheet?
Edit:
I have lots of styles such as
#id .class .class #id .class p{}
Make sure that any styles you have applied to the text / header which you do not want applied during "print" mode are specified as;
#media screen {
.headerStyle { color: green; }
}
They will then be ignored during the #print screen mode.
No. You can only cascade downwards, and you can't refer to other styles. Limit the CSS you have to the media types you want in the first place.
I have learnt that any CSS formatting created in a stylesheet specified as screen does means that the printing page will be unformatted.
In my example, I can't touch the HTML and the CSS media has not been specified, so the problem remains, but you should always make sure you set this to avoid problems in other medias.
Set the CSS globally (including print)
<link href="style.css" rel="stylesheet" type="text/css">
Set the CSS just for screen (excludes any media, including print format)
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
Related
As the title says, I have two stylesheets, one for mobile, the other for desktop.
I am combining both by using the #media screen and (max-width: 1007) {} query.
This however doesn't seem to function properly for me, as some elements don't get affected by the stylesheet - the desktop stylesheet is overriding some of the elements but not all, for some reason.
Is it bad practice to combine stylesheets? Should I have separate links to them in the HTML file?
My recommendation:
I would have two separate CSS files in your <head> like so.
<link rel="stylesheet" href="mystyle.css">
<link rel="stylesheet" href="responsive-styles.css">
Otherwise, you can combine them by having only one main.css: This would look like so:
#import url("style.css");
#import url("css/responsive.css");
#import url("css/custom.css");
#import url("css/fonts.css");
#import url("css/jquery-ui.css");
The end goal with this is to have only one .main CSS file which includes all your main styles, responsive styles, fonts, etc.
The result would consist of only this in your <head>
<link href="main.css" rel=stylesheet>
Keep in mind stylesheets are loaded in parallel and the page does not block further parsing waiting for a stylesheet to load. Hence, my recommendation.
I have a bootstrap4 project where the user needs to be able to print the page. I have a print.css file that I have a few obnoxious styles it just to see if the styles are taking effect and they are not.
My styles are
#media print {
body{background-color:green;}
p{color:red;}
}
Could there be something with bootstrap preventing the styles? The print is not even taking on bootstrap styles.
My link looks like this
<link href="css/print.css" rel="stylesheet" media="print">
I have also tried changing the media type to all and that was a fail as well.
This is not about the background color. I have many display:none;'s in there as well that are not being read either. I only used the background color as a test and example.
I may be wrong but give it a shot,
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I believe you're actually missing the Type and with my understanding it's not needed but may be for a print doc.
Let me know how it works or if it does, make sure this is at the top of the list of Links just to clarify that's not the problem too.
Just read a comment on your question and I believe they're right about bootstrap having it's own print stylesheet but I'm sure it can be overwritten. If not don't worry too much about it. I've just finished developing a site and as long as your code is correct and layed out right it should sort itself out, or atleast mine did :'D
You could try adding it to your main stylesheet with an #media and see if that works
#media print {
/*styles here*/
}
I am modifying my CSS3/HTML5 site to work with different Medial Queries.
The site pages are in the Root directory. The CSS files are within a folder in the root directory called css.
Within the HEAD tags of my page, I have one CSS file for the default stuff and then I have another one for iPad in an external CSS file called ipad.css
When I am in the Developer Tools within Google Chrome, it doesn't seem to be applying the rules within the ipad.css file. I know this because I am wanting to change the text size of an element and it is not changing. Nothing is happening.
This is what I have within the HEAD tags:
<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">
According to the Google Chrome Developer Tools, an iPad width is 768px. I have referenced this within the link tag. Any ideas or suggestions welcome.
Use max-width: 768px rather than max-device-width: 768px.
Also, remember to specify a viewport meta tag in the head section of your html.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, you might want to check
What is the difference between max-device-width and max-width for mobile web?
Also, keep in my you're not targeting devices, you're targeting resolutions.
Another possible source of your problem might be that you are using less specific selectors in your ipad.css. Don't forget that the styles from your default.css are also used on resolutions lower than 769px!
To test this, put this css rule on the very top of your ipad.css:
* { display: none !important; }
If your site vanishes then, your stylesheet is loaded and applied.
I tried the max-width as well and the style isn't applying. Even if I change the font-color of the text within the div class (p tag), nothing is happening.
As an example, I have a div class called banner-textoverlay so, in my ipad.css file, I wrote the following to see if it would change the text color and nothing happens at all.
.banner-textoverlay p {
font-color:#000000;
}
Previously, the following code works fine for both Firefox and Google Chrome when I print to "hide" the element,
<!DOCTYPE html>
<html><head><title>Test</title>
<style type="text/css">
#media print {
.noprint {
display: none;
}
}
</style>
</head>
<body>
<span class="noprint">abc</span>
</body></html>
But now, it does not work for both browsers. However, if I change to this,
<!DOCTYPE html>
<html><head><title>Test</title>
<style type="text/css" media="print">
.noprint {
display: none;
}
</style>
</head>
<body>
<span class="noprint">abc</span>
</body></html>
It will work on Firefox, but not on Google Chrome.
What is the solution which works as browser independent?
(Or is there something wrong with my code?)
If you are using #media print, you need to add !important in your styles, or the page will use the elements inline styles.
E.g.
#media print {
.myelement1, .myelement2 { display: none !important; }
}
Not sure what is the problem with the Google Chrome, but today I tested again with Google Chrome version 31.0.1650, the solution with < style media="print" > works well.
And "#media print" rule is still not working.
"#media print" & < style media="print" > both working fine on Chrome 39.0.2171.95 (64-bit) Mac-OS & Firefox 34.0.5 Mac-OS
It sounds to me like you have a style rule in your non-print sheet cascading over your print sheet rule. You are using a form of "internal" or embedded styling (not inline or external) that has higher selectivity in the cascade order over external styles but not inline. A true inline style in your HTML or in a screen style sheet with higher selectivity in your styles could be cascading over it.
Additionally: In the case of external linked style sheets, that concept will not work for many modern browsers using a linked style sheet with #media print styles inside if the style sheet has its media attribute value set to anything other than print.....UNLESS all the other non-print styles are inside a matching #media screen{...} rule in that sheet and you remove the "media=screen" attribute from the linked style sheet entirely (defaults to media=all). This may be what is happening in your internal print style example as the browser may assume your other styles are for both screen and print (all).
Many browsers currently will not support that type of mixed media query rule as they don't know what device your sheet and styles combined are designed for and mixing styles like this with without specific media attributes just confuses the parsers. If an external linked parent style sheet says it is set to "screen", it assumes all styles in there are for screen and vice versa. An so it would fail in allowing any print styles to be defined inside. Use of inline styles on elements is even worse as far as defining media type as they would apply to all media types by default.
Older browsers at one time supported a variety of combined media settings like this, but the consensus now is to use external linked sheets for print as it's cross-browser compatible going back to older browsers pre-2001.
BEST PRACTICES FOR PRINT IN CSS
The best way to do print style is to place them in linked sheets specifically set for screen and print as shown below...
<link media="screen" rel="stylesheet" type="text/css" href="..." />
<link media="print" rel="stylesheet" type="text/css" href="..." />
In that print sheet you don't need the #media print query any longer as everything in the style sheet with "media=print" will only be seen by printers. But if you do, it also should work ok. It would just be redundant.
There also is another option using the format #import 'print.css' print;. But I don't recommend that as a large number of browsers do not support the media type in #import, including Internet Explorer 1-7 and many others which would ignore this rule and not import the sheet.
You do NOT need !important in any of those rules, EXCEPT if you used !important in your regular style sheets. Those styles would override print sheet values, too. To cascade over those selectors, you would need a more selective copy of that selector or class in your print sheet with the !important value set to properties that match those in your screen sheet's style class.
This is yet another reason to not use !important in style sheets unless absolutely necessary.
"#media print" & < style media="print" > not working Version 76.0.3809.100 (Official Build). only style media="print"
Google Maps used to do this bit where when you hit the "Print" link, what would be sent to the printer wasn't exactly what you had on the screen, but rather a differently-formatted version of mostly the same information.
It appears that they've largely moved away from this concept (I guess people didn't understand it) and most websites have a "print version" of things like articles and so forth.
But if you wanted to make a webpage such that a "printer friendly" version of the page is what gets sent to the printer without having to make a separate page for it, how would you do that?
You can achieve this effect by creating a css stylesheet which is targeted directly to printing, and another targeted directly for the screen.
Use the link tag:
<link rel="stylesheet" type="text/css" href="print.css" media="print, handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
to embed your stylesheet into your document.
To hide is easy, just set your block style to hidden in whatever stylesheet you want and it wont be displayed. For example:
.newStyle1 {
display: none;
}
Then anything set to the style of newStyle1 will not be displayed.
The #media rule in CSS can be used to define alternate rules for print.This is often used to hide navigation and change the style to fit print better:
#media print {
.sidebar { display: none; }
}
You can also link a seperate stylesheet for print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You can do this with the css when you specify media as print.
Another way, if desired, is to have the 'print' button on the page change the page in some way that you decide, then perform a javascript 'window.print();' to bring up the browser's print dialog.
There are several options available to you:
You can open a new window with slightly different data to be printed.
There are also CSS styles which you can use to alter the page layout.
Finally you can specify completly different style sheets for screen, printed media, Braille readers etc.
e.g. <link href="css/print.css" type="text/css" rel="stylesheet" media="print" />
See also CSS2 Print Reference
Use a print stylesheet.
Edit: Regarding the followup, you can't, in general, add things to a page with CSS.
One option is to include your print-only content in the page, and hide it for screen stylesheets. You should make sure that the page still makes sense without CSS though.
Another option is to use generated content, but this isn't supported by Internet Explorer 7 and below, and can be quite limited.
If the print-only content is an image, you can swap that out using one of the popular image replacement techniques.
The easiest way is to use CSS media types. For each CSS file you include, you can specify where it ought to be used: on-screen, when printing, for handhelds, for screen-readers, or various combinations of these.
Example: <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
This has been a standard since CSS2, and most browsers support it now. More information is available here: http://www.w3.org/TR/CSS2/media.html
CSS allows you to create stylesheets for particular types of media, meaning that you can have a stylesheet that only applies when you're printing a page, allowing you to cause it to be formatted differently.
Just include a media="print" attribute on your stylesheet link for that stylesheet.
This A List Apart article seems to be quite good on the subject.
I tried using different style sheets based on the media, but I ran into trouble getting all the options I needed in. Since then I usually redirect to a different entrance of our (Fusebox) framework (i.e. print.php in stead of index.php) which in essence is the same file except it sets an extra flag/constant.
In the XSL file associated with the page I then do additional work based on that flag/constant like leaving out the menu, columns of a table etc.
i.e. (Page shows a link that the user has to click to display the password on the screen. The print version has the password printed.)
if (!BOOL_PRINT)
echo "<TD class=\"tbl_teams_scroll_item\"><SPAN class=\"span_password_hidden\" id=\"span_password_{\$team_id}\" onClick=\"RevealPassword('{\$team_id}','{\$password}');\"><xsl:value-of select=\"/PAGE/TEXTS/HIDDEN\" /></SPAN></TD>\n";
else
echo "TD class=\"tbl_teams_scroll_item\"><xsl:value-of select=\"PASSWORD\" /></TD>\n";
You can define css rules that are specific to a media type. The following is a css example (copied from http://www.w3.org/TR/CSS2/media.html, section 7.2.1) that specifies different font sizes what gets displayed on a web page and what gets printed.
#media print {
BODY { font-size: 10pt }
}
#media screen {
BODY { font-size: 12pt }
}
#media screen, print {
BODY { line-height: 1.2 }
}
Alternatively, you can specify what media a stylesheet should be applied to when including it in a page:
<link href="webstyles.css" type="text/css" rel="stylesheet" media="screen"/>
<link href="printstyles.css" type="text/css" rel="stylesheet" media="print"/>
<link href="commonstyles.css" type="text/css" rel="stylesheet" media="screen,print"/>
Yet another option is to have a hidden IFRAME that you call iframe.contentWindow.print() on. That will allow you to create an invisible layout that prints exactly as you want it to.
Of course, an even better solution is to export the file to a PDF and let the user print it out that way. PDFs produce the highest quality output, period. However, it is one more hoop for the user to jump through, so the rule of thumb is:
PDFs for when the print layout matters
HTML for when the pure text is more important than the layout
Anything you can do with CSS you can do in a print stylesheet. This means you can hide content in the print version which is shown in the screen version or hide content in the screen version which you want to show up when printing.All you do is apply display:none to the appropriate sections in the appropriate stylesheet.
Also it is a good idea to size your text in points for the print version (which is a bad idea for the screen version - stick to pixels, ems or percentages here). There is universal agreement as to what printed point sizes are where as mappings of pixels to points will vary with different resolution devices.
nsayer mentions having a print button change the layout of your screen and then kicking off a window.print()
This is a solution that will probably have been overlooked by a lot of people and should be considered when you think your users want a little more of a WYSIWYG. It should probably be a "printer friendly" link though that changes the media type of your sheet sheets rather than "print this".
Using jquery, you could do something like this (not checked):
$(document).ready(function(){
$("#printFriendly").click(function(){
$(link[rel=link][media=screen]).remove();
$(link[rel=link][media=print]).attr("media","screen");
});
});