How reliable is the "projection" media type in css?

Question

I'm working on a corporate project, creating a system that will be used for years. I've recently come across the "projection" media type in css, and I'm imagining potential benefits it could have for the users, giving presentations, etc, but I don't know if that's just in my imagination, or if there is a real world advantage here. So far all I'm aware of is that some versions of Opera use the media type in fullscreen mode.

W3C media type entries: http://www.w3.org/TR/CSS2/media.html

Does any browser detect the projection media type when being used on a projector?

Is that even possible? I have a hunch that, as far as a browser is concerned, a projector is just a screen, so there's no detection. It would be great if I was wrong.

Has anybody had any success with the projection media type?

Cypriot

Answer 1

As far as my research has shown, the projection media type is only currently used by Opera in fullscreen mode.

Hooking my computer up to a projector and setting the display mode to "projector" in my display settings seems to have no effect on the stylesheet chosen by any browser.

Code Style has a good summary of different browsers and their compatibility with the different CSS Media Modes.

Jurgen

Good to hear from somebody who has actually tried it. If you can remember, which methods did you use? Stylesheet declarations, media blocks inside a common css file, the @import rule? I think the results would likely be the same with each one, just that I'd like as full a picture as possible. – Cypriot

Answer 2

I use projection mode all the time, but unfortunately only Opera 12 and earlier implement it. You hit F11 to start it, and then the CSS projection media kicks in.

I put each slide in a div, and then use the CSS:

/* Each slide is a plain div.
   Special pages (intro material, etc,) have classes like cover, intropage, endpage */
body>div {
    border: medium black solid;
    margin: 1em 0;
    width: 40em;
    padding-bottom: 0;
    page-break-inside: avoid;
    overflow: hidden;
 }

@media projection { /* changes/adds the following properties */
    body {font-size: 20pt; margin-left: 0; padding: 0}
    body>div { page-break-after: always; 
               border-style: none; margin: 0; width: 100%}
}

Fortunate