2010-02-03 09:59:46 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = utf-8 / >
< meta name = "viewport" content = "width=620" / >
< title > HTML 5 Demos and Examples< / title >
< style >
body {
font: normal 16px/20px Helvetica, sans-serif;
background: rgb(237, 237, 236);
margin: 0;
margin-top: 40px;
padding: 0;
}
section, header, footer {
display: block;
}
#wrapper {
width: 600px;
margin: 0 auto;
background: #fff url(images/shade.jpg) repeat-x center bottom;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
2010-03-02 23:22:27 +01:00
border-radius: 10px;
2010-02-03 09:59:46 +01:00
border-top: 1px solid #fff;
padding-bottom: 76px;
}
h1 {
padding-top: 10px;
}
h2 {
font-size: 100%;
font-style: italic;
}
header,
article > *,
footer > * {
margin: 20px;
}
footer > * {
margin: 20px;
color: #999;
}
#status {
padding: 5px;
color: #fff;
background: #ccc;
}
#status.fail {
background: #c00;
}
#status.success {
background: #0c0;
}
footer #built:hover:after {
content: '...quickly';
}
abbr {
border-bottom: 0;
}
abbr[title] {
border-bottom: 1px dotted #ccc;
}
li {
margin-bottom: 10px;
}
#ffad {
font-size: 90%;
border: 1px solid #ccc;
background: #fcfcfc;
display: block;
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;
color: #000;
text-decoration: none;
}
#ffad:hover {
border-color: #919191;
}
#ffad section {
padding: 20px;
}
#ffad p {
margin: 10px 10px 10px 100px;
}
#ffad img {
border: 0;
float: left;
display: block;
margin: 14px 14px 0;
}
#ffad .definition {
font-style: italic;
font-family: Georgia,Palatino,Palatino Linotype,Times,Times New Roman,serif;
}
#ffad .url {
text-decoration: underline;
}
< / style >
< script src = "h5utils.js" > < / script >
< / head >
< body >
< section id = "wrapper" >
< header >
< h1 > < abbr > HTML< / abbr > 5 Demos and Examples< / h1 >
< / header >
< article >
< p > < abbr > HTML< / abbr > 5 experimentation and demos I've hacked together:< / p >
< ul >
2010-03-02 23:08:02 +01:00
< li > < span class = "support" > < / span > < a href = "canvas-grad" > Interactive canvas gradients< / a > (all bar IE)< / li >
< li > < a href = "video-canvas" > Canvas & Video< / a > (all bar IE)< / li >
< li > < a href = "video" > Video< / a > (all bar IE)< / li >
2010-02-03 09:59:46 +01:00
<!-- <li><a href="http://people.opera.com/brucel/demo/html5 - forms - demo.html">Web Forms 2.0</a> (Opera 9+, very partial Safari support)</li> -->
< li > < a href = "canvas" > Canvas< / a > (all bar IE)< / li >
< li > < a href = "contenteditable" > Content Editable< / a > (all latest browsers)< / li >
< li > < a href = "geo" > Geolocation< / a > (FF3.5, iPhone OS 3)< / li >
< li > < a href = "postmessage" > postMessage< / a > (same domain) (all latest browsers)< / li >
< li > < a href = "postmessage2" > postMessage< / a > (cross domain) (all latest browsers)< / li >
< li > < a href = "drag" > drag and drop< / a > (IE, Safari 4, FF3.5)< / li >
< li > < a href = "drag-anything" > drag < em > anything< / em > < / a > (IE, Safari 4, FF3.5)< / li >
< li > < a href = "offline" > offline detection< / a > (FF3.5, iPhone OS 3)< / li >
< li > < a href = "offlineapp" > offline application using the manifest< / a > (Safari 4, FF3.5.3) (< em > Note: pre-FF3.5.3 < a href = "https://bugzilla.mozilla.org/show_bug.cgi?id=501422" > has a bug< / a > < / em > )< / li >
2010-03-02 23:08:02 +01:00
< li > < a href = "storage" > Storage< / a > (all latest browsers)< / li >
2010-02-15 18:02:36 +01:00
< li > < a href = "database" > Web SQL Database Storage< / a > (Safari, iPhone OS 3, Opera 10.50)< / li >
< li > < a href = "database-rollback" > Web SQL Database - rollback test< / a > (Safari, iPhone OS 3, Opera 10.50)< / li >
2010-02-03 09:59:46 +01:00
< li > < a href = "worker" > Web Workers< / a > (watch out - uses a < em > lot< / em > of CPU! < a href = "non-worker" > example without - will hang your browser< / a > )< / li >
< / ul >
<!-- <section>
< a href = "http://full-frontal.org" id = "ffad" title = "JavaScript Conference: Full Frontal, 20th November" >
< img src = "http://2009.full-frontal.org/images/ff.gif" alt = "Full Frontal Logo" width = "70" / >
< p > < b > Want to learn more about JavaScript?< / b > < / p >
< p > Full Frontal is a < strong > JavaScript conference< / strong > , < em > run by< / em > front end developers < em > for< / em > front end developers, held in the UK on 20th November.< / p >
< p > Early bird tickets start at £100. Find out more: < em class = "url" > http://full-frontal.org< / em > < / p >
< / a >
< / section > -->
< p > All content, code, video and audio is < a rel = "license" href = "http://creativecommons.org/licenses/by-sa/2.0/uk/" > Creative Commons Share Alike 2.0< / a > < / p >
< / article >
< footer > < a id = "built" href = "http://twitter.com/rem" > @rem built this< / a > < / footer >
< / section >
2010-02-03 10:03:26 +01:00
< a href = "http://github.com/remy/html5demos" > < img style = "position: absolute; top: 0; left: 0; border: 0;" src = "http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt = "Fork me on GitHub" / > < / a >
2010-02-03 09:59:46 +01:00
< script >
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
< / script >
< script >
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}< / script >
< / body >
< / html >