473,241 Members | 1,963 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,241 software developers and data experts.

Best practices question

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
Nov 23 '05 #1
7 1715
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
Nov 23 '05 #2

"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
Nov 23 '05 #3
"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
Nov 23 '05 #4
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.

Nov 23 '05 #5
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
Nov 23 '05 #6
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
Nov 23 '05 #7
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
Nov 23 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

136
by: Matt Kruse | last post by:
http://www.JavascriptToolbox.com/bestpractices/ I started writing this up as a guide for some people who were looking for general tips on how to do things the 'right way' with Javascript. Their...
13
by: john doe | last post by:
A quick question, about so-called 'best practices', I'm interested in which of A/B of the two examples people would choose, and why. public enum MyEnum { Option1 = 0, Option2 = 1, Option3 =...
1
by: Vincent V | last post by:
Hey i am just starting a new project and from the start i want to make sure my app is as Object Orientated as possible I have a couple of questions in relation to this Question 1: Should i...
3
by: Derek Martin | last post by:
Hi list, I have been doing VB.Net for quite a while now and just now getting into the forray of ASP.Net using VS2003. I have created our development website and now we are ready to start putting...
10
by: jojobar | last post by:
Hello, I am trying to use vs.net 2005 to migrate a project originally in vs.net 2003. I started with creation of a "web site", and then created folders for each component of the site. I read...
8
by: SStory | last post by:
When I right a class, I am wondering what are the best practices for error handling? Do I try..catch and trap the error and if so what do I do with it? Because most likely the class user will...
15
by: Andrew Brampton | last post by:
Hi, This may sound a odd question, but I wanted to know how you return a list of data from a function. These are some of the ways I know how, and I was wondering which method you normally use....
10
by: Ren | last post by:
Hi All, I'm still rather new at vb.net and would like to know the proper way to access private varibables in a class. Do I access the variable directly or do I use the public property? ...
17
by: 2005 | last post by:
Hi In C++, are the following considered best practices or not? - passing aguments to functions (ie functions do not take any arguments ) - returning values using return statement Anything...
41
by: Jim | last post by:
Hi guys, I have an object which represents an "item" in a CMS "component" where an "item" in the most basic form just a field, and a "component" is effectively a table. "item" objects can be...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.