<meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))'>
<p>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.</p>
<p class="aboveList">In this example:</p>
<ul class="square">
<li>Playing pieces move by combining CSS3 transforms and transitions.</li>
<li>CSS3 animates a playing piece once it is selected.</li>
<li>HTML5 <code>localStorage</code> stores high scores, and saves and restores the state of the game.</li>
<li>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.</li>
</ul>
<h3>Related Resources</h3>
<ul class="icons">
<li class="book"><a href="/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/">Safari HTML Reference</a></li>
<h1>You’ll need to download Safari to view this demo.</h1>
</header>
<p>This demo was designed with the latest web standards supported by Safari. If you’d like to experience this demo, simply download Safari. It’s free for Mac and PC, and it only takes a few minutes.</p>
<li class="promo"><h3>Preparing Your Web Content for iPad</h3>
<p><a href="http://developer.apple.com/safari/library/technotes/tn2010/tn2262.html">Learn how to make your website look and work great on iPad.</a></p>
<p class="cheat"><a href="http://webkit.org/">Developed by Apple, WebKit is the most advanced browser engine, drawing the web pages you see in Safari.</a></p>
<p class="gf-buy">Shop the <a href="http://www.apple.com/store/">Apple Online Store</a> (1-800-MY-APPLE), visit an <a href="http://www.apple.com/retail/">Apple Retail Store</a>, or find a <a href="http://www.apple.com/buy/locator/">reseller</a>.</p>