"active" CSS

I've got a task: to emulate behaviour of XHTML2 <nl> element
(collapsible list/"tree") using CSS solely.

After some experiments I came up with the following solution. I've 
implemented

    :on-click

pseudo class and function

   set-parent-attribute(  <attribute-name> , <attribute-value> )

This function sets attribute <attribute-name> of element's parent to
<attribute-value>

Having this I defined following statements in my stock style sheet for nl>li
and nl>label:

nl>li  {  display:list-item;  }
nl[state="close"]>li { display:none; }

nl>label:on-click {  set-parent-attribute ( state, "close"); }
nl[state="close"]>label:on-click  
                  {  set-parent-attribute ( state, "open");  }

Following HTML with the style applied defines such
collapsible list (tree):

<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>
</nl>

In fact I was using initially full set of on-mouse, on-focus, on-key, 
etc. "CSS event
connectors".  Instead of the 'set' function I was using names of functions
implemented in script  (my c-smile language: 
http://c-smile.sourceforge.net )
Script functions reside in associated <script> block.

During this experiments I have discovered that surprisingly many current
typical HTML/JavaScript use cases seen on the web
could be implemented by the "on-click" and couple of simple "state-switch"
functions like 'set' I mentioned before.
I mean that many dynamic effects (e.g. <nl>, popup menus, etc.) could be 
defined without any
script at all - just in "pure" CSS.

This message is not a proposal in any sense.
It is just my thoughts aloud about "CSS and active elements" and "CSS and
scripting".

I would appreciate any creative comments on the subject...
E.g. "set-parent-attribute" is not universal enough.
Some other function, with additional parameter defining
"relative path" of target element, should be designed.
And of course: does all of this make any sense?

Thanks.

Andrew Fedoniouk.
http://terrainformatica.com

Received on Saturday, 9 October 2004 20:38:43 UTC