Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts

    Post print style sheet

    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!

    Code:
    @media print {
    form,object,#head,#foot,#nav,.advertisement,.noprint {
    display:none
    }
    }
    they also use it for the handheld :

    Code:
    @media handheld {
    * {
    clear:none !important;
    float:none !important;
    width:auto !important
    }
    }
    i used to target my print sheet like this :
    Code:
    <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 !

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It's just a way of doing it without forcing another HTTP request (so it's quicker.) It's my personal preferred method.

  • #3
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    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!

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    It's simple for it not to apply.
    Code:
    @media screen {
        mySelector {
            myProperty: value;
        }
    }

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    What is this post about.
    It's all greek to me.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.
    Code:
    <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:

    Code:
    /* 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:
    Code:
    <style type="text/css" media="screen,print">
        @import url("/css/screenprint.css");
    </style>
    Last edited by Apostropartheid; 12-23-2007 at 03:06 PM.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by vexen View Post
    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]

    Quote Originally Posted by vexen View Post
    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.

    Quote Originally Posted by CyanLight View Post
    It's formatted something like this:

    Code:
    /* 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:
    Code:
    <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:

    Code:
    @media screen, print {
    	body { margin: 0; padding: 0; }
    }
    1. http://www.w3.org/TR/CSS21/media.html#at-media-rule
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by CyanLight View Post
    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:

    Code:
    <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.

    1. http://www.w3.org/TR/2007/CR-css3-me...070606/#syntax
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •