Building HTML5 Webapps
In the revamp of TweetBe.at and for another contract project for the iPhone browser I’ve been working a ton with new HTML5 (+CSS3) features, and I’m finding them very very useful in building rich web applications, although new capabilities are not without their perils.
In TweetBe.at I pretty much run the gamut of HTML5 features available today, and I am happy Firefox 3.6 was released, because for a while things were not working perfectly on Firefox due to lack of feature support.
The new features I found most useful are:
- Linear Gradients
- RGBA colors
- Offline storage
- Input placeholder
- Input type=number|email|search
- Box shadows / Text Shadows / Rounded Corners
- Input autofocus
- :empty pseudoclass
- Attribute searching
- Nth child and not()
Linear gradients are killer and super easy. It’s not too hard of course to do your own gradient, but gradient support in the browser makes it 100% trivial.
I do gradients with 3 lines:
background-color:#D2F796 (this is for legacy browsers)
background:-moz-linear-gradient(270deg, #D2F796, #B2D776);
background-image:-webkit-gradient(linear,0 0, 0 100%, from(#D2F796), to(#B2D776));
I started doing gradients like this in Chrome, and was happy to see that FF3.6 supports them too, with a better syntax in my opinion.
RGBA colors are also easy, but you probably wouldn’t use them too much. I used them only once in TweetBe.at - essentially if you want a color to be transparent - such as a background, but not the content: you use RGBA instead of opacity.
RGBA is used simply like color:rgba(200,200,200,0.8) - and you can use it wherever color is accepted. Happily this format is the same on both webkit and gecko.
Offline Storage is pretty amazingly cool and I’ve been using it since the original TweetBe.at to bring native like richness to web apps. The premise is that you can store variables locally without the extreme drawbacks to saving them in cookies.
The syntax is the same in all browsers that support it (chrome, safari, firefox, opera 10.5 alpha)
localStorage.setItem(key, value) //sets the item
localStorage.getItem(key) // gets the item
localStorage.clear() // empty cache
I typically only use localStorage, I don’t really see a lot of point to sessionStorage. With localStorage I use JSON.stringify on vars to save them for the next page load.
LocalStorage is a powerful feature: you can easily hang yourself on it. Three big things to beware of are:
- concurrency - like any cache you can have a race condition where you cache prematurely;
- corruption or old state - a webpage is pretty stateless, but if you have a bug or don’t clean up as you move through versions, people can be easily stuck with bad data that can’t be easily gotten rid of and can cause hard to diagnose bugs.
- storage limitation - if you can increase this limit, I don’t know how. Yes I have run into it with TweetBe.at and I have no good solution for this one other than try not to waste space.
Input Placeholder is pretty damn awesome. Basically if you want to put some text in an input box explaining what it’s for, just do
<input placeholder=”Type a user name here” type=”text”/>
And if the input is empty it will have your placeholder instead, all done by the browser for free.
Input types are vastly expanded in HTML5, they just went nuts. Basically only the iPhone supports them though - it changes the data entry keyboard to suit the type. This only works on 3.1 iPhones though.
Shadows and rounded corners pretty self explanatory:
-moz-box-shadow:1px 1px 1px black;
-webkit-box-shadow:1px 1px 1px black;
Makes a shadow. Mozilla can do 4 values, which effects the shadowyness of the shadow.
-moz-border-radius:5px;
-webkit-border-radius:5px;
Makes rounded corners. Webkit and Mozilla annoyingly use a totally different syntax for the individual corners however. I also think that a lot of times Mozilla’s rounded corners don’t look great.
Input autofocus is like placeholder, just something that should be part of the browser. Adding the autofocus attribute to an input will make the cursor focus there on page load (like Google.com)
<input name=”search” autofocus/>
Drop dead easy.
:empty is a totally invaluable css pseudoclass that I didn’t know I needed so badly until they gave it to me. Essentially it just selects elements that are empty. This is really useful for things like empty boxes that because of padding still appear as ghost boxes.
div { padding:5px; background:red; }
div:empty { padding:0; }
Now you can empty out a div and it display as a little 10px red box that you don’t need. I ran into problems using *:empty or element:empty { display:none; } - so I don’t use those.
Attribute searches can be done in CSS3, using a regex like syntax: element[foo^=”bar”] matches every element with attr foo that starts with bar. This stuff can be really useful:
a[href$=”.pdf”] { background-image: url(icons/pdf.png) no-repeat; }
To show icons next to all pdf links to tell people don’t click on them they will launch the evil Adobe reader and the Chinese will check out all your source trees.
Not and nTh child are useful for a similar reason, it basically moves towards a declarative query language for the DOM.
li:nth-child(2n + 1) { background:red; }
Makes it very simple to add every other row highlighting.
These features are only some of the CSS3 and HTML5 features, but I’ve found them the most useful so far. Of course IE doesn’t support any of this stuff and probably crashes if a page doesn’t have at least one <font> or <marquee> tag, so if you want to support browsers that hate you, keep it in mind that you have to code some workarounds for Redmond.
