Login or Sign up Help | Site Map
Connecting Tech Pros Worldwide

Using @print to avoid multiple style sheets

Question posted by: Ed Jay (Guest) on July 1st, 2008 06:45 PM
I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.

For example...

If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?

..divClass1 {
text-align:left;
}
@print .divClass1 {
text-align:center;
}

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info
Would you like to answer this question?
Sign up for a free account, or Login (if you're already a member).
Joshua Cranmer's Avatar
Joshua Cranmer
Guest
n/a Posts
July 1st, 2008
06:55 PM
#2

Re: Using @print to avoid multiple style sheets
Ed Jay wrote:
Quote:
Originally Posted by
I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.
>
For example...
>
If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?


Corrected syntax:

@media print {
.divClass1 {
text-align: center;
}
}


--
Beware of bugs in the above code; I have only proved it correct, not
tried it. -- Donald E. Knuth

Ed Jay's Avatar
Ed Jay
Guest
n/a Posts
July 1st, 2008
07:05 PM
#3

Re: Using @print to avoid multiple style sheets
Joshua Cranmer wrote:
Quote:
Originally Posted by
>Ed Jay wrote:
Quote:
Originally Posted by
>I do not want to load two style sheets for screen and print media. I'm
>having difficulty grasping the use of the @print statement, or its syntax.
>Would someone please provide a simple explanation.
>>
>For example...
>>
>If I have a style sheet specifying media="all," is the following correct
>syntax to center text for printing, but not for screen presentation?

>
>Corrected syntax:
>
>@media print {
.divClass1 {
text-align: center;
}
>}

Thanks. I presume this will supercede a previous style for divClass1 in a
media=all sheet, as in the example I gave?

I also presume that I can include multiple declarations within the
@print {..}?

Thanks again.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

Harlan Messinger's Avatar
Harlan Messinger
Guest
n/a Posts
July 1st, 2008
07:05 PM
#4

Re: Using @print to avoid multiple style sheets
Ed Jay wrote:
Quote:
Originally Posted by
I do not want to load two style sheets for screen and print media. I'm
having difficulty grasping the use of the @print statement, or its syntax.
Would someone please provide a simple explanation.
>
For example...
>
If I have a style sheet specifying media="all," is the following correct
syntax to center text for printing, but not for screen presentation?
>
.divClass1 {
text-align:left;
}
@print .divClass1 {
text-align:center;
}
>


In CSS there is no such thing as @print. The correct form for what
you're trying to do is

@media print {
.divClass1 { text-align: center; }
}


Ed Jay's Avatar
Ed Jay
Guest
n/a Posts
July 1st, 2008
07:25 PM
#5

Re: Using @print to avoid multiple style sheets
Harlan Messinger wrote:
Quote:
Originally Posted by
>Ed Jay wrote:
Quote:
Originally Posted by
>I do not want to load two style sheets for screen and print media. I'm
>having difficulty grasping the use of the @print statement, or its syntax.
>Would someone please provide a simple explanation.
>>
>For example...
>>
>If I have a style sheet specifying media="all," is the following correct
>syntax to center text for printing, but not for screen presentation?
>>
>.divClass1 {
> text-align:left;
>}
>@print .divClass1 {
>text-align:center;
>}
>>

>
>In CSS there is no such thing as @print. The correct form for what
>you're trying to do is
>
>@media print {
> .divClass1 { text-align: center; }
>}


Thanks...that explains some weird behavior. :-)

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

Beauregard T. Shagnasty's Avatar
Beauregard T. Shagnasty
Guest
n/a Posts
July 1st, 2008
09:15 PM
#6

Re: Using @print to avoid multiple style sheets
Ed Jay wrote:
Quote:
Originally Posted by
I do not want to load two style sheets for screen and print media.


Mind listing the reason for that?

I find that a separate print style sheet greatly reduces maintenance.
For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style. The few you probably need would be
easily accessible in one small place.

Download time would be next to nothing.

--
-bts
-Friends don't let friends drive Windows

Ed Jay's Avatar
Ed Jay
Guest
n/a Posts
July 1st, 2008
09:45 PM
#7

Re: Using @print to avoid multiple style sheets
Beauregard T. Shagnasty wrote:
Quote:
Originally Posted by
>Ed Jay wrote:
>
Quote:
Originally Posted by
>I do not want to load two style sheets for screen and print media.

>
>Mind listing the reason for that?
>
>I find that a separate print style sheet greatly reduces maintenance.
>For one, you don't have to pore through hundreds of lines of screen
>styles looking for each print style. The few you probably need would be
>easily accessible in one small place.
>
>Download time would be next to nothing.


I thought it might be easier to have everything in one place. But, it's not
working out, so I've abandoned the idea.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

Bergamot's Avatar
Bergamot
Guest
n/a Posts
July 1st, 2008
10:15 PM
#8

Re: Using @print to avoid multiple style sheets

Beauregard T. Shagnasty wrote:
Quote:
Originally Posted by
>
I find that a separate print style sheet greatly reduces maintenance.


Not necessarily. Depends on how the CSS is organized, I think.
Quote:
Originally Posted by
For one, you don't have to pore through hundreds of lines of screen
styles looking for each print style.


The problem with that is some styles I often want for both screen and
print. That means either duplicating them in the print stylesheet, or
loading 2 stylesheets. Too much trouble for me to keep that stuff
straight. Besides, I never intermix screen only and print rules.

I prefer to use 1 stylesheet and section it off by media type. I've been
doing it this way for so long I know exactly where to look for certain
rules.

@media screen, projection, print {
global rules like heading fonts, floating images, etc.
}
@media screen, projection {
screen only rules like navigation, background images, etc.
}
@media print {
print only rules, like display:none for navigation, etc.
}

I suppose you could stick handheld in there, too, but I don't bother. If
they get info sans CSS, that's fine with me.
Quote:
Originally Posted by
Download time would be next to nothing.


It is. IIRC, at least some browsers retrieve all stylesheets whether
they need them or not, then apply the applicable rules depending on what
the user requests. It's fewer server calls putting them into 1 external
stylesheet.

If your CSS is huge, however, then you should rethink a few things. KISS
comes to mind. :)

--
Berg

Ed Jay's Avatar
Ed Jay
Guest
n/a Posts
July 2nd, 2008
12:25 AM
#9

Re: Using @print to avoid multiple style sheets
Bergamot wrote:
Quote:
Originally Posted by
>
>Beauregard T. Shagnasty wrote:
Quote:
Originally Posted by
>>
>I find that a separate print style sheet greatly reduces maintenance.

>
>Not necessarily. Depends on how the CSS is organized, I think.
>
Quote:
Originally Posted by
>For one, you don't have to pore through hundreds of lines of screen
>styles looking for each print style.

>
>The problem with that is some styles I often want for both screen and
>print. That means either duplicating them in the print stylesheet, or
>loading 2 stylesheets. Too much trouble for me to keep that stuff
>straight. Besides, I never intermix screen only and print rules.
>
>I prefer to use 1 stylesheet and section it off by media type. I've been
>doing it this way for so long I know exactly where to look for certain
>rules.
>
>@media screen, projection, print {
global rules like heading fonts, floating images, etc.
>}
>@media screen, projection {
screen only rules like navigation, background images, etc.
>}
>@media print {
print only rules, like display:none for navigation, etc.
>}
>
>I suppose you could stick handheld in there, too, but I don't bother. If
>they get info sans CSS, that's fine with me.
>
Quote:
Originally Posted by
>Download time would be next to nothing.

>
>It is. IIRC, at least some browsers retrieve all stylesheets whether
>they need them or not, then apply the applicable rules depending on what
>the user requests. It's fewer server calls putting them into 1 external
>stylesheet.
>
>If your CSS is huge, however, then you should rethink a few things. KISS
>comes to mind. :)


My intended scheme was based on organization as well. I only write for
screen and print media. My style sheets are alphabetically organized, and I
was considering adding the media print definitions immediately following the
individual screen styles. Unfortunately, that doesn't seem feasible, or at
least make a lot of sense, because it appears that styles for each media
have to be grouped under a media type, such as you have done. That doesn't
accomplish what I wanted to do.

I quaffed a beer and took a nap instead.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

Jim Moe's Avatar
Jim Moe
Guest
n/a Posts
July 2nd, 2008
08:25 PM
#10

Re: Using @print to avoid multiple style sheets
On 07/01/08 11:57 am, Ed Jay wrote:
Quote:
Originally Posted by
Quote:
Originally Posted by
>>
>>Corrected syntax:
>>
>>@media print {
> .divClass1 {
> text-align: center;
> }
>>}

Thanks. I presume this will supercede a previous style for divClass1 in a
media=all sheet, as in the example I gave?
>

Only if it comes after the stylesheet for divClass1.
Quote:
Originally Posted by
I also presume that I can include multiple declarations within the
@print {..}?
>

You mean "@media print { ... }"?
Yes. It is like any other style ruleset, just restricted to print media.
The normal ruleset has an implied "@media all { ... }".

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Ed Jay's Avatar
Ed Jay
Guest
n/a Posts
July 2nd, 2008
09:45 PM
#11

Re: Using @print to avoid multiple style sheets
Jim Moe wrote:
Quote:
Originally Posted by
>On 07/01/08 11:57 am, Ed Jay wrote:
Quote:
Originally Posted by
Quote:
Originally Posted by
>>>
>>>Corrected syntax:
>>>
>>>@media print {
>> .divClass1 {
>> text-align: center;
>> }
>>>}

>Thanks. I presume this will supercede a previous style for divClass1 in a
>media=all sheet, as in the example I gave?
>>

Only if it comes after the stylesheet for divClass1.
>
Quote:
Originally Posted by
>I also presume that I can include multiple declarations within the
>@print {..}?
>>

You mean "@media print { ... }"?
Yes. It is like any other style ruleset, just restricted to print media.
The normal ruleset has an implied "@media all { ... }".


Thanks, Jim.

--
Ed Jay (remove 'M' to reply by email)

Win the War Against Breast Cancer.
Knowing the facts could save your life.
http://www.breastthermography.info

 
Not the answer you were looking for? Post your question . . .
182,317 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

  • Didn't find the answer you were looking for?
    Post Your Question
  • Top Community Contributors