Introduction
This article is about the web technology for printing that has been implemented with CSS3. People are quite ignorant about the fact it exists and how it is one of the best tools to come to the CSS specification. This spawned from reading an article on PC Pro's website where to print the article it uses JavaScript.
This article will talk about how useful it actually is.
What is CSS3?
CSS3 is the latest specification of the cascading stylesheets language. It is used to describe how something from a website or XML document (or many other things) looks when it is rendered on to the computers display. It is a clever way of saving time for the end developer and stops the need for embedding bits of HTML into elements to style it. It gives a great flexibility to developers.
Some of the new features that CSS3 brings with it include the new box-shadow and border-radius properties. As of July 2014, these have only just passed into every browser prefix-free. Before this, they required vendor-specific prefixes as shown below for the box-shadow property.
-moz-box-shadow -ms-box-shadow -webkit-box-shadow -o-box-shadow
These were a terrible waste of time and made files larger for no reason other than compatibility. Now those days are nearly gone with a lot of the specification.
What about print?
The CSS3 specification introduces new 'media queries' that allows the browser to interpret the output medium (or media). This was primarily developed (and rushed out in CSS2.1) when the iPhone came out and the smartphone era begun. One of the media queries that was added later was the print media query. This means that websites can be print friendly (have you tried this website? Notice how it removes all the extra stuff).
To me print friendly sites are the best. It shows careful consideration for all types of design.
This is very important if you create tutorials, reviews or articles that users may potentially want to either download or print. Mac users for instance by default have a PDF printer built in, meaning that any website that you want to keep can be downloaded from the click of two buttons. If your tutorials are good enough, who knows who may use them, maybe teachers or universities.
So you will want to be prepared for the occasion.
What about JavaScript?
It's true that many websites use JavaScript to format the page to print but in reality this is a pretty old fashioned way of doing (it does however, offer backward compatibility with older browsers, but hey). I used to use JavaScript for printing because it saved writing the whole stylesheet, but then I learned of the beautiful CSS media query.
The problem with a lot of JavaScript solutions is that they do not work perfectly on mobile devices, and whilst not many people are going to print from a mobile device, it is still limiting a market.
Ok, sell me
CSS3 is not perfect. This article is not meant to force that idea, but CSS3 is getting there. It's purpose is becoming more and more flexible.
The print media query is one of the more useful features of CSS3 that most websites just do not implement.
Examples include Microsoft's website and CodeProject.com - two sites who get millions of visitors each month, yet not fully implemented. PC Pro (who sparked this article off) actually also implement the print media query, and it looks really good when printed.
So why is it important for a website with lots content to use the CSS print media query? The answer is very simple: people go for the print button in their browser before searching the website for a button saying print. Most people are acustomed to performing a page print this way.
So why make it harder for someone to print a page?
Making a site print friendly
Hiding elements
A site that is print friendly should remove content that is not required. That means sidebars, social icons, site links and menus amongst other elements need to be hidden. You should also have a class that can be given to any element that hides it when printed. This can be achieved by stating it in the CSS file.
@media print only{ #sidebar,#sitelinks,#menu{ display:none; } .noprint{ display:none; } }
Fonts and colours
Using a font that works well on a printer is also of the utmost importance since we tend to use sans serif style fonts on our websites but when users read from paper a serif font looks more attractive. This is an important design consideration.
Another important consideration: if your website is using something like a black background it will mean making it readable on a white paper background may involve a font colour change.
