Sergey's HTML5 & CSS3 Quick Reference (2nd edition)

Input Type=URL and Datalist

View in Opera

Input Type=Tel and Datalist

View in Opera

Optgroup Element

Progress Element

Downloading now. please wait...

MARK and Q and SAMP Elements

• The name attribute is required [Chrome]
• The phrase to be, or not to be comes from William Shakespeare's Hamlet.
• return{find(chars.begin())!=chars.end()} 

Multiple backgrounds

background:
url(images/sky.png) top left no-repeat,
url(images/water.png) bottom left no-repeat,
url(images/portrait.png) top left no-repeat;

Rounded Corners: Opera, IE9

border: inset black 6px;
border-left-width: 14px;
border-radius: 20%/40px;

Text Shadow: Opera, FF, Chrome

Text Shadow

text-shadow: 3px 3px 3px gray;

Image Borders: Chrome

width: 12em; height: 8em; border: solid 46px;
border-image: url(images/flower.png) 35 repeat stretch;
-webkit-border-image: url(images/flower.png) 35 repeat stretch;
-moz-border-image: url(images/flower.png) 35 repeat stretch;

Image Borders: Chrome 2

border-image: url(images/flower.png) 15 repeat round;
-webkit-border-image: url(images/flower.png) 15 repeat round;
-ms-border-image: url(images/flower.png) 15 repeat round;
-moz-border-image: url(images/flower.png) 15 repeat round;

Test it in FireFox

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);
}


          

Web 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');
      

Save text value on the client side

Drag and Drop

Scalable Vector Graphics

View it in IE9

Canvas Element