Re: Programmable state-machines in CSS proposal

On Tue, Jan 29, 2013 at 4:59 PM, Bobby Mozumder <mozumder@futureclaw.com>wrote:

> Hi,
>
> A problem I've been dealing with in design is that the pseudo-class
> selector :hover signals a state of an element, and that element is the only
> object that style can be applied to.
>
> For example, i can only affect the element that :hover applies to:
>
> #myImage {
>  color: #000000 ;
> }
>
>  #myImage:hover {
>  color: #fffff;
> }
>
>
> I can't apply it to affect another completely separate element:
>
> #myImage -->  #myOtherImage {
>  color: #000000 ;
> }
> #myImage:hover -->  #myOtherImage {
>  color: #fffff;
> }
>
> I would need to Javascript for this to happen.
>
>
Here are two other approaches to the problem:

First one named CSSS!
<http://www.terrainformatica.com/htmlayout/csss!.htm>(CSS script) that
I've implemented in HTMLayout [1]

CSSS is a set of "active"
properties<http://www.terrainformatica.com/htmlayout/csss!-events.htm>with
name ending with "!".  Such properties may contain CSSS expressions.
CSSS is very simple language implemented as virtual [state] machine. It is
purely stack based - no GC required for the execution.

As a typical example, here is how UI functionality of the <label
for=otherid > element can be (roughly) defined using CSSS! extension:

   label[for]
   {
     hover-on!  : $1(#< self.for >):hover = true; /* JS: $("#" +
this.attr("for")).first().setState("hover",true); */
     hover-off! : $1(#< self.for >):hover = false;
     active-on! : $1(#< self.for >):focus = true;
     cursor:pointer;
   }
   input:hover
   {
     outline: 4px solid blue;
   }

Hover on the label changes :hover state on "buddy" element identified by
"for" attribute.
Activation of the label causes focus to be set on buddy element.

Second approach that I've implemented in Sciter [2] uses script and one
additional CSS property named "prototype":

   label[for] {
     prototype: Label url(label.tis); /* subclass all matching
elements by the Label behavior defined in label.tis file */
   }

It requires additional script where Label behavior is defined
(TIScript<http://www.codeproject.com/Articles/33662/TIScript-language-a-gentle-extension-of-JavaScript>
):

class Label: Behavior {
  function attached() { this.buddy = self.select("#" +
this.attr("for")); /*kind of CTOR but for the mixin case */ }
  function onHoverOn() { this.buddy.state.hover = true; }
  function onHoverOff() { this.buddy.state.hover = false; }
  function onActiveOn() { this.buddy.state.focus = true; }
}

Personally I would prefer second approach as it clearly separates
behavioral part from styling part and at the same time it allows to assign
behaviors decoratively using CSS.

[1] HTMLayout, embeddable HTML/CSS engine -
http://www.terrainformatica.com/htmlayout/main.whtm
[2] Sciter, embeddable HTML/CSS/script engine -
http://www.terrainformatica.com/sciter/main.whtm


-- 
Andrew Fedoniouk.

http://terrainformatica.com