Most browsers will support styling of HTML5 named elements using CSS, even if they don’t properly support or recognise those elements. Internet Explorer is the exception to the rule, and doesn’t apply styling to the new elements — it takes the approach that if it’s not part of the doctype spec, then there’s no point in even trying to parse the CSS.

Elco on the approach:

The solution is actually pretty simple; put the new HTML5 elements in their own namespace. By doing so, Internet Explorer skips checking (and collapsing) the new elements and they display just fine. It’s the same method as styling an XML document with CSS and Internet Explorer displays that just fine, too.

It’s a technique I played around with a few weeks ago, and — although quite clever — isn’t really useful in any practical way. Instead of using an <section> element, you instead need to use a namespaced version, like <html5:section>. The reason I abandoned the use of this technique was because it creates more problems than it solves, and your not using a very convoluted strain of HTML5 — if we’re trying to standardise things with HTML5, then this kind of technique just muddies the waters.

It’s a commendable attempt at solving an irritating problem though: I really wish basic support for HTML5 elements could be enabled without the need for scripting. I’ve tried a few techniques and have yet to find the holy grail. I’ve tried several methods of tweaking the doctype to include the new elements, but to no avail. I even looked at using an HTC file to wrestle things into shape, but since any transformations on the DOM require scripting, that was a dead-end.

The closest I got was to use XSLT to transform the document – effectively swapping out every instance of an HTML5 element with a division which identified the element type with a class name, like <div class="article">. Since Internet Explorer has good support for XSLT this is a very reliable technique, but with one major drawback: for it to work, the document has to be served up as an XML file. Aside from the complications that creates for how you serve up your documents — particularly if they’re scripted — it causes havoc for other browsers.

So, sadly, it looks like Javascript is the only way to do it, for now.

We recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

They provide code samples and an explanation of their really well thought out design decisions. Really surprising how little code is involved in creating something like this too.

One of the clever things that Blueprint introduced was the idea of displaying the grid while you’re working – this proves to be an invaluable aid as you try to refine CSS rules.  But I’ve found that – as good as the theory is – it has a few drawbacks:

1. Because it uses a background-image CSS property, it overrides any beautiful background design you might have implemented.
2. Because it uses images, if you change your grid size, you have to generate a new custom image – a bit of a faff.
3. You have to tweak your CSS every time you want to turn the grid on or off.

Since I work with grids more and more often, I decided to have a stab at coming up with a solution which refines the Blueprint idea, adds a dash of jQuery to produce something which is a little more flexible and user-friendly.

What I’ve come up with is a jQuery plugin called Gridlet.  Instead of using pure CSS, the plugin generates a grid on-the-fly, and it’s an improvement in the following ways:

1. It doesn’t use images – instead it dynamically generates a grid on top of your page, so your design remains intact.
2. Changing your grid size is as simple as changing a setting – no need to generate images.
3. You, er, have to tweak your JS to turn it on or off (this is something I’m going to work on improving – it’s early days).

It’s also worth noting that this first version only produces horizontal grids – that’s all I need at the moment  No doubt I’lla dd vertical grid spacing as and when it’s needed.  Any comments or suggestions are appreciated.

You can download version 0.1 of Gridlet here.  I’ve only tested in Safari 3 and Firefox 3 so far.

Implementing it is really easy – you just do something like this:

$(document).ready(function() {
  $("body").gridlet();
});

If you want to override the default grid height or colour, just pass in the settings like this:

$(document).ready(function() {
  $("body").gridlet({
    height: 18,
    background: "#fcc"
  });
});

And finally, for your curiosity, here’s the source code:

(function($) {
  jQuery.fn.gridlet = function(options) {

    var opts = $.extend({}, $.fn.gridlet.defaults, options);
    var line_position = 0;
    $("<div/>").attr("id", "grid_container").appendTo("body").css({
      position: "absolute",
      top: 0,
      left: 0,
      height: "100px",
      width: "100%",
    })

    while(line_position < $("body").height())
    {
      line_position += opts.height;
      $("<div/>").css({
        position: "absolute",
        top: line_position,
        left: 0,
        height: 1,
        width: "100%",
        background: opts.background
      }).appendTo("div#grid_container")
    }

    return this;

  };

  jQuery.fn.gridlet.defaults = {
    height: 24,
    width: 24,
    background: "#ddf"
  };

})(jQuery);