The CSS Slideshow System, or CSSS, is a simple, lightweight presentation program featuring keyboard navigation. Take a look under the hood and learn how you can use it.
Lea Verou, the respected and well known W3C influencer, web standards guru, and front end web developer decided that conventional, online, and CSS slideshow frameworks were not good enough, so she set out to create her own version of a sleek and stylish slideshow system on her own. Lea calls it CSSS, or CSS Slideshow System.
The Github download includes an MIT License Copyright © 2010 which enables anyone to use the code and "software" as is, and as long as the licensing agreement is left intact with any code distributions. The download is available in zip file format at a lightweight 163KB, and includes:
- boilerplate.html, which is the template file
- file index.html
- four css files and three js files located in the root directory
- five js files located within a plugins directory.
Contributors are also welcome to fork versions and post them on the Github repo.
Currently the CSS Slideshow System works in the latest versions of Firefox, Opera, Safari, and Chrome, which I have tested myself and found similar results within each browser. Just for giggles, I tested the system in IE8, and with no surprises at all, it does not render in any similar slideshow fashion. Also, the system does not render well in mobile devices at this time.
Under the hood
I wanted to take a closer look at how the CSS Slideshow System is built, and so I pulled up the index.html and the boilerplate.html files within my text editor as well as within Chrome's Inspect Element tool to see what I could find beneath the web page documents.
The boilerplate.html has quite a bit fewer resources pulling into its web document page, including just two image files, two js files and three css files. It is certainly a scaled down version of the demo index page, however, it makes for a great starting point for anyone that wants to plug in a new, snazzy online presentation. The template has four starter example slides, which are easily modified by editing any content within an element where the class is equal to "slide." The sample html code snippet below displays the boilerplate "slides":
<header id="intro" class="slide">
<h1>Sample CSSS presentation</h1>
<p class="attribution">By Lea Verou</p>
- A single HTML file contains the entire presentation; each slide is defined as any element with the class="slide".
- Themes are all styled using CSS.
- Navigation is through the keyboard using arrow keys to advance or go to previous slides or incremental displays, or Ctrl + arrow keys to jump to the next or previous slides. The "Home" key takes you to the beginning of the presentation and the "End" key takes you to the last slide.
- A thumbnail toggle view of the slides is accomplished in the browser with the "Shift+H" key combo ( see Figure C)
- Timer is set as a progress bar at the top of the screen, and the talk duration is set with the data-duration attribute on the body which can style the timer and the end state with the selectors #timer and #timer.end respectively
- Presenter notes are only visible to the presenter screen when enabled and by selection the combo key "Shift+P" as displayed in Figure D:
- Incremental display of slide contents (just add class="delayed")
- Slide scaling based on window size (size everything you want to be scalable in ems)
- Document.title changing according to slide title (fetched either from the title attribute or the slide's heading)
- Plugins which add more functionality include the CSS Snippets, which allow for dynamically edited CSS, automatically prefixes CSS3 properties and values when needed, and <textarea> automatically adjusts rows and font-size on line breaks.
- CSS Controls is another plugin that uses sliders and other controls to adjust CSS values for data-subject, data-style, and also automatically prefixes CSS3 properties and values when needed.
- Code Highlight plugin adds syntax highlighting for every <code> element and <lang> element and only highlights the active side for performance enhancement as shown in Figure E:
Currently, the drawbacks are few; probably the one that communities will fret most about is that the CSS Slideshow System is not operational in mobile devices. According to Lea, the presentation environment is a controlled system, and it consists of a lightweight and easier to understand code, which is why it only works in modern browsers and with no mouse support. With these limitations in mind, creating a lightweight presentation using the CSS Slideshow System could be just the right application you are looking for when delivering your next presentation, either in person or online.