Graceful degradation of sectioning elements

I would like to use the new sectioning elements (<section>, <article>, 
<header>, etc) so that HTML5 UAs can process my documents in new 
improved ways, while still degrading gracefully in current UAs (i.e. 
acting as similarly as possible to the HTML5 behaviour, preferably 
without requiring me to use complex styling or scripting).

A simple ungracefully-degrading example would be:

   <style>header { padding-left: 2em; background: #ffa; }</style>
   <header>
     <h1>BGP Wedgies</h1>
     <p>Copyright 2005</p>
   </header>

Pre-HTML5 UAs will not have the correct default presentation, so it can 
be improved to:

   <style>header { padding-left: 2em; background: #ffa; display: block; 
}</style>
   <header>
     <h1>BGP Wedgies</h1>
     <p>Copyright 2005</p>
   </header>

The HTML Design Principles document (r1.18) gives almost exactly this 
example, under "Degrade Gracefully".

That appears to work fine in (at least) Opera 9.2 and Safari 3. But it 
doesn't work in Firefox 2 (or trunk) - the parser closes the unknown 
element before the first block child (in this case, <h1>). It also 
doesn't work in IE7 - the parser treats unknown tags as empty elements. 
In both cases, it is either difficult or impossible to write a script 
that identifies the intended child elements and reconstructs the DOM.

Possible solutions:

* Use <div class="header">...</div> instead of <header>...</header>, and 
change the CSS to use '.header' instead of 'header'.

That prevents HTML5 UAs from detecting the element's semantics and 
applying the new header-specific processing that justifies the existence 
of <header> in the first place. It also fails to provide any direct 
encouragement to UAs to start supporting <header>.

* Use <header><div class="header">...</div></header>, and change the CSS 
to use '.header' instead of 'header'.

HTML5 UAs will parse that correctly and see it's a header. Firefox/IE 
will parse it incorrectly, but still apply the stylesheets. Scripts that 
try to process HTML5 sectioning elements (e.g. to generate a table of 
contents) will not work in Firefox/IE without being specifically written 
to detect this non-standard way of marking up sections.

A relatively simple script can largely fix the DOM in FF/IE, e.g.:

   var hs = document.getElementsByTagName('header');
   for (var i = 0; i < hs.length; ++i) {
     if (hs[i].childNodes.length) continue;
     var h = document.createElement('header');
     h.appendChild(hs[i].nextSibling);
     hs[i].parentNode.replaceChild(h, hs[i]);
   }

* Use <header><span class="header">...</span></header>, and change the 
CSS to use '.header' instead of 'header'.

This works roughly like the previous solution, but (so far as I can 
tell) Firefox parses it correctly and does not need any script to fix 
the DOM afterwards.

* Use <header><span>...</span></header>, and don't change the CSS.

This works roughly like the previous solution, but it is more concise, 
and the standard CSS element selectors and any scripts expecting an 
HTML5-like DOM will work without scripting in all current significant 
desktop browsers except IE, and will work in IE with the above script.

* (Are there better alternatives that I've missed?)


Problem: <header><span>...block-level elements...</span></header> is the 
simplest solution to many of the degradation concerns, but is currently 
non-conforming in HTML5.

Principle: "Degrade Gracefully" says "HTML 5 document conformance 
requirements should be designed so that Web content can degrade 
gracefully in older or less capable user agents, even when making use of 
new elements, attributes, APIs and content models."

Proposal: Make <header><span>...block-level elements...</span></header> 
conforming.

-- 
Philip Taylor
pjt47@cam.ac.uk

Received on Friday, 2 November 2007 22:51:21 UTC