Quelques additions bienvenues !
<body>
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
<nav>
<ul>
Navigation...
</ul>
</nav>
<section>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<figure>
<img src="..."/>
<figcaption>Chart 1.1</figcaption>
</figure>
<footer>
Copyright ©
<time datetime="2010-11-08">2010</time>.
</footer>
</body>
<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
<menu>
<command type="command">Save as...</command>
</menu>
<details>
<summary>HTML 5</summary>
This slide deck teaches you everything you need to know about HTML 5.
</details>
<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>
Your score is:A+
<progress>working...</progress>
Download is:
<progress value="75" max="100">3/4 complete</progress>
Goal is:
<style>
:invalid {
border-color: #e88;
-webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
}
[required] {
border-color: #88a;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
}
</style>
<input type="text" required />
<input type="email" value="some@email.com" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="tel" placeholder="(555) 555-5555"
pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
type="text"
type="number"
type="email"
type="tel"
<div itemscope itemtype="http://data-vocabulary.org/Person">
<p>Je suis <span itemprop="name">Thierry</span>.</p>
<p>Je travaille comme <span itemprop="title">Software Engineer</span>.</p>
<p>Je vis en <span itemprop="address.country-name">Suisse</span>.</p>
</div>
Rich Snippets Testing Tool : http://www.google.com/webmasters/tools/richsnippet
Gérer les interruptions de service
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
Enregistrer ce texte sur le client (récupérable)
<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
cache.manifest :
CACHE MANIFEST
# version 1
CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
Intégration d'éléments du système d'exploitation
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
Glissez des fichiers à partir du bureau :
document.querySelector('#dropzone').addEventListener('drop', function(e) {
var reader = new FileReader();
reader.onload = function(evt) {
document.querySelector('img').src = evt.target.result;
};
reader.readAsDataURL(evt.dataTransfer.files[0]);
}, false);
<a href="src/star.mp3" draggable="true" class="dragout"
data-downloadurl="MIMETYPE:FILENAME:ABSOLUTE_URI_TO_FILE">download</a>
var files = document.querySelectorAll('.dragout');
for (var i = 0, file; file = files[i]; ++i) {
file.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('DownloadURL', this.dataset.downloadurl);
}, false);
}
(actuellement seulement disponible sur Google Chrome)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
color: hsl(215,50%,50%); H: S: L: background-color: hsl(50,50%,100%); H: S: L: -webkit-box-reflect: below 10px -webkit-gradient( linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0))); Reflection: text-shadow: rgba(0, 0, 0, 0.9) 0 0px 0px; Text Shadow: -webkit-box-shadow: rgba(0, 0, 0, 0.9) 0 0px 0px; Box Shadow: -webkit-text-stroke: 0px #000; Radius: border-radius: 0px; Radius:
@font-face { font-family: 'Cabin Sketch'; src: url(CabinSketch.otf); } header { font-family: 'Cabin Sketch'; }
<canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>
<html> <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg> </html>
<video id="video" src="movie.webm" autoplay controls></video> document.getElementById("video").play();
<audio id="audio" src="sound.mp3" controls></audio> document.getElementById("audio").muted = false;
window.addEventListener('deviceorientation', function(event) { var a = event.alpha; var b = event.beta; var g = event.gamma; }, false);
<canvas id="canvas"></canvas> <script> var gl = document.getElementById("canvas").getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height); </script>
Démarrez maintenant : http://html5rocks.com