Best practices question

[Rhino]

I thought I'd take a second to step away from a specific problem and ask a
general question about best practices; I know some of the people here are
very experienced with CSS.

Given the need to have different CSS for printing than for screens, which of
these two options is the best approach?
1. Have a single CSS for each media, then use different <link> tags for each
media?
2. Have one CSS that includes all rules and use @media rules to define the
rules that control all layout and formatting for the site?

Or is there an even better way that hasn't occurred to me yet?

--
Rhino

[Beauregard T. Shagnasty]

Rhino wrote:

I thought I'd take a second to step away from a specific problem and
ask a general question about best practices; I know some of the
people here are very experienced with CSS.

Given the need to have different CSS for printing than for screens,
which of these two options is the best approach?
Neither, actually.
1. Have a single CSS for each media, then use different <link> tags
for each media?
No, that doesn't work.
2. Have one CSS that includes all rules and use @media rules to define
the rules that control all layout and formatting for the site?
That sentence is hard to parse. <g>
Or is there an even better way that hasn't occurred to me yet?

Have a css file for media=screen with no special reference to @media.
Have a second css file for media=print, and put just the things you want
to be *different* from the screen file.

I use print style sheets as well. In one of them, the only items in it
are:

..ahem { display: none; }
body { background-color: #fff; }
#boxbanner { display: none; }
#boxcontent { border: none; margin: 0; width: 95%; }
..boxfooter { display: none; }
#boxnav { display: none; }
..noprint { display: none; }
..page { page-break-after: always; }
..totop { display: none; }

The banner, menu, and footer are not printed. That's the standard stuff
to exclude from a print. The site is: http://countryrode.com/

--
-bts
-Warning: I brake for lawn deer

[Rhino]

"Beauregard T. Shagnasty" <a.*********@example.invalid> wrote in message
news:ve****************************@40tude.net...

Rhino wrote:

I thought I'd take a second to step away from a specific problem and
ask a general question about best practices; I know some of the
people here are very experienced with CSS.

Given the need to have different CSS for printing than for screens,
which of these two options is the best approach?

Neither, actually.

1. Have a single CSS for each media, then use different <link> tags
for each media?

No, that doesn't work.

2. Have one CSS that includes all rules and use @media rules to define
the rules that control all layout and formatting for the site?

That sentence is hard to parse. <g>

Or is there an even better way that hasn't occurred to me yet?

Have a css file for media=screen with no special reference to @media.
Have a second css file for media=print, and put just the things you want
to be *different* from the screen file.

I use print style sheets as well. In one of them, the only items in it
are:

.ahem { display: none; }
body { background-color: #fff; }
#boxbanner { display: none; }
#boxcontent { border: none; margin: 0; width: 95%; }
.boxfooter { display: none; }
#boxnav { display: none; }
.noprint { display: none; }
.page { page-break-after: always; }
.totop { display: none; }

The banner, menu, and footer are not printed. That's the standard stuff
to exclude from a print. The site is: http://countryrode.com/

Thanks for the advice - and a living example! I'm going to mull this over
and see what I can come up with.

Rhino

[Spartanicus]

"Rhino" <no***********************@nospam.com> wrote:

I thought I'd take a second to step away from a specific problem and ask a
general question about best practices; I know some of the people here are
very experienced with CSS.

Given the need to have different CSS for printing than for screens, which of
these two options is the best approach?
1. Have a single CSS for each media, then use different <link> tags for each
media?
2. Have one CSS that includes all rules and use @media rules to define the
rules that control all layout and formatting for the site?

Or is there an even better way that hasn't occurred to me yet?

Browser support for CSS media is buggy, of the relevant browsers I know,
IE and Opera are the main problem. Method 2 triggers browser bugs,
method 1 works reasonably well, link the main screen stylesheet with a
single media="screen", wrap a "@media print{...}" wrapper around the CSS
in your print stylesheet and don't combine rules in your print
stylesheet, for example use:

#nav{display:none}
#panel{display:none}

not:

#nav,#panel{display:none}

If you are not using tables for layout and your HTML is properly
structured then your print stylesheet should only contain a few rules.

--
Spartanicus

[Garmt de Vries]

Rhino wrote:

Given the need to have different CSS for printing than for screens, which of
these two options is the best approach?
1. Have a single CSS for each media, then use different <link> tags for each
media?
2. Have one CSS that includes all rules and use @media rules to define the
rules that control all layout and formatting for the site?

This discussion has come up before. I seem to remember that many
browsers download all linked stylesheets anyway, regardless of the
media specified. The rationale behind that is that even a screen.css,
linked for media="screen" may contain an @import for print. Personally,
I think this is rubbish, if you specifically set media="screen", then
everything inside screen.css, including @import rules, should only
apply to the medium screen.

A user agent should retrieve all stylesheets for the media it can
handle. For normal desktop browsers, this usually means screen and
print. So if they need both, why not put it in one file? Anyway, much
of your style will be common to all media, and you only need a few
extra lines for print. Rather than have an extra request from the
server, I tend to include these extra styles in the one stylesheet I
have. But this is really a matter of personal preference.

The way I do it for www.jules-verne.nl is this:

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

In style.css, I have:

@media screen, projection, print {
/* Styles common to all these visual media: headings, tables, floats,
etc. */
}

@media screen, projection {
/* Styles that aren't needed in print, mainly styling of the menu and
of the links */
}

@media print {
/* Some print-specific stuff: no menu, black on white, no background
images etc. */
}

@media projection {
/* Sans-serif font (I use serif for the screen) */
}

@media print, projection {
/* Styles for paged media: page breaks, widows, orphans */
}

Old browsers that can't handle @media rules won't apply any styling at
all. In my opinion, that's only an advantage, since these browsers
frequently mess it up anyway. I don't care if NN4 users get a plain old
1995-looking page, at least it's usable and they get all the content.

As for other media:

I have a separate link for handheld:
<link rel="stylesheet" href="/style/handheld.css" type="text/css"
media="handheld"></link>

The handheld.css is a separate file, because handhelds don't need all
the other CSS, so I'd better spare them the kB. I also noticed that
Opera in small screen mode doesn't download a handheld CSS file unless
you explicitly specify media="handheld". Even media="all" doesn't work.
I don't know how PDAs or mobile phones behave.

The drawback of a separate handheld.css is that it also gets downloaded
by Internet Explorer, Netscape and other browsers that have no use for
it. Waste of bandwidth, but that can't be helped.

I will soon have a new computer, and I'll be able to use Opera Voice,
which supports the CSS3 Speech Module. Some of the CSS2 aural
properties are included in speech. I'll be glad to experiment with
speech CSS at last. Not sure yet if I should put a couple of lines of
speech styling into the common CSS, or create a separate speech.css.

Just some considerations, and others may have another philosophy (which
I'd gladly hear about!)

--
Garmt de Vries.

[Stan Brown]

Tue, 15 Nov 2005 22:26:39 GMT from Beauregard T. Shagnasty
<a.*********@example.invalid>:

Have a css file for media=screen with no special reference to @media.
Have a second css file for media=print, and put just the things you want
to be *different* from the screen file.
....
The banner, menu, and footer are not printed. That's the standard stuff
to exclude from a print. The site is: http://countryrode.com/

and the home page contains these two lines:
<style type="text/css" media="screen">@import "../style/rode4.css";
</style>
<link type="text/css" rel="stylesheet" href="../style/crprint.css"
media="print" />

Maybe I'm extra dense today, but for printing isn't the media=print
style sheet used _instead_ of the media=screen one?

For your scheme -- which appeals to me -- of putting only the
exceptions in a print style sheet, shouldn't the main one have no
media designation at all?

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Beauregard T. Shagnasty]

Stan Brown wrote:

Tue, 15 Nov 2005 22:26:39 GMT from Beauregard T. Shagnasty
<a.*********@example.invalid>:

Have a css file for media=screen with no special reference to @media.
Have a second css file for media=print, and put just the things you want
to be *different* from the screen file. ...

The banner, menu, and footer are not printed. That's the standard stuff
to exclude from a print. The site is: http://countryrode.com/

and the home page contains these two lines:
<style type="text/css" media="screen">@import "../style/rode4.css";
</style>
<link type="text/css" rel="stylesheet" href="../style/crprint.css"
media="print" />

Maybe I'm extra dense today, but for printing isn't the media=print
style sheet used _instead_ of the media=screen one?

Yes, I think that is the case.
For your scheme -- which appeals to me -- of putting only the
exceptions in a print style sheet, shouldn't the main one have no
media designation at all?

Dunno. I copied it from someone else, long time ago. The "@import"
trick is to keep old Nutscrape 4 from seeing it.

--
-bts
-Warning: I brake for lawn deer

[Beauregard T. Shagnasty]

Stan Brown wrote:

For your scheme -- which appeals to me -- of putting only the
exceptions in a print style sheet, shouldn't the main one have no
media designation at all?

I just removed the media=screen from the main style sheet, and all of
those styles work in the print view, with the exception of the changes
in the print sheet.

--
-bts
-Warning: I brake for lawn deer