Beyond HTML5 and CSS3

In the book, we talked about supporting video and audio across multiple platforms, but we didn’t talk about a Flash-based fallback; we instead just let the visitor download the file.

The Audio.js project provides a simple API to create a cross-browser audio experience very similar to the many video solitions we talked about tin the book. I’ve played with this a little bit and it’s pretty handy.

Shane Riley has a wonderful example of how jQuery and localStorage can help improve your forms.

Saving Form State with jQuery and localStorage

Devices running iOS 4.2 now support Web Sockets in Mobile Safari. This is great news for services that want to use Web Sockets and can’t rely on a Flash fallback.

iOS 4.2 also now supports TrueType Fonts and they look pretty snazzy.

The iOS devices have had great HTML5 and CSS3 support. LocalStorage works quite well, as do things like CSS3 transformations, pseudoclasses, and multi-column layouts. Offline support works great too, so it fou’yre looking for a neat way to build an offline mobile app for the iPad, you’ve got all the tools you need.

Recently, the W3C’s working group announced that it will no longer advance the specification for Web SQL Databases. Mozilla has taken the stance that they won’t implement the specification mainly because they don’t like the fact that it relies on SQLite’s implementation of SQL. So does this mean that Web SQL Databases are dead?

Hardly. All of the WebKit-based browsers have implemented this technology, and no current browsers implement the proposed IndexedDB solution which the W3C is now focusing on. Mozilla won’t ever implement Web SQL Databases, it’s unlikely that Opera and Microsoft ever will either, but considering that all iPhones, iPods, iPads, and Android devices currently do support this specification, it’s not going away any time soon.

Building an offline application for the iPad? Web SQL Storage is pretty nice stuff, especially when you combine it with HTML5’s offline browsing capabilities. In the book, we focus on that very example.

It’s far from dead. In fact it’s quite stable. The specification even provides transactions, so it’s good enough. Far better than some of the other specifications that many browser makers actually “agree” on.

The Colorzilla extention for Firefox is a handy companion for developers, and the folks behind it have just made things easier when it comes to creating nice-looking CSS3 gradients. Check out the Ultimate CSS Gradient Generator. With just a few mouse movements, you can create gradients that easily work across browsers, like this:

background: #f2f6f8; /* old browsers */
 
background: -moz-linear-gradient(
            top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%); /* firefox */
 
background: -webkit-gradient(
            linear, left top, left bottom, 
            color-stop(0%,#f2f6f8), 
            color-stop(50%,#d8e1e7), 
            color-stop(51%,#b5c6d0), 
            color-stop(100%,#e0eff9)
); /* webkit */
 
filter: progid:DXImageTransform.Microsoft.gradient( 
       startColorstr='#f2f6f8', 
       endColorstr='#e0eff9',
       GradientType=0 
); /* ie */

While it’s important to understand how gradients work, tools like this are great because they do the grunt work for us.

HTML5’s Web Storage API lets us store data on the client’s machine without using cookies. You can use this to build complete client-side applications using HTML and JavaScript. One of the neatest examples of this so far is this simple To-Do list application which uses the Backbone.js framework. As a bonus, the source code for the application is annotated!

http://documentcloud.github.com/backbone/docs/todos.html

What a great way to demonstrate the usefulness of localStorage!

Well, it seems I’m a little late to the party – Remy Sharp has beaten me to the punch and posted a great post explaining the sudden popularity of polyfills. You should read that too.

Over the last few days, people have been talking about “polyfills.” According to Paul Irish, a polyfill is

A shim that mimics a future API providing fallback functionality to older browsers.

Throughout the book, we discuss many different polyfills, even creating our own at times. As more developers implement more of the interesting HTML5 and CSS3 features, more interesting polyfills are emerging.

One of the most well-known polyfills is Remy Sharp’s html5shim which lets us use the new sectional markup in our pages in browsers like IE 8 and earlier. Others like Socket.IO go beyond simple polyfills and provide both server and client-side fallbacks for Web Sockets.

The Modernizr wiki has a huge list of various shims and polyfills you can use in your work.

Creating usable fallback solutions is the only way we can use these new APIs and features on our sites today. HTML5 and CSS3 provides a fallback solution for almost every topic covered.

I didn’t have nearly enough space in the book to cover how to properly encode video files for mobile devices. Thankfully the wonderful folks over at ZenCoder put up a pretty hefty blog post on how to get your video to almost every mobile device (and more).  This is really good stuff, and completely accurate.

How To Encode Video For Mobile Use

The <code>section</code> and <code>article</code> elements are two new elements we can use to more clearly define our content when we use HTML5. There’s a lot of confusion about how these should be used, so let’s try to clear it up.

Sections are logical regions. A newspaper may have a “Sports” section. That sports section may, in turn, have many subsections, like the socres page, a section for football, hockey, baseball, and even another section for local sports. Sections can be nested within other sections, and that’s how you use them in HTML5 too.

The sports section also has many articles. Articles contain syndicatable content that can stand on its own. That’s the key phrase though – the article <em>must be able to stand on its own.</em>.

So sections are really logical separations, whereas articles describe real content. It gets a little more complicated because articles themselves can be divided up into sections too.

If you’re interested in working with HTML5 in your ASP.Net MVC applications, you should have a look at this toolkit which makes it easy to implement some of the new HTML5 form features into your applications.

http://www.deanhume.com/Home/BlogPost/asp-net-mvc-html5-toolkit/29