When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:
<link rel="stylesheet" href="Blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="Blueprint/print.css" type="text/css" media="print" />
As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.
Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a javascript window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.
The jQuery fix
The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:
1: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
2: <script type="text/javascript">
3: /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
4: Also disable any layouts for screen
5: */
6: jQuery(function() {
7: var bPrint = (window.location.toString().indexOf('#print')!=-1);
8: if (bPrint) {
9: // The user wants to print this page
10: jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
11: jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
12: }
13: })
14: </script>
The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.
A friend of mine is all Apple, so it’s Apple here, Apple there and Apple everywhere! It is impressive to see how well integrated it all is – but how about integration to my 
