CSSGOING TO PRINT

CSS can be used to specify how a document is presented

in different media.

We can determine which CSS rules are given to specific devices

using the media attribute:

<link rel="stylesheet” href="a.css” type="text/css" media="screen" />

<link rel="stylesheet” href="a.css" type="text/css" media="print" />

<link rel="stylesheet” href="a.css" type="text/css" media=”handheld" />

So, what are possible media

types?

There are ten media types defined in CSS 2.1

suitable for all devices

for speech synthesizers

for Braille tactile feedback devices

for paged Braille printers

for handheld devices

for print material

for projected presentations

for color computer screens

for teletypes and terminals

for television type devices

all

aural

braille

embossed

handheld

print

projection

screen

tty

tv

Can you specify more

than one at the same time?

Yes, you can use multiple media types within the one attribute:

<link rel="stylesheet” href="a.css” type="text/css" media="screen, print" />

Are there different

methods we can use?

There are five methods that can be used to specify media

for style sheets.

However, some methods are complex, and other can cause

issues in some browsers, so we will only look at the two safest

methods.

Method 1: <link> within HTML

You can use a <link> element in the head of your HTML document to specify the target media of an

external style sheet.

<link rel="stylesheet” href="a.css” type="text/css" media="print" />

Method 2:@media within CSS

You can specify the target medium within a CSS file using @media

@media screen {

body { color: blue; }}

What is this @media?

At-rules start with an '@' character followed immediately by an identifier (such as “media”

or “import”).

In CSS2.1 there are four possible at-rules:

- @charset- @import- @media- @page

We are only going to look at @media now, and focus on

how it can be used to deliver CSS to printers.

@media rules can sit anywhere inside your

external CSS style sheet.

body { color: red; }

@media screen {

body { color: blue; }}

@media rules include the @media statement, followed by a media type, followed by a start

and end bracket.

@media screen {

}

Any standard CSS rule can be added inside these brackets.

@media screen {

p { color: red; }#nav { float: left; }.intro { font-weight: bold; }

}

You can specify more than one media type using @media rules.

Each media type must be separated by a comma.

@media screen, print {

p { color: red; }#nav { float: left; }

}

How does @media work?

1. Different devices (such as browsers, printers and mobiles) will

see the <link> element in the HTML file.

<link rel="stylesheet” href="a.css” type="text/css" media=”all" />

2. These devices will then look at the CSS file.

3. The CSS file can included one or more @media rules, each

targeting a different device.

@media screen { }@media print { }@media handheld { }

4. Each device will only read the rules assigned to it, based on the

media type.

@media screen { }@media print { }@media handheld { }

If you want to specify more than one media type inside your CSS

file, make sure your <link> element uses a media type of “all”.

<link rel="stylesheet” href="a.css” type="text/css" media=”screen" />

<link rel="stylesheet” href="a.css” type="text/css" media=”all" />

Otherwise all the other different types of devices will not look inside

the CSS file at all.

Why use @media?

The main advantage of @media is that you only need one CSS

file, and it can be used to control all the different media.

@media screen { }@media print { }@media handheld { }

This means there are less hits to the server, and only one link in your HTML files, which makes

maintenance easier.

<link rel="stylesheet” href="a.css” type="text/css" media=”print" />

<link rel="stylesheet” href="a.css” type="text/css" media=”all" />

So, let’s talk about print CSS

Trying to set up print CSS can often be very frustrating for designers and developers.

There are a wide variety of different solutions to deal with:

Different operating systemsDifferent browsersDifferent printers

Different colour options

There are also a range of printing issues to deal with:

Background images not printingBackground colors not printing

Printing first page onlyBroken page layouts

Decision: Replicate or reduce

The two main main options for printing are:

Replicate what is on screenReduce to a print friendly version

Option 1: Replicating what is

on screen

To allow your pages to appear the same in print as on screen, you can simple adjust the media

type.

Add an additional media type to your @import rule.

@media screen, print { }

However, you should be aware that things are never that easy!

Background images and colors will not print for users as a default. This can make your screen design

look odd when printed.

Floats and absolutely positioned elements can sometimes cut off after the first page (especially in

some version of FireFox)

Layouts can sometimes cut off look squashed when printed.

Although it sounds more complicated, it is often much easier to deliver a print friendly version.

Option 2:Create new,

simpler rules for printers only

Linking to print CSSTarget: Screen and print

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

Create two @media rules - one for screen and one for print.

@media screen{ /* screen rules here */ }

@media print {/* print rules here */ }

Any tips for simple print

CSS?

Here are some pointers for easy print friendly pages.

Tip 1: Convert colors to black and white

where possible.

h1, h2, h3, h4, h5, h6 { color: #000; }

Tip 2: Hide sections of the page that

are unnecessary.

#navigation, #sidebar, #adbanner, #richfooter{ display: none; }

Tip 3: Convert links to default text color

and style - if you want!

a:link, a:visited{

color: #000;text-decoration: none;

}

Tip 4: Avoid floats, absolute positioning

and height 100%.

#container { float: none; }

Tip 5: Keep it simple! Remember that the

goal is to create a page that is easy to print and read.

Russ WeakleyMax Design

Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin:

linkedin.com/in/russweakley