HTML5 – finally here?

The world of the web is changing, perhaps more now than ever. With vast numbers of people now regularly online the web is no longer the province of geeks and academics, but a valuable part of everyday life for many. So it stands to reason that the web itself – and the collection of technologies that make modern websites possible – will evolve. One of the biggest evolutions, in my opinion, is HTML5.

First, some history. HTML is the main language of the web, it’s what makes web pages work. It’s been around for a long time, originally being developed to provide a way to markup – that is, describe the structure of – documents online back in 1991. Tim Berners-Lee, called the father of the web, is director of the World Wide Web Consortium which oversees the webs continued development including HTML. The current version of HTML is 4.01, defined in December 2001, and work is continuing on version 5.

I’ve written about HTML5 a couple of times before, as I think it has massive potential to impact the web for the positive. Progress can appear slow, in fact both of those articles are from 2007, but I understand there is a huge amount of work to be done to get something off the ground. The really great news is HTML5 is already here. At least or some browsers.

If you’re lucky enough to use the latest version of Firefox, Opera or Safari, you’ve got many of the new features in HTML5 already. Bruce Lawson has been kind enough to create a page where you can test some of these, namely header, footer, aside, nav and article. Internet Explorer, the thorn in the side of every web developer, doesn’t support these new elements, so by default that test page won’t work. basically, if IE doesn’t understand those elements, you can’t style them with CSS or manipulate them with JavaScript. As John Allsop said in a recent A List Apart article:

[modern browsers having HTML5 capability] looks like an excellent start. But when we try styling, for example, section elements with CSS that looks like this:

section {color: red}

…most of the above-mentioned browsers manage to style the element, but IE7 (and so presumably 6) do not.

So we have a serious backward compatibility issue with 75% of browsers currently in use. Given the half-life of Internet Explorer, we can predict that most users will be using IE6 or IE7 even several years from now.

Unfortunately, if you are looking for alternative solutions to the CSS problem, putting class attributes on your section elements and then trying to style them using the class value won’t work in IE. Perhaps there is some kind of workaround out there, but unless there is, that looks like a deal breaker right there. However, the deal is back on. You’ll notice on Bruce’s test page it works in Internet Explorer 7 (I haven’t tested 6 yet). How? Simple, by using a JavaScript trick mentioned by Sjoerd Visscher from w3future.com. All developers need to do is “create” the new elements for IE like so (using conditional comments, as we’re tidy boys and girls):

<!-- Dirty JavaScript hack to make IE able to apply CSS to elements
that it doesn't usually know about, plus miscellaneous IE rules -->
<!--[if IE]>
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<style type="text/css">
header *, footer * {text-align:center;}
#wrapper {width:100%;} /* otherwise, IE halves the width of <nav>*/
</style>
<![endif]-->

That script ensures only IE browsers see it, then creates the new HTML5 elements using JavaScript. That means we can then style those elements how we wish. This, dear readers, is how a new age on the web is born.

You may think I’m making too much of this, but I am genuinely excited about the possibilities of new elements – and I’ve not yet even mentioned the audio and video elements, which do pretty much what you’d expect. For me, even a few extra semantic elements like nav and article is going to have a positive impact on the web.

Here’s a sample scenario. You go to Google (other search engines are available) and search for your favourite type of moth: Large Deathwing. The results you get back are generally pretty good, but you also get a lot of results including the word “Large” from different parts of the page. Things like “View large text size”, for example. Poor example, but you catch my drift.

With these new HTML5 elements, it’s possible that search engines will be able to ignore text in non-important sections of pages, like the navigation or any asides. Only words in valid article elements will be retrieved and displayed for your search. Well, that’s the idea. I’m not so naive to believe it will happen quickly (or even at all) but a greater amount of semantic information being built into HTML is a good thing.

I’m hopeful for the future. And as I’ve said a number of times I’m looking forward to putting this stuff into practice. Perhaps thanks to Bruce’s test above, I can start doing that for real.

Performerjs.org – Standards-driven JavaScript Goodness

For a while now I’ve been using a library of little functions built on top of the prototype JavaScript framework which allow me to add some interactive goodness (yes, that means AJAX) to web pages using nothing but a few standard element attributes. I’ve written about this before a few times, but the time has come to push it out a bit further in the hope that it will help others. I call it Performer.

So I’ve bought a new domain names (extending my power on the web, mwahaha) and am in the process of getting the very latest, cutting edge version of Peformer on performerjs.org. There are still some bugs to figure out, particularly in Internet Exploder, but you can see the range of features Performer offers.

It’s released in a Creative Commons licence meaning basically you can use it for what you want, but don’t say you did it all yourself. You can even adapt, build, tweak and chop/change to your hearts content. But any changes you make must be released under a similar licence to help benefit everyone.

No doubt I’ll be writing more about Performer as I add new features and polish up what’s there, but for now just take a look at how a few standard attributes can turn a boring page into an all-singing, all-dancing Web 2.0 wonderpage!

Unobtrusive JavaScript password strength checker

I’ve added a couple of new functions to Performer – my easy to use JavaScript library. The two new functions allow you to check the strength of a password as it’s typed into a text box, and also check if a password and its confirmation match. Both update a notification element with a suitable message.

But that’s not all. Some of the older functions, such as the AJAX loader and tabbing functions, have got a little love as well. They now add extra classes to the elements they affect so you can style them easily. This stuff isn’t documented yet, but in a nutshell:

  • When loading some data from a remote page using the Loader function the element which is being updated will have the class ‘loaderloading’ while the loading is happening. Phew, a few too many ‘loader’s there.
  • When using the Tabber function to switch the visibility between different elements in a tag group, the link to the selected tab will have an additional class of ‘tabbercurrent’.
  • UPDATE: the Toggler function adds the class ‘toggleropen’ when the toggled element is being shown. That means you can easily do ‘open’ and ‘close’ CSS styles.

I’ve got lots more ideas for Performer, but time is short at the moment. However this little library – and the fantastic prototype library it’s built on – continue to make my life better.

HTML, PHP and JavaScript Experiments

I was browsing through some stats for my website tonight and noticed a few people were visiting for my Automatic Image Replacement Engine (AIRE) which I did a long while ago. So I thought I’d do a quick post about some of the other experiments I’ve worked on which are all free for any use (just credit me as the original author).

3hive player – playing the sharing!

A If nifty Greasemonkey script for Firefox which adds a little player for every track found on the excellent 3hive music sharing website. Keep up the good work, boys.

CSS Gantt chart

Show a Gannt chart with just HTML and CSS, no need for images. There’s even fixed-width and fluid-width versions.

Datatable class

A simple datatable class for PHP which will allow you to pass an array of values which will then be displayed as a table. Format cells almost anyhow you like, add optional alternating CSS classes, and lots more options. There’s also a simple explanation of object-oriented programming on that page in case you’ve found it as difficult as me to understand the concept.

Refresher function

Update a part of your webpage with JavaScript the easy way, so now anyone can do that clever AJAX stuff.

Clean URL Capability Checker

If you want to know if your server supports mod_rewrite, the fantastic way to rewrite URLs, then use this little tool.

Zoom Boxes

An experiment with multiple boxes that zoom in and out when clicked. Not much more I can say about that, really.

AIRE – automatic image replacement engine

Fonts are limited on the web, so I wrote this little PHP function that will render single-line text using any font you want as an image. Before you say “but images aren’t accessible!” it writes the images in as backgrouns, leaving accessible text in the HTML. Hoorah.