Random CSS – @media
Have you ever had a div block which acted like a container (such as for centering) for your page content that looked absolutely wonderful on your screen, but when you went to print it, the alignment on paper was atrocious? For a quick fix, try surrounding your CSS block for your div id/class as so:
@media screen {
#container {
yadda yadda
}
}
The @media rule allows you to specify a target for rendering a specific set of CSS commands. Here we are specifying that the #container id be only applied when rendering the page on a screen. When you print the page, the browser will ignore this rule and display the content as if the containing div was not there.
You could also use it to hide or show certain things when you print the page. Below is code for hiding a footer div when printing:
@media print {
#footer {
display: none;
}
}
One thing you could use @media to show something extra is for hyperlinks. Usually the hyperlink is embedded into the anchor and is not named same as the URL.
@media screen {
.printedlink {
display: none;
}
}
You could have a span block with the link class specified that contained the URL to where the link points. Place this right after the hyperlink like:
<a xhref="http://www.google.com" >Google</a> <span class="printedlink">[www.google.com]</span>
This would not be visible on screen, but when the page is printed, it will insert the [www.google.com] right after the word Google. Yup. It’s that much fun.
