I appreciate the effort that goes into creating a pure CSS3/HTML5 demo, but unfortunately many beginners consider these demos as representation of the best practices in Web Development (many aren’t). Here is one that got my goat today: A Pure CSS3 Slideshow.

Here are some reasons why this is not a great example of best practices:

• Uses a table for navigation when the semantic nav element (or a simple list) would do.
• Implements features using -moz, -webkit only prefix. Why not add the standard that they are temporary demonstrations for (and while at it, also support other browsers?)

• This is how it degrades on browsers that do not support CSS3 transitions, and transforms:

  

So, lets fix it! Here is the final result:

Changes:

• No translateX functions. All we need to do is to animate the left property. So:

  #a1:target .page { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); }
  #a2:target .page { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); }
  #a3:target .page { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); }

  becomes:

  #a1:target .pages { left: 0%; }
  #a2:target .pages { left: -100%; }
  #a3:target .pages { left: -200%; }

• I added a parent div element for all the pages so we just need to animate that element and not each of the 3 page elements.

• No tables for nav! Just use the nav element with a set of links:

    <table> 
    <tr> 
     <td><a href="#a1" id="p1">1</a></td> 
     <td><a href="#a2" id="p2">2</a></td> 
     <td><a href="#a3" id="p3">3</a></td> 
    </tr> 
  </table>
  

  becomes:

  <nav><a href="#a1">1</a><a href="#a2">2</a><a href="#a3">3</a></nav>

• In the default view, the first page is positioned outside the viewport:

  /* Page Positioning */
  #i1 { left: 100%; }
  #i2 { left: 200%; }
  #i3 { left: 300%; }

  This means browsers that do not support transitions effectively see a blank page. We fix this but setting the default position as left: 0, and only adjust the positions for the next 2 slides:

  /* Pages */
  #i2 { left: 100%; }
  #i3 { left: 200%; }  

There, now we have a neat little slideshow, that doesn’t degrade too badly on browsers that do not support the target element (accessible via the horizontal scrollbar for IE6, 7). If there are ways to improve this, please fork the fiddle and link in the comments!