4 Jan 2012

Where I use HTML5 the most – admin interfaces

Both HTML5 and CSS3 have constantly evolving specs. With browser vendors going ahead and implementing new features using vendor prefixes, and long before they get accepted as part of the standard, we’re faced with a dilemma: We have all these cool toys which we can play with, but can’t really put them to use immediately in production because it’s going to take time for the rest of the world to upgrade their browsers.

What I have been doing lately is using admin interfaces as a ground for testing and learning about these new features. So long you get your clients to use the latest build of Firefox or Chrome, you are good to go. With Chrome, that’s pretty easy with the automatic rolling updates, and Firefox will soon be doing the same. Of course, this is not going to happen with every client, but it’s not that hard to make them use a better browser by just telling them how it can save them development cost. And, that’s true.

The other day, I had to get color alternating rows of a table – grey, white, grey, white, and so on. With an older browser, you have to resort to first modifying your code to give alternate rows class="odd" and then specifying a different color for this class in the CSS file. With CSS3, you can just do:

tr:nth-child(odd) { 
    background-color:#eee; 
}

Want to highlight only the first child of a parent?

#parent-id:nth-child(1) {
    background: #eee;
}

Quick form validation on an internal admin tool? HTML5 form validators FTW.

<input type="text" pattern="[-0-9]+" required />

Those are admittedly trivial examples, but the fact is knowing these little shortcuts quickly add up and help you get stuff done faster. As an added bonus, you also keep your presentation and code separated. The next time you look at a CSS3 or HTML5 feature and think that you can only use them in 2015, think again!

Tagged with:

Leave a Reply