Sent to you by Sparkie via Google Reader:
You've heard of HTML 5 by now. Probably the most common new features include the new elements, specifically <video>, <audio>, and <canvas>. Although those are amazing improvements, there are some lesser known features that are worth taking another glance at.
First, be sure to start with the HTML 5 Doctype whenever using these following features.
New Form Types and Attributes
Placeholder – this attribute will display default text inside the input field when not focused. When a user gives the input field focus the text will disappear.
Autofocus – Gives the input field focus immediately
New types: number, email, url, and search
While there are a few other types added such as date or number supported by Opera, we'll only take a look at these four.
One of the coolest features about these new types is that the iPhone will update its keyboard based on the input type.
Number Type displays numeric keyboard
Email type displays email keyboard
URL type displays URL keyboard
Search type displays search keyboard
Like all these new features there are fallback options. For the new types, if a browser doesn't recognize the type it will behave as the "text" type. Additionally, the placeholder and autofocus attributes can be handled through JavaScript for browsers that do not support this feature.
ContentEditable – Allows the text in the element to be editable, similar to a rich text editor
Custom Attributes (data-*) – allows for adding valid data attributes that will benefit the semantics of the markup
Offline Application Caching using Manifest
HTML 5 allows us to cache specific files or assets for offline browsing.
The mime type of the manifest needs to be text/cache-manifest.
First, we must set manifest attribute to our manifest file.
Contents of manifest.blitz:
CACHE MANIFEST
CACHE:
# these resources are to be cached for offline use
index.html
css/style.css
js/script.js
imgs/logo.png
NETWORK:
# these require the user to be online
login.php
# by using a path, this states all requests to
# resources under the /services directory must
# be fetched from the server
/services
FALLBACK:
# when a resource fails to load from /imgs path,
# backup.html is loaded as a "fallback"
imgs/ backup.html
This tutorial primarily focused on markup features, but HTML 5 has much more to offer.
Further Reading
Things you can do from here:
- Subscribe to BLITZ | Blog using Google Reader
- Get started using Google Reader to easily keep up with all your favorite sites
No comments:
Post a Comment