Build dynamic Web presentations without Flash

Just a week ago Chris Mills said that he is "planning a series of articles to show that you can really do all Flash type stuff using open standards". He also asked thoughts on what to cover. And in a couple days I stumble upon Flash photo portfolio presentation in New Yorker magazine and decided to convert it to standards. It looked pretty doable with CSS and JavaScript to me, so I decided to go with CSS-only, because I'm interesting in trying out some upcoming CSS3 goodies.

If you don't want to go into implementation details, here is a demo (alternative link). Sorry for stupid My Opera nag screen, no harm will be provided to you or your computer. Also you will need Google Chrome 4 or Safari 4 or Firefox 4 or Opera with Presto 2.3+ engine.

So, I started with examining the Flash presentation sample. Thankfully it appears that creators separated data (XML and pictures) from presentation (Flash), so anyone can pretty easily create their own implementation.

To locally saved XML I applied small XSL, that generated HTML markup for presentation, and that was pretty straightforward.

Here is most interesting part of HTML structure:

<div id="name">
   <div id="country">
     <div id="age">
       <div id="gender">
         <div id="tenure">
           <p id="menu">Order by:
             <a href="#name" id="menu-name">Name</a>
             <a href="#country" id="menu-country">Country</a>
             <a href="#age" id="menu-age">Age</a>
             <a href="#gender" id="menu-gender">Gender</a>
             <a href="#tenure" id="menu-tenure">Tenure</a>
           </p>
           <ul> 
             <li>...</li>
             <li>...</li>
             ...
           </ul>
         </div>
       </div>
     </div>
   </div>
 </div>
 

Now it was CSS turn. In two words: using :target pseudo-class I was able to switch sorting of photos, using CSS3 transitions I was able to show "visual sorting" and smooth fade-in-out effects. To show big pictures I decided to use :active pseudo-class (user needs to hold mouse button on a thumbnail). From CSS3 I also used RGBA and box-shadow.

Here is an example of current CSS nightmare that we need to write in order to get all current and future browsers on board:

-webkit-transition-property: opacity;
 -webkit-transition-duration: .6s;
 -webkit-transition-delay: .6s;
 -moz-transition-property: opacity;
 -moz-transition-duration: .6s;
 -moz-transition-delay: .6s;
 -o-transition-property: opacity;
 -o-transition-duration: .6s;
 -o-transition-delay: .6s;
 transition-property: opacity;
 transition-duration: .6s;
 transition-delay: .6s;

Once CSS3 transitions module will become a recommendation, we will need to add properties without vendor prefixes.

That is pretty much it. This CSS-only demo doesn't cover all functionality of original presentation, but sure that is 100% doable if we add some JavaScript and any technology to play audio files.

I tested this demo in Google Chrome 4, Apple Safari 4, and Mozilla Firefox 3.7 builds. Firefox seems has some glitches with CSS transitions, but it is useful even in this state. I added -o- prefixes, so someone can test this on Opera Mobile 10 (Presto 2.3) or next Opera for desktop (Presto 2.4).

Any comments, suggestions and corrections are welcome.