SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Print css

  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Print css

    For a print css, I remove various elements with {display:none}.

    That's fine until I add something which I then forget to add to the print.css.

    Is there a way to use * {display:none} to remove everything, then add-back the 'wanted' bits?

  2. #2
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can hide things based on their element type and the overrule it for specific elements. The only problem with this is you would have to make sure you entire "ladder" of elements is shown.

    For example:

    HTML Code:
    <html>
      <body>
         <div id="wrap">
             <div id="content">
                  <div>Content I don't want to print.</div>
                 <div class="main">
                     <div> blah</div>
                     <div> some more content I want to see</div>
                 </div>
                  <div> More content I don't want to print</div>
              </div>
         </div>
      </body>
    </html>
    Would require:

    Code CSS:
    div{
    display:none;
    }
     
    div#wrap{
    display:block !important;
    }
     
    div#content{
    display:block !important;
    }
     
    div.main{
    display:block !important;
    }
     
    div.main div{
    display:block !important;
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Maybe my brain has collapsed on itself, but in my test of the above code, 'Content I don't want to print.' doesn't appear when viewing.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Good question! Thats another good argument for pro media="screen". I keep going back and forth as to which way is better "all" vs "screen" etc. For the time being I have separated them out like the example below.

    So by your question I will assume that you have a generic .css link in the head of your doc which does not include a media type. This is the same as specifying media="all". So as you said when you write your print rules you are having to cancel some of the "all" rules. One way to alleviate this problem is to specify media="screen" instead in your .css link. That way instead of taking rules away with your print version you simply are adding rules that you want. That way when you add or change things in the future you will not have to change your print version as well. Mine look like this - in this order.

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

    Also here is a piece of what I wrote about the same in another post of mine recently. If you do "screen" then your just adding rules with print etc. If you do "all" then your taking rules away with print etc. One of the interesting arguments I read in favor of "screen" was that if you use "all" and "print" then each browser has to combine those rules when printing (same with handheld, etc). In their tests they showed that each browser combined the rules slightly differently when printing. Therefore this particular person (I don't remember where I read it) says to separate them (ie screen, print, handheld) that way there is no room for error. That was good enough for me. There is definitely not a right or wrong way of doing it. I read about each method for about 8 hours yesterday (no joke - on my palm reading for 8 hours). And looking around on everyones site, I would say the average tips slightly in the way of screen - but only by a slim margin.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >I will assume that you have a generic .css link in the head of your doc which does not include a media type.

    Yeah - I'm using @import in the form:
    <style type="text/css">@import 'http://domain.com/css/main/master.css';></style>

    Having forgotten the details, I suspect I'm using @import to hide the css from some browsers - and if I remember correctly (unlikely!) I couldn't add a media type without compromising this. I'm hoping someone can clarify this.

    So, if I use individual screen and print css, will browsers reliably ignore the screen.css and just apply print.css?


Bookmarks

Posting Permissions

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