HTML 5 and Drupal Themeing

 

These are my notes from a talk at DrupalCamp LA 2010 given by Scott Vandehey of Metal Toad Media (@spaceninja on twitter.) I arrived a few minutes late, so the introduction is not included. Thanks to Scott for the great talk!

New Video Tag

This includes a Controls attribute, which says that when the video is shown, give the user a way to control it. It doesn't specify which controls or how they should look, which is up to the browser manufacturer.

The Poster attribute is also new; you can specify a JPEG which is a screenshot out of your video, which represents the movie file as a preview image.

Since there is no "standard" video format yet, but you can nest source elements inside your video tag. Each browser will just use the first one that they can play.

As a fallback, you may want to add an object tag for browsers that don't understand the video attribute (like Internet Explorer). You can even nest an anchor tag inside the object tag for browsers that don't support the video tag or object tag.

New Input Types

Instead of input type=text, you can also specify email, url and tel.

ContentEditable

If you set the contenteditable attribute on content, the browser knows to let you edit that content. There isn't really a clear idea of what you do with this yet. The browser gives you the ability to make it editable and some common text formatting, but you don't get any way to save. Seems a little silly, I know. The idea is that you will write your own hooks that will tie it into your CMS. The HTML5 API only concerns the actual editing, and not the saving, deleting or reloading. Dries has mentioned that Drupal 9 could take advantage of this to edit fields on the front-end.

Semantic Elements

This is the part that I'm really excited about, as a front-end developer who spends all his time on themes. In HTML 5, there are new elements for page regions, such as header, nav, article, section, aside and footer.

Doctype

We only use doctypes for browser compatibility. All the browsers that you use have more than one rendering engine: the standards engine, and the old busted engine. If you give IE a document without a doctype, it will use the old engine.

The guys reworking HTML5 asked, "why do we need this?" The new doctype tag is:

<!DOCTYPE html>

What about HTML6? We know that HTML6 will support HTML5, so we don't need to change the doctype.

Character Set
The new character set tag is:

<meta charset="UTF-8">

IE and HTML 5

Internet Explorer doesn't support the new elements, but you can download a JavaScript file that can help make the transition easier.

What is Drupal doing with HTML5?

Not much. It's coming in Drupal 8, but for now, it's up to us. Basically, it's not into Drupal 7, so basically for the next couple of years, it's up to us if we want to use this stuff today.

The good news is, much of this stuff is stable and well-supported, and we CAN use it today.

At this point, Scott walked through changing some common Drupal 7 files to make the output HTML5 compatible. These changes were pretty heavy on the code, so I'm not re-typing them here.

At Metal Toad Media, we created a project called Boron which is a native HTML 5 theme for Drupal.

But Browsers Don't Support It!

All modern browsers have implemented HTML5 to some degree. Pick and choose the parts that work the way you want. Change the doctype and you'll be able to take advantage of the features today.

Are We Back to Tag Soup?

No: you can use HTML or XHTML-style formatting.

Did you enjoy this post? Please spread the word.