HTML Presentations with Opera

Because Opera is not an extremely popular browser, most developers probably aren’t aware of one of its greatest features: Opera Show mode. Opera Show mode is the official name of the full screen mode for Opera (technically, it’s only called Opera Show when a projection media style sheet – discussed below – is present); and it brings with it a great possibility.

More than two years ago, Opera added support for the projection media mode in CSS. Whenever the browser is expanded to full screen mode, it activates the projection media, allowing you to apply a completely different stylesheet to the full screen page than you have in other settings.

To take things a step further, if you include page-break instructions within the projection style sheet, Opera will treat each page as a separate screen, allowing you to use the Page Up and Page Down buttons on your keyboard to navigate from screen to screen.

With these features, you can actually use Opera to display a presentation built entirely with HTML and CSS (that’s right, no JavaScript and no Flash is necessary). Because you can build the presentation with HTML, you can make it more robust than a PowerPoint presentation, and it is infinitely more flexible and portable (after all, even if someone doesn’t have Opera on their computer, they can still view the contents of your presentation without any proprietary software).

To make things really flexible, I would recommend creating one style sheet for the screen that will style your presentation as a nice Web page for all browsers; creating an extended style sheet for the projection media that splits each slide into a separate page; and creating one more style sheet for print so that visitors (and you) can print out a nice, clean version of the presentation’s contents (of course, if you’re feeling really froggy, you could also create a mobile style sheet). Personally, I set mine up so that the “Notes” for each slide appear below each slide’s content when viewed in a normal window, and then have the notes hidden when viewed in Opera Show (along with some nice styling, obviously).

On a related note, don’t forget that the latest version of Opera supports almost as much of the CSS3 spec as Webkit, and that Opera supports SVG images; so you can do some really nice things with your slides.