Welcome to the MacNN Forums.

Zim · Mar 17, 2004, 11:47 AM

2 questions about designing for different media types

a) is there a way to print what a client is reporting itself as? ie. you are connecting from a screen/handheld/etc media type (as a test script)

b) is there a browser that will let you see things as other media types would? (ie. tell Mozilla to pretend its a handheld and see things like a handheld would) (for the sake of development debug).

Thanks!
Mike

Millennium · Mar 17, 2004, 08:12 PM

Originally posted by Zim:
a) is there a way to print what a client is reporting itself as? ie. you are connecting from a screen/handheld/etc media type (as a test script)

Kinda-sorta-not-really. There is no direct way to do this, but some creative HTML and CSS can emulate this ability.

What I would do for something like this is to create a paragraph saying "This is a screen device", "This is a printer", and so forth. Give them a class of "mediatest", and then give each one an ID like "screentest", "printtest", and so forth.
Then set in your "all" stylesheet, add this:

Code:
.mediatest { display: none; }

In your media-specific stylesheets, turn on display:block for only the specific paragraph you want to show. So for example, in your "screen" stylesheet, you might add:

Code:
#screentest { display: block; }

When you do this, only the lines which apply to the browser will show. When you view onscreen in Mozilla, for example, you'll see the screentest line. When you print from Mozilla, the screen line will disappear but you'll see the printtest line. You may see more than one line (if more than one media type applies), but you shouldn't see any lines that don't apply. If you use display:none, they won't even show up in the page; it will be as if they are not even there.

This works because of the way CSS treats selectors. If two rules conflict (like display:none and display:block), but one is applied by class and one is applied by ID, the one applied by ID wins. Because you specify the ID selectors in media-specific stylesheets, you ensure that only the ID selectors for the browser's media get applied at all; everything else is hidden because the browser never sees that rule.

b) is there a browser that will let you see things as other media types would? (ie. tell Mozilla to pretend its a handheld and see things like a handheld would) (for the sake of development debug).

I think Opera has a mode like this, but I'm not certain. There are also emulators for certain handheld devices which might prove useful.

Zim · Mar 18, 2004, 08:34 AM

Nifty idea. And correct, Opera does do "small screen mode" which via my test file confirms as "handheld".

Here is the code:

Code:
<html>
<head>

<style>
.mediatest { display: none; }
@media screen { #screen { display: block; } }
@media print { #print { display: block; } }
@media handheld { #handheld { display: block; } }
</style>
</head>

<body>
<h1>Media Test</h1>
<span class="mediatest" id="screen"> This is a screen device </span>
<span class="mediatest" id="handheld"> This is a handheld device </span>
<span class="mediatest" id="print"> This is a print device </span>
</body>
</html>

Cheers,
Mike