Re: Styling by attribute-based association?

Mark Birbeck wrote:
>>But again this is a different "label".  It has no this fancy "for".
>>So it has no mentioned problem of matching indirect IDs in CSS.
> 
> Exactly! Sounds like a good design to me ;)

   Actually, it's awful. Look at the example of <nl> from the specification:

| <nl>
|    <label>Contents </label>
|    <li href="#introduction">Introduction</li>
|    <li>
|       <nl>
|           <label>Terms</label>
|           <li href="#may">May</li>
|           <li href="#must">Must</li>
|           <li href="#should">Should</li>
|       </nl>
|    </li>
|    <li href="#conformance">Conformance</li>
|    <li href="#references">References</li>
|    ...
| </nl>

   Now remember that <nl> is essentially for navigational menus. In a
menu, you see the label for a submenu first, then you see the submenu
when you click on the label. Therefore, you'd expect the label to have
the same style as the grandparent <li> element, with the exception that
there may be an arrow to indicate the submenu or something similar.
Therefore, from a user perspective, styling should look like this:

   nl -> li -> label

   However, the actual styling is more like this:

   nl -> li -> nl -> label

   So, for instance, if you want the nested <nl> element to have a red
background color, the label background would also be read, even though
this would not be the background color of the other items at that the
level of the label in the list. It also means that if a style for the
nested <nl> differs from the style of the parent <li>, <label> can no
longer inherit from the <li> element with regards to that property.

   Consider this. If you want the submenu hidden and use "display: none"
for when the <nl> element isn't focused, how will the user see the
<label>???

   Ideally, you'd want the <label> to be outside the list, but
associated with the navigational list:

| <nl>
|    <label>Contents </label>
|    <li href="#introduction">Introduction</li>
|    <li>
|       <label>Terms</label>
|       <nl>
|           <li href="#may">May</li>
|           <li href="#must">Must</li>
|           <li href="#should">Should</li>
|       </nl>
|    </li>
|    <li href="#conformance">Conformance</li>
|    <li href="#references">References</li>
|    ...
| </nl>

   Above, I'm using what I've referred to in the past as "sibling
association" to associate the label with the navigational list.
Unfortunately, this can't be used in situations where a submenu can be
called from multiple locations. For example, right here in my trusty
email program, I have both and "attach" menu option and an "attach"
toolbar button that can both bring up the same attachment submenu. How
exactly do you do that without some kind of |for|-like attribute?

Received on Thursday, 27 October 2005 07:51:40 UTC