Use media="screen, projection"

[brothercake]

This is an informational thread, which I was inspired to post because I've noticed Eric Meyer does the same thing as I do with stylesheet media:

media="screen,projection"

I don't know if his reasons are the same as mine, but here are mine, in case this information is useful to anyone else:

Never use media="all" - because it's evil - how can you possibly know that your CSS is universally suitable? Do you have a "handheld" media device to test on? How about "aural" or "braille"?

So don't apply CSS to a media for which you don't have a test device - in most cases that means "screen" and possibly "print".

So about "projection"? Well - Opera 7 in fullscreen mode uses "projection" media CSS, not "screen" - the point of that is so that the browser can be used to do slideshows and other kinds of presentation - the sort of thing one might use PowerPoint for - except of course that Opera is free, can be easily carried around on a USB drive or ZIP disk, and lets you write your presentations in HTML and CSS - no proprietary data formats or having to buy MS Office.

But from the point of view of most websites, that's a gotcha. What if someone's visiting your website in Opera in fullscreen mode, just because they want to - if all your CSS is "screen" then the site will be plain - no styling at all.

Hence the dual-media declaration: meda="screen,projection"

[Mhtml]

Nice! ... As soon as my server comes back online ( if ) I'll have to change that..

[mindlessLemming]

That's a great tip
Although you haven't actually mentioned where the "media" attribute is used, which may confuse people new to code.

<link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />

[jeskel]

great tip!

[ronaldb66]

Good to know!

Brothercake,

useful information indeed; I'm also curious about what Eric Meyer's opinion on this is. Have you contacted him about it?

[Nightfire]

Ok, I been livin in a cave for the past 10 years Who's eric meyer and what's this media="screen" thing actually do? Someone bring me into modern ages

[mindlessLemming]

Eric Meyer is Netscape DevEdge's CSS guru. His demonstration of (what was then) advanced CSS techniques at css edge are very cool .
He's part of that whole "upper echalon" of CSS/standards super freaks.

media="screen" dellivers the file which is linked only to a UA which is displaying on a screen. Braille readers for example would obviously not be fed this stylesheet...

[brothercake]

Originally posted by mindlessLemming
Braille readers for example would obviously not be fed this stylesheet...

Except that they would, because braille readers are linked to screen readers, and screenreaders read the screen ... but in theory that's true ...

Thanks for mentioning what I missed You can also use media with a <style> element:

<style type="text/css" media="screen,projection">

Or using @media inside a stylesheet - but this won't work in mac/ie5:

@media screen,projection {   }

[mindlessLemming]

Originally posted by brothercake
Except that they would, because braille readers are linked to screen readers, and screenreaders read the screen ... but in theory that's true ...

Ok then, so what UA's don't use media="screen,projection"
And while you're at it, do any UA's exclude "screen,projection" when a page is printed? Or do you have to overwrite all other declarations?
(Assuming that a second stylesheet w/ media="print" has been linked)
Thanks for the tips
Andrew

[brothercake]

When you print, a "screen,projection" stylesheet won't be used at all - it will be ignored. You don't have to override its values from print CSS, you're starting again with an unstyled page.

The only screen-based CSS browser I know of that doesn't work with screen-media is Netscape 4 - ns4 doesn't read any styles if the <link> element has a media attribute, but that's useful in itself.

There are extra gotchas as well - some handheld devices read "screen" media CSS, even though that's clearly in violation of the specs. But some manufacturers think that if they don't do that, pages viewed from their PDAs might not be styled at all - which is true, and that would be probably be better for users than a screen-styled page. But there you go - vendors are only concerned with their own, narrow interests.

[mindlessLemming]

Thanks for clearing that up.
Does anyone know if print units can be used in print CSS? (inches, cm, etc..)

[pardicity3]

I'm not sure about the print units, but with a print stylesheet percentages have a lot more power. Instead of not knowing how big 90% is on a certain user's screen, you will always know that 90% is 90% of the paper the user is printing on (not factoring in margins and such, 90% of the standard paper would be 7.65 inches). That's usually how I deal with print and it doesn't seem to have failed me yet.

[me']

Originally posted by mindlessLemming
Does anyone know if print units can be used in print CSS? (inches, cm, etc..)

What else would they be included in CSS for? I believe print is the only good application of those types of measurements. I'm possibly wrong, though.