Re: "active" CSS

Andrew Fedoniouk wrote:

>
> 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
>
>
>
In my opinion, do not try to cross-contaminate the uses of each area, 
leave "Behavior" to scripting, leave Markup to HTML/xhtml and leave 
Style to CSS ;-)

those ideas you had with the nl element would have been much better used 
with ECMAScript/DOM than CSS, much more understandable and use-able...

~Justin Wood

Received on Sunday, 10 October 2004 04:03:16 UTC