I recently ran into an issue that I needed to create a print stylesheet but couldn't do so easily. I found a workaround that so far works quite nicely and from some quick testing seems to work with conditional comments as well.

Normally you would put a CSS file in your skins folder and the server would inject a link element into the HTML code for you. I, for one, never cared for this system as it takes a bit of control away from the designers and developers, but I can understand the reasoning behind it. So, you would get something like this:

<link href="App_Themes/Skin_2/styles.css" type="text/css" rel="stylesheet" />

The immediate problem with this is that there is no way to add a media attribute to this, that I could find anyway. So, if you wanted a print stylesheet and put it in your skins folder you would end up with this:

<link href="App_Themes/Skin_2/styles.css" type="text/css" rel="stylesheet" />
<link href="App_Themes/Skin_2/print.css" type="text/css" rel="stylesheet" />

The rules of CSS would dictate that both of these would be used for all cases of web pages being rendered whether they were screen- or print-based.

This is bad.

I played with injecting my print stylesheet with Javascript but that led nowhere useful. Then I remembered the @import directive which I have never really had a reason to use before. So, experimenting with this notion I came up with this instead:

<style type="text/css" media="screen">@import url(/styles/styles.css);</style>
<style type="text/css" media="print">@import url(/styles/print.css);</style>

I created a new folder in the root folder called "styles" and placed my two stylesheets in there. I then deleted my styles.css from the skins folder so that the link element isn't injected at all. After some edits in the stylesheets to account for the new location in relation to images, I now have both a screen-only stylesheet but also a print-only stylesheet to go with it. When using the style element I can use the media attribute as I like and then the contents of the external stylesheet is injected into that element.

This is not a tried and tested method as I've only had it running for the day, but all my testing shows there should be no issue. But your experience may vary.

As I mentioned, it seems this method will allow for conditional comments as well. Generally I do my best to avoid using them, but a quick test shows this should work:

<style type="text/css" media="screen">@import url(/styles/styles.css);</style>
<style type="text/css" media="print">@import url(/styles/print.css);</style>
<!--[if IE 7]>
<style type="text/css" media="screen">@import url(/styles/styles_IE7.css);</style>
<![endif]-->

The only reason I tested this was out of curiosity since researching this issue in the forums I saw that only questions about conditional comments were the closest I could find to my print stylesheet problem.

If you use the conditional comments let me know if it works for you.

Any questions feel free to ask!