Re: Proposal for <figure> graceful degradation

Maciej Stachowiak wrote:
>     3.b) Authors may have existing styling for label for form control 
> purposes that's not specifically scoped via classes, ids or descendant 
> rules. In this case, they would have to undo it for figure labels. The 
> same issue is possible in theory for <legend>, but the use of <fieldset> 
> seems to be relatively rare as it does not fit well with modern 
> visual/interaction design.
> 
> I think the problems with using <legend> are more serious than either of 
> the above problems.

I think you're dismissing the pre-existing styling issue too quickly. 
It needs to be as easy as possible to migrate existing sites to HTML5 in 
the future, so we need to consider what kinds of issues authors will 
face in practice.

A lot of authors style labels in a variety of non-trivial ways to 
achieve various form layouts, This often includes, among other things, 
floating, margins, padding, text alignment, colours, cursor pointers, 
etc. and writing styles to undo all of them in the figure case is not 
really that trivial in all cases.

Since in IE, the label wouldn't be a descendant of the figure element, 
the labels could not be selected using the selector:

figure label { ... }

It would require the use of an additional class name or containing 
element, or for the DOM to be fixed up with a script.

There are also specificity issues to worry about when overriding any 
styles.  Authors may need to artificially increase the specificity, 
typically by adding IDs or classes, or to use the !important keyword. 
Then, making modifications to the styles for form labels in the future 
would mean that the styles for the figure labels may also need updating 
as well.

If an author wants to reuse their figure styles on other sites, which 
may have significantly different form label styles, the figure label 
styles may need to be updated, making the process less trivial than it 
should be.

This issue may still happen with legend as well, though its likely to be 
to a much lesser extent because the current limitations with styling 
fieldset legends mean that fewer styles are typically applied. 
Although, I do agree the current problems with legend are serious, I 
think we need more information from browser vendors.

Is it possible for browsers to fix their handling of legend, so that it 
appears in the DOM when used outside of fieldset?  Maciej indicated in 
IRC that this may be done as a way to avoid other problems. [1]

<othermaciej> <legend> is given special rendering behavior in a
               <fieldset> that can't be expressed with CSS
<othermaciej> browsers probably ignore it in other places as a way to
               avoid causing problems with that in other places

When <figure><legend> occurs within a fieldset, the legend element is 
also given that special styling. [2]

<fieldset>
   <legend>Fieldset</legend>
   <figure>
     <img src=image>
     <legend>Caption</legend>
   </figure>
</fieldset>

In Firefox 2 and IE7, the legend element does not occur within the 
figure and it is given the special default styling.

In Safari 3 Beta (Win), the figure's legend element isn't present within 
the DOM.

In Opera 9.5, the legend element is a child of figure, but it's given 
the special styling and author styles are limited, as usual.

Additionally, in Firefox, if the fieldset doesn't have its own legend, 
the figure's legend is visually moved to the top of the fieldset, to the 
normal position.

Is it possible for browsers to fix these issue, and is it realistic for 
them to do so sooner rather than later?  If not, should we just accept 
the authoring problems with reusing label, or should we come up with a 
new element name?  The name either needs to be appropriate for use as 
within both the <figure> and <details> elements, or 2 new names.  The 
following alternatives have been suggested in discussions on IRC:

For figure captions:
* <figcaption>
* <cap>
* <capt>
* <cptn>
* <description>
* <desc>
* <tag>
* <tagline>
* <caption2>

For details:
* <detailslabel>


[1] http://krijnhoetmer.nl/irc-logs/whatwg/20070916#l-65
[2] 
http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Afigure%20%7B%20display%3A%20table%3B%20background%3A%20lime%3B%20%7D%0Afigure%20legend%7B%20display%3A%20table-caption%3B%20text-align%3A%20center%3B%20caption-side%3A%20bottom%3B%20background%3A%20yellow%3B%20%7D%0Afigure%20legend%3Afirst-child%20%7B%20caption-side%3A%20top%3B%20%7D%0A%3C%2Fstyle%3E%0A%3Cfieldset%3E%3Clegend%3EFieldset%3C%2Flegend%3E%3Cfigure%3E%3Cimg%20src%3Dimage%3E%3Clegend%3ECaption%3C%2Flegend%3E%3C%2Ffigure%3E%3C%2Ffieldset%3E

-- 
Lachlan Hunt
http://lachy.id.au/

Received on Sunday, 16 September 2007 14:32:14 UTC