No replies
crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 44 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

Hello all.

I think I have accidentally discovered something using some existing methods for switching CSS via client side (JavaScript) and a server side (PHP) method. Now, I don't know if this is anything substantial or not. I had a look around the web to see if this had been done before and, to the best of my knowledge, I haven't seen this anywhere else. So, please let me know if this is no big deal Smile

In a nutshell, I used the method of JavaScript CSS switching found on A List Apart;
http://www.alistapart.com/articles/alternate/

And, the PHP CSS switching also on ALA;
http://www.alistapart.com/articles/phpswitch/

These methods work great. However, I'm always aware of how a page looks when printed and I always make a habit of creating a separate print CSS for my pages. I thought that if you could set the screen CSS, would the same methods work for setting the print CSS? I gave it a shot.

(If you are not familiar with the CSS switching techniques above, have a visit to the ALA links above for how the <link> tags are used in each case. )

For the print style sheets, I used the following mark-up;

  1. JavaScript Method;
    <link rel="stylesheet" type="text/css" media="screen" href="css/core.css" title="core" />
    <link rel="alternate stylesheet" type="text/css" media="screen" href="css/x.css" title="x" />
    <link rel="alternate stylesheet" type="text/css" media="screen" href="css/oldschool.css" title="oldschool" />
    
    <link rel="stylesheet" type="text/css" media="print" href="css/core-print.css" title="core" />
    <link rel="stylesheet" type="text/css" media="print" href="css/x-print.css" title="x" />
    <link rel="stylesheet" type="text/css" media="print" href="css/oldschool-print.css" title="oldschool" />

(Note the duplicate title attributes being used.)

  • PHP Method;
    <link rel="stylesheet" type="text/css" media="screen" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css" title="core" />
    <link rel="alternate stylesheet" type="text/css" media="screen" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css" title="x" />
    <link rel="alternate stylesheet" type="text/css" media="screen" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>.css" title="oldschool" />
    
    <link rel="stylesheet" type="text/css" media="print" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>-print.css" title="core" />
    <link rel="stylesheet" type="text/css" media="print" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>-print.css" title="x" />
    <link rel="stylesheet" type="text/css" media="print" href="css/<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>-print.css" title="oldschool" />
  • (Again, duplicate title attributes.) What resulted. I thought, was simple but effective. It remembers your CSS preference and applies it to the print CSS.

    Please have a look at my test pages to see what I mean;

    1. JavaScript method; http://www.crazybat.ca/projects/mb/index.php

  • PHP method; http://www.crazybat.ca/projects/mb/index-ss.php
  • I have tested these two methods in IE 6, Mozilla 1.6, Firefox 0.9.2 and Opera 7.5 for the PC with the success of seeing my preferred screen CSS choice apply to the print preview view. However, getting those results were a little different across the browsers I tested. Here's why;
    1. Opera 7.5's View > Style is the only way to get the intended effect. Using this though, the print preview is consistent with the screen's current CSS.

  • Mozilla 1.6 and FireFox 0.9.2 works with the JavaScript solution as intended. With PHP, only the left navigation links that change the CSS work as intended. The View > Use Style switcher only switches to the primary style sheet (core.css) and the basic style sheet (oldschool.css). Same behaviour with Firefox 0.9.2 and the built in style switcher.
  • IE 6 will only work as intended when the <link> tag's rel attributes are valued as "stylesheet" for all the style sheets. If you value the second and third style sheets links as "alternative stylesheet", the screen appearance will change, but the print preview will not. Go figure.
  • Currently, I do not have a Mac to test, so if someone were to test this out on that platform on Safari and IE, I would be curious of the results, very grateful and give you credit for helping out. The same is for the older PC and Mac browsers still being used. Personally, I design for the newer browsers, but if someone has the need, feel free to check them out.

    So, I don't know if this is anything earth shattering to say the least, but I thought it could be useful if someone did have a preference for a certain CSS for screen as well as having that preference effect the outcome of the printed screen content.

    Any feedback, need for clarification or corrections are welcome. Thanks folks.

    cb.
    (ps: this was quoted from my original post on the Accessify Forums. just wanted some more feedback. thx.)

    [/][/][/]

    Crazy Bat Designs
    Home of the phpBB WASO
    Helping You Reach The MOST People Possible.