How do I determine which css media type is being requested on my page?

Question

I'm looking to alter the way my asp .net webpage is output to the browser depending on the css media type being used.

Although the css is generally taking care of the differences in appearance between screen and print mode I would also like to make some minor adjustments to the markup when print mode is required. I would simply be dropping a floated section down below its sibling rather than as a 2 col approach which is to used during screen layout in the browser.

Answer 1

This is not possible. No browser exposes this information in a way that will let you change markup on the server side (i.e. before sending to the browser).

The browser can determine what CSS to use according to what it is going to do with that page (print, display, read...), but you can't know which it will be.

Consider changing your markup so it will work well with both screen and print css.

Another option is to create a print link that will link to a print optimized version of the page.

Answer 2

Not a very nice method, but you could just add in the floated section down below its sibling and hide this section in the Screen CSS file. Then in the Print CSS file you could show this hidden section and hide the other one which you do not then want in the print page.

This would cause your page to have extra html, but depending on what this floated section is, it could be an option.

Answer 3

If your markup is written in that order in order to float your column, but the actual format of the document makes more sense a different way round, you need to fix your markup and your screen CSS.

MNarkup shouldn't be dependant on CSS. Mark up your document first so that it makes sense without the CSS - which, reading between the lines, is the way you want it to display for print. Once you've done that, style the column layout based on that source order.

Answer 4

So your goal was to present a browser page that mimics "Print Preview"? As answered previously, the browser does not expose the media type, so it's not possible to query that ahead of time to alter the output to the browser. In your particular case, my understanding from W3C docs is that the 'print' media type is only triggered for "paged material and for documents viewed on screen in print preview mode." Meaning the only way to activate the 'print' media type for screen display is to choose 'Print Preview' anyway.

Of course, once you're in 'Print Preview', using media queries to see an altered layout works just fine. Here's a super simple example that does what you wanted to do:

The styles:

<style>
ul li {
    float:left;
    margin: 10px;
}
@media print {
    li#printfloat {
        clear:left;
    }
}
</style>

and the HTML:

<ul>
    <li>Sibling 1</li>
    <li id="printfloat">Sibling 2</li>
</ul>