...

View Full Version : print style sheet



vexen
12-23-2007, 01:09 PM
hello guys, while watching some of the most popular websites source codes that just understood their site was up to date from Netscape 4, i saw something interesting on msn's stylesheet :

yes it is used on a major website, but I'd still like to know what do you guys think about this method!


@media print {
form,object,#head,#foot,#nav,.advertisement,.noprint {
display:none
}
}

they also use it for the handheld :


@media handheld {
* {
clear:none !important;
float:none !important;
width:auto !important
}
}

i used to target my print sheet like this :


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

thank you !

Apostropartheid
12-23-2007, 01:46 PM
It's just a way of doing it without forcing another HTTP request (so it's quicker.) It's my personal preferred method.

vexen
12-23-2007, 01:49 PM
thanks, i did not even know this method existed,

but i guess anything specified in this stylesheet is also applied to the print sheet? i had so much trouble with firefox bug when printing floated elements over one page!

Apostropartheid
12-23-2007, 02:05 PM
It's simple for it not to apply.

@media screen {
mySelector {
myProperty: value;
}
}

effpeetee
12-23-2007, 02:06 PM
What is this post about.
It's all greek to me.

Frank

Apostropartheid
12-23-2007, 02:54 PM
It's about the @media rule in CSS.

You know how most people use attributes to bring in a different stylesheet for another media?
e.g.

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />Well, we have inbuilt rule in CSS to do this for us. With this, you can keep it all in one stylesheet, thereby reducing the amount of HTTP requests but adding to the total weight of the document.

It's formatted something like this:


/* CSS applied to every media */
body {
margin: 0;
padding: 0;
}

@media screen {
/* my screen CSS */
body {
font: 80&#37;/1.8 Verdana, Helvetica, Arial, sans-serif;
color: #333;
}
}

@media print {
/* my print CSS */
* {
font: 11pt/1.5 Calibri, Georgia, Verdana, "Times New Roman", serif;
color: #000;
}
}Which I would link to like this:
<style type="text/css" media="screen,print">
@import url("/css/screenprint.css");
</style>

Arbitrator
12-24-2007, 12:57 PM
thanks, i did not even know this method existed,If you need something to call the ďmethodĒ, itís called using a media at‐rule. Itís specified as part of CSS2.1. [1]


but i guess anything specified in this stylesheet is also applied to the print sheet?Yes. All of the style sheets applicable to print media (regardless of how they are called) are taken together and applied like they would be for screen media style sheets.


It's formatted something like this:


/* CSS applied to every media */
body {
margin: 0;
padding: 0;
}

@media screen {
/* my screen CSS */
body {
font: 80%/1.8 Verdana, Helvetica, Arial, sans-serif;
color: #333;
}
}

@media print {
/* my print CSS */
* {
font: 11pt/1.5 Calibri, Georgia, Verdana, "Times New Roman", serif;
color: #000;
}
}Which I would link to like this:
<style type="text/css" media="screen,print">
@import url("/css/screenprint.css");
</style>Personally, I would specify media="all" in the HTML/XHTML instead because, otherwise, youíre limiting the media that can be targeted by the CSS style sheet. To get an equivalent effect, you could rewrite your first rule as the following:


@media screen, print {
body { margin: 0; padding: 0; }
}


http://www.w3.org/TR/CSS21/media.html#at-media-rule

Apostropartheid
12-24-2007, 01:51 PM
Seeing as I'm only specifying print and screen rules, there's little point in troubling, say, a handheld device, due to the incredibly low transfer rates. I combine print & screen because...well, you print with a screen.

Arbitrator
12-24-2007, 03:10 PM
Seeing as I'm only specifying print and screen rules, there's little point in troubling, say, a handheld device, due to the incredibly low transfer rates. I combine print & screen because...well, you print with a screen.Ah, I didnít consider that line of thought since I donít use a handheld device to access the Web.

Assuming that handheld devices selectively download style sheets based upon media association, it looks like the best way to maintain flexibility (with regard to allowing oneself to define style rules for additional media types in the future without touching the HTML/XHTML) would be CSS3 Media Queries [1] then. Opera supports them, but I donít believe that theyíre otherwise well‐supported. Example:


<style type="text/css" media="not handheld">
@import url("/css/screenprint.css");
</style>

Of course, you would still lose flexibility in defining style rules for the handheld medium.


http://www.w3.org/TR/2007/CR-css3-mediaqueries-20070606/#syntax



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum