I'm creating some print specific styles using the following:
#media print {
/* Styles */
}
As we are using SASS all the styles get compiled into one stylesheet, styles.css at runtime, which is declared in the <head> of the document as follows:
<link rel='stylesheet' href='/assets/css/styles.css'>
Now when I print from chrome (Ctrl+P), it completely ignores my print styles but Firefox (30.0) is fine. IE(11) is terrible but this is because we have a lot of show/hide panels which IE doesn't seem to like/
Can't for the life of me figure out what's happening. If I emulate print media in Chrome then it loads the styles fine, it's when I actually try and print that it doesn't work. I've tried loads of things, adding, media= attributes, double quotes, changing the order of href etc all to no avail!!
Note, we're not using type anymore as I thought you didn't need to use this anymore. I've tried adding this anyway but it still doesn't work!
I've even tried this: http://lawrencenaman.com/optimisation/print-media-queries-not-working/ but it still doesn't work. It's driving me crazy, any ideas?
UPDATE: So I noticed that when I hit Ctrl + P to print the page, the preview that I see seems to use some of the styles from the print stylesheet but seems to render everything using a mobile media query? I think there may be some conflict with a breakpoint, will update when I get a chance.
UPDATE2: I can see that the print stylesheet is loading at the bottom so this should in theory over write all the other media queries (at least the ones that I'm trying to over write)?
I tried to add
#media print {
* {
display:none;
}
}
to one of my sites' style.css: Doesn't work.
Then I added
<link rel="stylesheet" href="/css/print.css" media="print">
after the other stylesheets into the head and inserted the same rule as above (without #media print {}) to the print.css. Chrome now interprets the rule and does not display anything within the print preview.
I'd assume the problem is using #media print. But I have no idea why chrome behaves like that.
EDIT:
Other Solution via JavaScript:
if(/chrome/i.test(navigator.userAgent) {
document.write('<link rel="stylesheet" href="printChrome.css" media="print">');
}
You can try setting rest of the stylesheets media attribute as
media="screen" and print stylesheet to media="print".
This will prevent browser from applying rules from stylesheets marked as "screen".
Worked for me
I ran into this problem as well and found that it was because of my rendering settings in Chrome. When testing the print preview I had set my emulation media type to be "print". When I went to actually test printing, I set my media emulation to be "screen". I should have set it to be "no emulation". When it was on "screen" the print preview ignored all the print media queries and still treated the page like it was a screen. When I finally set it back to "no emulation" it started behaving as you would expect.
A problem I had was that rel='stylesheet' wasn't set in the print css link. Adding it fixed the problem.
Another way to make this happen: CSS errors ahead of the print styles. Since we all seem to have the impulse to put print styles last they're more vulnerable to this. When CSS has an error it doesn't complain... it just throws away the rest of the stylesheet.
Giving the print styles their own stylesheet--even merely a separate inline tag--can solve this as well as the media-spec'd-in-style-tag error.
Related
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 creating media queries for a page but I'm having a problem in getting them to break at exactly the points specified in my media queries.
For example I have:
#media all and (max-width:1000px) {
header nav ul.nav_items li a {
padding:15px 10px 15px;
}
}
But when I use Chrome and open the dev tools, and observe the viewport/width of the browser, the CSS rules take effect at somewhere around 1226px. Why aren't the CSS rules being applied at exactly 1000px?
Here is a jsfiddle of my HTML/CSS: https://jsfiddle.net/at68m0zp/
By moving the media query to the end of your CSS file, you will make it override the set values. The later something appears (and the more specific it gets) the more preference it receives. Because your query is at the start of the file, any changes to your header nav's display property later does not get applied. Please not that media queries do not increase specificity or get any special treatment, they just get ignored until they are in the range defined by them.
So there is probably a snippet later in your file with a max-width of, say, 1000px. Because it comes after your 900px one but the screen size makes both valid, the 1000px one takes effect.
I had a snippet with the changes but because you posted your entire HTML and CSS it is too long to post here. Trust me, it works if you move it to the end
326px difference is definately not 'inaccuracy'. Something is broken here big time. I might guess that you have more media queries and mistaken min-width max-width setups somewere.
The best to check what is actually going on:
Firefox - hit F12 (or open Dev Tools when on Mac)
Go to 'Style Editor' in Dev Tools top bar
Column on the right shows list of #media rules (breaking points)
Have fun and good luck with debug.
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"
I am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
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");
});
});