<script src="foo.js"></script> <div>You won't see this until the script loads and executes</div>
<script src="foo.js" defer async></script> <div> "defer" puts code execution just before onload <br> "async" allows it to be evaluated out of order </div>
<script> // Computing sizes accurately requires stopping // the world while we do any pending style calculations, e.g., // from a newly-loaded style sheet. // This may take a very long time! var throwaway = document.body.clientWidth; // But this will probably be instant: var throwaway2 = document.body.firstChild.clientWidth; </script>
@import considered harmful<canvas><audio><video> & formats (WebM, etc.)<input type="range"><input autofocus><input placeholder="...">header, section, etc.@font-face & WOFFbackground-[size|origin|clip]querySelectorAllhistory.pushStateX-UA-Compatible: chrome=1
<meta http-equiv="X-UA-Compatible" content="chrome=1">
charset<canvas><audio>*<video>*contentEditable<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>
<article>
<header>
<h1>Title</h1>
</header>
<section>
Content...
</section>
</article>
</section>
<aside>
Top links...
</aside>
<footer>
Copyright © 2009.
</footer>
</body>
Dedicated UI:
<input type="range" min="0" max="50" value="0" />
<input results="10" type="search" />
<input type="text" placeholder="Search inside" />
Input Validation:
<style> :invalid { background-color: red; } </style>
<input type="color" />
<input type="number" />
<input type="email" />
<input type="tel" />
etc...
<meter> <progress> <output> etc...
<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>
contentEditable: Like Input, Sort Of<div contentEditable="true" onkeyup="console.log(this.innerHTML);"> Everything, including <em>formatting<em>, is editable. <div>
<form>
<textarea id="ceStorage">
</textarea">
<div contentEditable="true"
onkeyup="document.getElementById("ceStorage").value = this.innerHTML;">
...
<div>
</form>
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
border-radius: 0px;
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px; box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
#logo {
background: url(logo.gif) center center no-repeat;
background-size:
;
}
Resize me! »
div {
background: url(zippy-plus.png) 10px center no-repeat,
url(gray_lines_bg.png) 10px center repeat-x;
}
#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';
Hover over me:
-webkit-transform: rotateY(45deg); -webkit-transform: scaleX(25deg); -moz-transform: scaleX(25deg); -o-transform: scaleX(25deg); transform: scaleX(25deg); -webkit-transform: translate3d(0, 0, 90deg); ... -webkit-transform: perspective(500px)
#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}
.composited {
-webkit-transform: translateZ(0);
}
chrome.exe --enable-accelerated-compositing --enable-webgl
#logo {
background: -webkit-canvas(drawn-logo);
-webkit-transition: background-position-x .3s;
border: 0;
...
}
@-webkit-keyframes pulse {
from {
opacity: 0.0;
font-size: 100%;
}
to {
opacity: 1.0;
font-size: 200%;
}
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}
*Please make a better use of it. We don't want a new blink tag ;)
querySelectorAlldefinePropertyvar el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
HTMLElement.prototype.shout =
function() {
alert(this.innerHTML);
};
var f = document.getElementsById('f');
f.shout();
for (property in f) {
if (property == "shout") {
alert("we've busted the iteration surface area!");
}
}
Object.defineProperty(HTMLElement.prototype, "shout", {
value: function() {
alert(this.innerHTML);
},
writable: true,
enumerable: false,
configurable: true
});
var f = document.getElementsById('f');
f.shout();
h5.extend(HTMLElement.prototype, { "name": value, ... });
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function (e) {
window.localStorage['value'] = e.target.value;
window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
Save text value on the client side (crash-safe)
<div draggable />
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST # version 1 CACHE: /html5/src/refresh.png /html5/src/logic.js /html5/src/style.css /html5/src/background.png
h5.js