This article has been superseded. It’s here for historical reasons only. <details> now uses a <summary> element; <figure> uses <figcaption>.
You may recall that I blogged about legend not being so legend as the heading element for
figure. After enough noise was made the spec was changed so that the heading and contents of these elements can now be marked up using the
Although not immediately obvious why it’s the right choice, it appeared to work for our needs…at first. Of course now, it’s been discovered that it’s actually a pretty bad idea.
How we got here
figure solve a common design pattern and provide nice new semantic tags to solve that problem. A
figure could be an image you’re referring to in an article or chapter of a book, and the
details element allows the user to interactively show and hide the details of some piece of information.
Both elements can contain a heading element to label up the contents. For some reason, beyond this author’s understanding, these two elements, completely different in meaning, have been historically tied to using the same solution solve the problem how to markup the heading.
As I mentioned earlier, originally the proposed solution for the headings was to use the
legend element, which proved to completely break in every browser (in new and interesting ways).
That’s not a bad idea actually. Ok, done.
Before this was proposed there was lots of discussion about why we couldn’t introduce a new element to solve this problem, and Ian points out already 18 (or 22, I forget!) elements that represent some sort of heading. This is the argument for not introducing another new heading type element to solve the
The problem with dt/dd
Ironically the problem isn’t with the
dt part of the solution, it’s actually with the
dd in, guess what, IE6 & 7. I want to explain and draw attention to what Dean has found.
figure (and probably other elements) bleeds to the next element.
By styling a dd red, and only the dd, here’s what it should look like (and does in IE8):
Where as in IE7 (and IE6), the red style bleeds in to the following
p element (note the “this paragraph shouldn’t be red”):
![dd styled in IE7](
Notice how in IE7, the contents of the first
innerHTML is empty.
The problem here is that:
- IE7 and below can’t style a
ddproperly without it breaking and the style bleeding in to adjacent elements.
Is there hope?
There is a hack that fixes this issue. It’s pretty mad, but it does fix the styling issue. However the side effects from this hack are outright unacceptable and are so serious I would argue that the hack solution itself is a bug.
The hack is over at the public-html of W3.org, and involves stuffing an open
object tag just before we close the
This isn’t a clean solution for including in HTML by hand, authors won’t remember or might get it wrong, so it needs to be perhaps automated as part of the HTML5 enabling script, right? It would have to be inserted using
document.write() as the last part of the
Dean went on to test this, and he found:
There is a nasty side effect though. As you mentioned the document.write() should be the last thing in the <head>. If there are any scripts following the document.write() then they are not executed.
The really freakin’ important bit:
If there are any scripts following the document.write() then they are not executed
We want the details
We, as authors, want to make use of
figure today. Waiting for IE7 to fall out of circulation before we start using these elements (as it’s been proposed a number of times on the IRC channel and mailing boards) is outright not going to happen. IE6 & 7 are going to be around for a good more number of years, certainly IE7 (IE6 has at least another 5 years in the beast).
We are going to start enabling the
What are our current options?
- Give new meaning to an existing element (as we’ve already tried to),
dt/ddhave been tried, tested and failed. What else could we use?
- Repurpose one of the existing new elements (keeping in mind that the dt/dd was repurposed so it should be a consideration).
- Create another heading element to solve this problem.
The problem is that the conversation seems to have lost steam (or certain Dean was starting to see the conversation go in circles). If you want to see these two elements make it the final spec, and correctly, head over to either the IRC channel or the mailing list, and get heard.