@media print vs media=print

maintenance (and other) issues?

[TheDoctor]

I run an academic-related site that contains (amongst other things) plenty of information that users may want to print off. I therefore use CSS to format web pages differently for display and print (eg fonts are defined as "pt" for printing, "%" for display, the menu is defined as "display:none" when printing, etc).

I keep the print CSS in a separate file, defined in the head of the web page with the "media=print" attribute. But recent discussions in this forum about the use of @media made me wonder whether or not I'd be better off using this rule within a single CSS file for both display on a screen and printing.

Thus, for example, I have a class "signpost", used for such things as links to the top of a page. Links to the top of the page are, of course, extremely useful to come across every couple of paragraphs or so when reading a piece of text on a screen, but a useless annoyance on a piece of paper.

Currently, I have an entry in my general CSS file saying:

.signpost { font-size: 85%; text-align:right; }

and a corresponding one in my print CSS file saying

.signpost { display:none; }

I'm wondering if it might make things more maintainable if I held both in the general CSS file in the form:

.signpost { font-size: 85%; text-align:right; }
@media print { .signpost { display:none; }}

(and similarly for the other classes that I need to treat differently for print and display).

The point here is that use of @media means that the complete description of each class can be held together, the whole thing all in in the same file, rather than parts of the description in separate files.

Has anyone any experience of this? Does it make maintenance easier, or is there something that I'm missing? Has anyone any horror stories to warn me off?

A subsidiary (but related) question concerns how browsers treat the two ways of doing this. As far as I understand it, the results should be the same. But if there's one thing I've learned from this forum, it's that you can't assume that, because results should be the same, they will be the same. Any opinions/warnings about this?

[Nick_W]

It's what I do ;-)

Nick

[TheDoctor]

Thanks. It looks like it's the easy way to go, but all the stuff I've read only mention the separate media="print" option - when they discuss the issue at all.

[grahamstewart]

In theory media="print" is useful when reducing your download times is important as the browser doesn't have to download the print stylesheet until you actually want to print something.

In practise I'm pretty sure that most browsers actually download the print stylesheet with the rest of the page - but I would hope that they have the sense to leave it till last.

If you go with the @media rule then your styling must be downloaded by the browser, regardless of whether the user intends to print or not.