I have been wanting to convert my portfolio site (this one) to HTML5 for a while now but had been cautious about the way Drupal 7 would handle the change. With the help of several helper modules and web tools available today, I can safely say that it is possible. Following is a recount of the steps involved for a basic HTML5 conversion of your theme.
Theme Template Conversion
-
My first step was to create a html.tpl.php and template.php to add a preprocess function that would handle the switch of doctypes based on the RDF module presence. Code follows:
-
tempate.php function
-
// Preprocess variables for html.tpl.php.
//template_preprocess_html
function themename_preprocess_html(&$variables) {
if (module_exists('rdf')) {
$variables['doctype'] = '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">' . "\n";
$variables['rdf']->version = ' version="HTML+RDFa 1.1"';
$variables['rdf']->namespaces = $variables['rdf_namespaces'];
$variables['rdf']->profile = ' profile="' . $variables['grddl_profile'] . '"';
} else {
$variables['doctype'] = '<!DOCTYPE html>' . "\n";
$variables['rdf']->version = '';
$variables['rdf']->namespaces = '';
$variables['rdf']->profile = '';
}
-
html.tlp.php code
-
<?php print $doctype; ?>
<html lang="<?php print $language->language; ?> dir="<?php print $language->dir; ?>"
<?php print $rdf->version . $rdf->namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
-
Following I edited page.tpl.php and front--page.tpl.php in order to change the DIV tags surrounding main sections and navigation to the <header>, <nav>, <section> and <footer> tags accordingly. CSS rules should also be updated if needed.
-
The next step was to edit block.tpl.php for the same reasons. In the case of block.tpl.php I chose to use the <aside> tag to open and close the blocks markup as it best describes semantically the nature of blocks on sidebars on my site. I left comment.tpl.php alone as during my tests, changing the DIV tags to <section> tags would affect the output of the content variable printing the word "Array" instead of the comment.
HTML5 Tools Module
I am using HTML5 Tools as a helper module for Drupal 7. In short, HTML5 Tools allows Drupal sites to be built using HTML5 ... smartly.
One of its goals is to provide as much support for HTML5 markup in a set of Tools provided by one module.
Drupal 7 Features
-
Support for the html5shiv plugin
-
Support for the innershiv plugin
-
Support for Google Chrome Frame
-
Adds new elements for used in the Views module
-
Support for the html5 doctype with or without RDF.
-
Tons of other forms and markup changes.
Dependencies
The Drupal 6/7 version of html5 tools requires the Elements module. This allows sites to take advantage of new form elements in the module.
Modernizr
I am also using Modernizr.
What is Modernizr?
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
Unlike with the traditional—but highly unreliable—method of doing “UA sniffing,” which is detecting a browser by its (user-configurable) navigator.userAgentproperty, Modernizr does actual feature detection to reliably discern what the various browsers can and cannot do. After all, the same rendering engine may not necessarily support the same things, and some users change their userAgent string to get around poorly developed websites that don’t let them through otherwise.
Modernizr aims to bring an end to the UA sniffing practice. Using feature detection is a more reliable mechanic to establish what you can and cannot do in the current browser, and Modernizr makes it convenient for you in a variety of ways:
-
It tests for over 40 next-generation features, all in a matter of milliseconds
-
It creates a JavaScript object (named
Modernizr) that contains the results of these tests as boolean properties
-
It adds classes to the
htmlelement that explain precisely what features are and are not natively supported
-
It provides a script loader so you can pull in polyfills to backfill functionality in old browsers
With this knowledge that Modernizr gives you, you can take advantage of these new features in the browsers that can render or utilize them, and still have easy and reliable means of controlling the situation for the browsers that cannot.
Finally, a HTML5 Drupal 7 Presentation
I am using a preprocess function in the template.php for my theme as instructed by this presentation. It basically checks for the RDF module being enabled, if it finds it enabled, it falls back to pre-HTML5 doctype. Otherwise the doctype is added as an HTML5 docuemnt and you are good to go.
