Saturday, September 14, 2013

CSS-Tricks Finally Gets A Print Stylesheet

I’ll start by showing you the entire stylesheet, then I’ll explain a little bit about what I was thinking.

body {
font-family: Georgia, serif;
background: none;
color: black;
#page {
width: 100%;
margin: 0; padding: 0;
background: none;
#header, #menu-bar, #sidebar, h2#postcomment, form#commentform, #footer {
display: none;
.entry a:after {
content: " [" attr(href) "] ";
#printed-article {
border: 1px solid #666;
padding: 10px;

1. Make the type as readable as possible

On the web, the body type for articles here is a sans-serif. On the printed page, I think that serif fonts are easier to read so I reset the font-family to Georgia. No background and black text is the default, but just in case, I explicitly declare it in the body.

2. Use as much of the page as possible

Again, I think this is default behavior, but since I wrap my content in a “page” tag anyway I thought I would make use of that to set a 100% width and remove any margin and padding.

3. Default styling ain’t bad for print

Notice that I didn’t do typographic styling whatsoever except setting the font. Default print styling does, what I feel, is a pretty decent job here on it’s own. This is assuming that you are using quality markup. In my articles, the title is an <h2> tag, the sub-titles are <h3> tags, and the body paragraphs are in <p> tags. This results in a nice hierarchy of font sizes on the printed page without any styling necessary.

Code samples, which are wrapped in <code> and <pre> tags default to a monospace font, which is great. Unordered lists get a healthy indent and are bulleted.

3. Remove the extra stuff

Chances are, if someone is printing an article of yours it is because they want to save the content as reference material, read it later, or share it with a friend. They really don’t need to see your page navigation, sidebar, or fancy footer. Again assuming that you have nice and semantically marked up code, removing those sections should be as easy as setting the display value of the parent elements of those areas to none.

4. Display the URLs in the body content

[Thanks to David Walsh for this idea] Links in your content don’t do any good on the printed page. It would be pretty cool if you could just tap the linked word with your finger and it would open the webpage on your computer, but thats something I haven’t even seen in the movies yet. For now, we can just use CSS pseudo class “:after” to drop in the URL right next to the link, using the content attribute. IE doesn’t support it, but c’est la vie.

5. Include a thank-you note

At the end of my content, I put a little “thank you” note. This area gets hidden on the web, but is displayed when printing the article. I think it’s just a nice touch and also serves as a reminder they should come back to the website for fresh stuff.

6. Optional: Page breaks

I didn’t feel my articles really warranted specific page breaks, but if you write really long articles with sub headers, you should definitely consider placing page breaks before each of those sub headers. Another place that would be good to use a page break is right before a fairly large table. Nothing is worse than having to flip between pages looking at a table because it happened to fall overlapping two pages when it could have fit onto one. I plan to use these on a case-by-case basis. More on page breaks here.

Source :

Sunday, September 8, 2013

At @ Rule CSS

The default way to include an external stylesheet is to use the the link tag inside your pages head:

<link rel="stylesheet" type="text/css" href="default.css" />

That is a tried and true method and supports the whole spectrum of browsers from old and ancient to hip and modern. But let’s say you grow tried of the old and ancient… You don’t want your page to be completely unusable, but you would rather it look completely non-styled than broken and clumsy. You could use an @ rule to declare your CSS instead like this:

<style type="text/css" media="all">@import url(default.css);</style>

This leaves outdated browsers like Netscape 4.x out of the mix and will deliver to them a style-less page. Assuming your markup is good, you should be fine.

At-Rules are good for other fanciness, but none of it as globally effective as this. Internet Explorer (IE) supports the embedding of external font faces with @ rules, which is something every designer should drool over, but IE is the only one on the bandwagon which makes it mostly pointless and implementing it would be a step in the wrong direction. A better way to embed font’s (on a small scale) is to use sIFR, which we will cover if we can find some way to relate it to CSS =)