HTML5

HTML5 Features

by MoonScript

HTML

<form>
<h1>HTML5</h1>
<form method="post" onsubmit="return false">
<ul>
    <li>
        &lt;progress&gt;<br/>
        <progress value="75" max="100">3/4 complete</progress>
    </li>
    <li>
        &lt;meter&gt;<br/>
        <meter value="2" min="0" max="10">2 out of 10</meter>
    </li>
    <li>ARIA</li>
    <li>localStorage</li>
    <li>Drag &amp; Drop, desktop file drag &amp; drop</li>
    <li>Web Workers, <em>window.Worker</em></li>
    <li>history.pushState() and history.replaceState()</li>
    <li>Offline, <em>window.applicationCache</em>, <em>navigator.onLine</em>, <em>window.onOnline</em> and <em>window.onOffline</em> events</li>
    <li>Forms:
        <ul>
            <li>
                x-webkit-speech:<br/>
                <input type="text" x-webkit-speech="x-webkit-speech"/>
            </li>
            <li>FormData() object</li>
            <li><a href="http://dev.w3.org/html5/spec/association-of-controls-and-forms.html#the-constraint-validation-api">Constraint validation API</a>, <em>element.setCustomValidity(message)</em></li>
            <li>
                Form input types:<br/>
                <ul>
                    <li>password min/max: <input type="password" class="required-password" title="between 6 and 50 characters" autofocus required pattern=".{6,40}" maxlength="40"/></li>
                    <li>text with pattern: <input type="text" pattern="[A-Z]{4,}" title="uppercase, at least 4"/> (only uppercase letters, at least 4 characters long)</li>
                    <li>search: <input type="search" /></li>
                    <li>search: <input type="search" results="3"/> (with results)</li>
                    <li>number: <input type="number" value="100"/></li>
                    <li>range: 10 <input type="range" min="10" max="20" value="17"/> 20</li>
                    <li>color: <input type="color" value="#C0C0C0"/></li>
                    <li>tel: <input type="tel" required="required"/> (required)</li>
                   ...

CSS

.required-password::after {
  content: '*';
  font-weight: bold;
  color: red;
}

@font-face {
    font-family: Computer;
    src:...

JavaScript

// geolocation
$('#geo-loc').click(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            alert('Your position is: '+position.coords.latitude+', '+position.coords.longitude);
        });
    } else {
        alert('Sorry, your browser doesn\'t support geolocation.');
    }
    return false;
});