Beyond HTML5 and CSS3

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.