<input list="cars"/>
<datalist id="cars">
<option value="BMW"/>
<option value="Ford"/>
<option value="Volvo"/>
</datalist>
<menu>
<command type="command" disabled label="Publish" />
</menu>
<details>
<summary>HTML 5</summary>
This slide deck teaches you everything you need to know about HTML 5.
</details>
HTML 5This slide deck teaches you everything you need to know about HTML 5.
<metermin="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:
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
In March 1936, an unusual confluence of forces occurred in
Santa Clara County.
A long cold winter delayed the blossoming of the millions of
cherry, apricot, peach, and prune plum trees covering hundreds
of square miles of the Valley floor. Then, unlike many years,
the rains that followed were light and too early to knock
the blossoms from their branches.
Instead, by the billions, they all burst open at once.
Seemingly overnight, the ocean of green that was the Valley
turned into a low, soft, dizzyingly perfumed cloud of pink
and white. Uncounted bees and yellow jackets, newly born,
raced out of their hives and holes, overwhelmed by this
impossible banquet.
Then came the wind.
It roared off the Pacific Ocean, through the nearly
uninhabited passes of the Santa Cruz Mountains and then,
flattening out, poured down into the great alluvial plains
of the Valley. A tidal bore of warm air, it tore along the
columns of trees, ripped the blossoms apart and carried them
off in a fluttering flood of petals like foam rolling up a
beach.
This perfumed blizzard hit Stevens Creek Boulevard, a two-lane
road with a streetcar line down its center, that was the main
road in the West Valley. It froze traffic, as drivers found
themselves lost in a soft, muted whiteout. Only the streetcar,
its path predetermined, passed on...
CSS
Text stroke
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
face: border-radius: 0px;
left eye: border-radius: 0px;
right eye: border-radius: 0px;
base white: border-radius: 0px;
mouth: border-radius: 0px;
nose: border-radius: 0px;
left black eye: border-radius: 0px;
right black eye: border-radius: 0px;
@media screen and (max-device-width: 480px){
/* some CSS here */
}
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
@-webkit-keyframespulse {
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 ;)
Pulse!
File / Hardware Access
Deeper integration with the Operating System
JS
Geolocation
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);
}
HTML
Speech Input
<input type="text" x-webkit-speech />
Speech input is not enabled in your browser.
Try running Google Chrome with the --enable-speech-input flag.
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');
els[0].focus();
var els = document.getElementsByClassName('section');
els[0].focus();
Finding elements by CSS syntax (Selectors API)
var els = document.querySelectorAll("ul li:nth-child(odd)");
var tds = document.querySelectorAll("table.test > tr > td");
var el = document.querySelector("table.test > tr > td"); // el == tds[0]
HTMLJS
Custom data-* attributes
Define, store, and retrieve custom data on the DOM.
// Add new data attributes via JS.
var el = document.querySelector('#out');
el.setAttribute('data-foo', 'bar');
var html = [];
for (var key in el.dataset) {
html.push(key, ': ', el.dataset[key], '<br>');
}
el.innerHTML = html.join('');
Output:
id: good
name: joe
screenName: user1
foo: bar
JS
Element.classList
<div id="main" class="shadow rounded"></div>
var el = document.querySelector('#main').classList;
el.add('highlight');
el.remove('shadow');
el.toggle('highlight');
console.log(el.contains('highlight')); // false
console.log(el.contains('shadow')); // false
console.log(el.classList.toString() == el.className); // true
