Show me...

...the real thing...

@media projection…

Sometimes it would be nice if our large screens were a little larger. "Full Screen" doesn't look like much in most cases, and that's about the only option we have—or?

Not quite, as someone have thought of this already, and provided us with a solution. It's called @media projection, logically enough, and is an integrated part of CSS' set of media rules.

We may link with media="projection", and we may use @media projection { ... } as a style-wrapper. So, once there's only bugs and lack of support left for our screen- and print-styles, this media-rule may provide us with another outlet for creativity. What a relief...


Opera is the only browser which supports @media projection natively, as of now. Not surprising really, as Opera Software usually supports the future quite well.

Opera's 'full-screen mode' [F11] will make full use of projection-styles if there are any. This page have some for it, so just click [F11] now.

Some like to simulate projection-support in other browsers too, and that's fine of course. Would've been better if the other browsers supported the real thing though.

I'll stick to the use of real @media projection, as that'll leave me with a lot of standardized options without the need for any workarounds and limited solutions. I want it all...

built on print…

I'm testing out @media projection on top of my print-styles (implemented in [feb.2005]). Since one can navigate projected web-pages, some navigation and links are added back in. Everything is in the page already, so it's just a question of "picking the right parts to put on display".

Building on print-styles is quite logical, as @media projection is a paged media. Different page-sizes, that's all. It will of course scroll, as usual, if we don't style it to be paged. Plenty of options.

This page, and the whole section, have proper projection-styles now [25.mar.2005]. Nothing advanced, but it should come out just fine via Opera.

It's all found in a separate stylesheet for print and projection which is imported into the main stylesheets for 2 and 3 columns layouts.

2nd attempt…

I've created @media projection styles before, but they were add-on styles. Now I'm focusing on one media at a time, while using a set of web-pages which are created for multistyling.

I can switch in different @media projection styles once they are ready, so I'm not limited to "one rule = one look". As mentioned above: I want it all.

I'll be working on optimizations for a long time to come, I guess. CSS sure is fun...

sincerely  georg; sign

Hageland 25.mar.2005
last rev: 25.mar.2005

Show me...

Projecting onto the wall is an option...
...better have a clean wall.


  • introduction
  • Table of Content


  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages

Let's project the entire world wide web onto the wall.

Would need "some wall", me thinks...

Off site resources:

opera show