Dual-mode elements (ACTION-37)

After the recent discussion here about collapsing lists and other 
dual-mode (or even multi-mode) elements, I got an action from the CSS 
WG to write a concrete proposal for a section in CSS. I had started 
doing that already and here it is.

I don't know yet in which module it belongs. css3-links (the Hyperlink 
Presentation module) probably makes most sense, because dual-mode text 
is in fact a traditional hypertext style.

(This text refers to a 'target' property that is able to make a link 
inactive, i.e., it's still a link, but no longer a *hyper*link. That 
property is, of course, just as hypothetical as the dual-mode feature 
itself.)


-----------------------------------------------------------------------

Dual-mode elements (':normal' and ':alternative')
=================================================

One of the traditional hypertext behaviors is to expand and collapse 
elements in place, e.g., to collapse a list or a section, leaving just 
a small icon or a heading. In the CSS implementation, that behavior is 
not tied to links, but can be applied to any element. Indeed, the 
behavior has certain restrictions on the resulting rendering when 
applied to hyperlinks (see the examples below) that it doesn't have 
when applied to normal elements.

In CSS, the two states are called normal and alternative (':normal' 
and ':alternative'), rather than collapsed and expanded, because one is 
not necessarily shorter than the other: they are just different styles. 
Also, there is no property to specify whether an element starts out 
collapsed or expanded: it always starts out as ':normal' and the style 
rules specify how the element looks in that state. The two 
pseudo-classes are mutually exclusive.

An interactive UA should allow the user to designate any visible element 
and toggle its state to ':alternative' and back again. A typical way 
would be a mouse click. But if the element is a hyperlink 
with 'target-name' unequal to ''none'', the UA need not provide such a 
way. A UA should not allow a user to toggle the state to ':alternative' 
if that would not change any property of any element in the document.

* Example 1. This example shows a collapsing list that starts out in the
  collapsed state. Note that UAs that do not support the pseudo-classes
  (such as UAs that support only CSS level 2) will show the list
  expanded at all times and will never show the + and - minus signs used
  as list markers.

    li:normal ul {display: none}
    li:normal::marker {content: "+"}
    li:alternative::marker {content: "-"}

  With a list like this:

    <ul>
     <li>First set
      <ul>
       <li>Set 1, choice 1
       <li>Set 1, choice 2
       <li>Set 1, choice 3
      </ul>
     <li>Second set
      <ul>
       <li>Set 2, choice 1
       <li>Set 2, choice 2
       <li>Set 2, choice 3
      </ul>
    </ul>

  the initial rendering might be like this:

    + First set
    + Second set

  and after activating the second line:

    + First set
    - Second set
      + Set 2, choice 1
      + Set 2, choice 2
      + Set 2, choice 3

* Example 2. This example shows how the source anchor of a link is
  replaced by the resource it points to when the link is activated. The
  resulting replaced element is futher styled with a border around it:

    a.thumbnail {
        target: none}
    a.thumbnail:alternative {
        content: attr(href, url);
        border: solid}

  This might be used, e.g., with a document fragment like this:

    <a class=thumbnail href="img01"><img src="th01" alt=""></a>

  The 'target: none' disables the normal behavior of the element as a
  link. Trying to activate the link will thus have no effect. Instead,
  the element has an alternative state and in that alternative state it
  is a replaced element, which, in this case, happens to display the
  target of the link.

  Even if the target is a document of the same format as the source
  (e.g., both are HTML), the result is still a replaced element, i.e., a
  single box. In particular, it is not possible to replace a word by a
  sentence this way and have it take part in the inline formatting,
  including line breaks.

* Example 3. Here is an example that collapses a section to just its
  header.

    sect:normal * {display: none}    /* Hide all children... */
    sect:normal h {display: block}   /* Except for the H */
    sect:normal h:after {content: " ▼"}
    sect:alternative h:after {content: " ▲"}

  A document like this

    <sect>
     <h>The secret life of blue bees</h>
     <p>Not many people know that...</p>
     <p>The blue honey has...</p>
    </sect>

  Might look like this initially:

    The secret life of blue bees ▼

  After the user activates the SECT element, it may look like this:

    The secret life of blue bees ▲
    Not many people know that blue bees are a screen of many years with
    barely a scratch on the inside of the biggest sound effect in
    London.
    The blue honey has not lost any of the splendor that the late king
    acquired when the moon and the earth were of approximately equal
    size, despite what her mother told the other one.

This specification recommends that UAs use the same user actions for 
activating a link as for toggling the state (e.g., a mouse click). If 
the user uses that action on an element that is a hyperlink 
(with 'target-name' unequal to ''none''), then only the hyperlink 
behavior must be executed. UAs may provide other user actions as well, 
including some that only do one or the other, e.g., a context-sensitive 
menu on right clicks.

-----------------------------------------------------------------------

Open question:

What does the Back button do? Does it undo a switch from normal to 
alternative? If so, does it also undo a switch from alternative to 
normal? Does CSS need to say anything about the Back button at all?



Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos                               W3C/ERCIM
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Received on Monday, 7 April 2008 17:22:53 UTC