Projecting your CSS

I can remember setting up my first stylesheet and being truly impressed with the power of CSS. While I was still learning the language and implementation, I came across the concept of print stylesheets. The fact that you could present a completely different style for print was mind blowing for me. It made so much sense all at once and was a great thing to learn. What’s also great is the ability to style for other media, such as handheld devices and projectors. Did you know that there are 10 total media types you can style for?

  • all
  • aural
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • tty
  • tv

The media type I would like to focus on is that of projection. I’d just like to give a few quick tips regarding the media and leave things open for discussion because I am sure there are developers who have some good recommendations or facts to put in.

You Should Always Cover Projection

This does not go to say that other media can be discarded and forgotten, but along with your stylesheet to cover screen, print or handheld, you should always account for providing a projection style. I say this not only to make your site that much more usable, but because Opera has elected to use projection when it is in fullscreen mode. This is very important to keep in mind for those users of yours who happen to browse the Internet using Opera and by chance browse in fullscreen.

Some Things to Keep in Mind

If you have ever been in a meeting, classroom, or otherwise, and had the opportunity to see Web sites displayed on a projector, you can instantly notice some differences. More often than not, the colors are washed out and the contrast is not up to snuff. These two elements can be disastrous for your design and destroy your presentation. Styling for projection can really help you out here. It is within this stylesheet you can bump up the contrast of colors within your design to assist in their display on a projector. If you use gray text on your site you can switch to black for projection and make the site easier to read. You could also dive in to recreating some of the images on your site, and adjusting them so their contrast has a bit of an extra boost to compensate being washed out during projection.

You shouldn’t really have to make any structural changes while styling for projection, because your document should degrade well regardless of resolution. More often than not, projectors use a smaller resolution than the large resolutions of modern monitors. That doesn’t mean every projector you run into will be running an 800×600 resolution, commonly I see projectors running 1024×768 for the most part.

Testing for Projection

While many may see that Opera using projection while displaying for fullscreen as a hindrance, it can be looked at positively. If you happen to be testing for projection and don’t happen to have a projector lying around, Opera in fullscreen would be the way to go. No, it will not show the colors being washed out, but it will give you a look into what your site will appear as when being projected. If you decide to hide certain elements due to the fact that they would appear confusing on a projector, this is the place to test how the designs look and feel will be maintained.

In the Future

Styling for projection is something I am going to focus more on from here on out, simply because it is one of those things I find myself neglecting. I plan on going into detail on the other medium covered in the W3C Spec in future articles. I think it is very important to cover all of your bases when styling for different circumstances. Handheld stylesheets are going to become increasingly important with the constant push to the Internet on your cell phone.

Notes to Take Home

Basically, the idea to keep in mind here is that Opera uses projection when in fullscreen mode, and if that style is not provided, your user will be faced with a naked document. Also remember that projectors tend to wash out any colors it is displaying, effectively making your design harder to comprehend. To combat this, you can provide additional style to reverse the negative effect and increase the contrast on your own.