Checkers

CSS3 and HTML5 can be combined to deliver full-featured games on the Web. You can use CSS transforms, transitions, and animations to move playing pieces onscreen, or provide visual feedback. The HTML5 offline storage support built into Safari allows you to save and restore the state of your game, and you can even enable full offline functionality so that your game can be played even when users are not connected to the Internet. As you write your code, you can use Safari's Web Inspector to inspect and experiment with offline data.

In this example:

• Playing pieces move by combining CSS3 transforms and transitions.
• CSS3 animates a playing piece once it is selected.
• HTML5 localStorage stores high scores, and saves and restores the state of the game.
• Web page resources such as images, or HTML, CSS, and JavaScript files are stored in an HTML5 offline application cache to make the game accessible offline.

Related Resources

• Safari HTML Reference
• Safari CSS Reference
• Safari Visual Effects Guide
• Safari Client-Side Storage and Offline Applications Programming Guide
• Leaves
• PhotoToss