Print CSS - Beyond Styling for Screen
Introduction
So everyone knows that the past 4-5 years has seen a fairly dramatic change in the way we build web pages, the three tier design pattern has been progressively pushed and designers are finally starting to realise that sites created using a mixture of content and styling markup (tag-soup) is no longer acceptable.
With the invent of CSS some time around the late 90's came the ability to strip out all markup in (X)HTML that focused on styling the way that the final page appeared. A page could be created containing simply content, marked up in a clear and semantic way and not have to give a second thought about how that content would appear to the user, at least not at this stage. Tabular data was placed within a table, lists (ordered, unordered and descriptive) were placed in their respective markup (ol, ul, dl), headings given their appropriate level of importance and so on, the page could then be uploaded.
After the production of the content, thought could be placed on how the page may look, this step may even be handed over to a pure designer, someone who has had no input in the creation of the content itself thus paving the way for much clearer workflows to be achieved. The designer could then apply all desired styles without having to touch the content (the style would have to be linked to the document from within the head of the page).
Brief CSS benefits
Separating content from style has a number of additional benefits above and beyond helping to compartmentalise the work flow. For a start speed: when a user views the page they first must download the content, they then download the attached stylesheet at which point the styles are then applied to the page. However this stylesheet is subsequently cached by the browser, meaning that by defining a site wide set of styles the user must only download this once. Subsequent pages are then requested and only the content must be transferred each time. A quicker user experience and smaller server loads are the by-product of this.
By defning a site-wide style sheet consistency is inherently achieved, a designer may construct a style sheet meaning any further content added to the site by any author will instantly take on the set of rules defined and adopt the site look and feel..bonus! 3 Months down the line the powers that be decide they want to change all the sub-headings on the site to be more readable, 1.3em Arial is the order of the day. But hang on, the site is over one hundred pages in size and each page averages around 3 sub-headings, thats anywhere up to three hundred headings to be changed, which can be achieved through the addition/editing of a single rule! A slightly contrived example agreed, but non the less it makes the point. Code centralisation as something as a programmer I am always trying to achieve, and style sheets allow us to centralise our styles perfectly.
Beyond styling for screen
Ok so we are sold on CSS, we have read the copious amount of documentation and have employed it on our site, what more is there to do? Well, try printing your site, does the print out reflect the online identity that your site aims to achieve? 90% of users will probably be saying no!
Chances are that sites will fall into one of two scenarios, either users link their style sheet and aim it at both screen and print media (along with a plethora of others) or they simply aim it at screen only. So you will land somewhere between a half attempt or no attempt at styling the printed page.
When I print a page off, I hope for a few things, no reams of pages with a single image or link at the top, and that the content I am hoping to read is actually legible. So how can this be achieved?
When we link a stylesheet we can specify a 'media' attribute. [NOTE the absence of a 'media' attribute means that your CSS will be applied to ALL devices regardless]. When aiming at online viewing this attribute should be specified as 'screen'. There are a number of other possibilities for this but the one we are interested in is 'print'. By selecting print these styles are applied when the user prints your page out, so what can be done to make this process as painless as possible?
Figure 1: Media Specific Stylesheets
Link: <link rel="stylesheet" type"text/css"
href="print.css" media="print">
Import: @import url(paged.css) print,projection;
Inline: <style type="text/css">
@media print {
body {font-size: 10pt;}
}
@media screen {
body {font-size: medium;}
}
</style>
Fig. 1 above shows three different techniques of specifying media types for CSS. The first option (link) makes use of the 'media' attribute, and in this instance specifies print, this can however be a comma separated list of multiple media types to be targeted. Option two (Import) shows how to specify media when using the CSS import statement. @import is a CSS selector and as such must be parsed as CSS, i.e. within style tags etc. The final third option (Inline) shows another way to specify different media targets inline, this can be useful in certain situations where you are confined to using a single CSS file.
When attempting to print a site the environment changes totally, links are no longer applicable and so the standard navigation set we have provided no longer has meaning or purpose, our width is now absolutely constrained and users are having to pay for each splash of colour we provide! Nearly all modern browsers also enforce that any background images we have provided are not printed out.
next >>
(page 2 of 2)