Re: [Bulk] Re: [BECS] CSSS! - CSS script

Should we not use the already IE-implemented expression( /* some js here */) instead of your CSS Script Module ?
The role of W3C is to standardise already implemented properties, and not make some others if a cool way to do this already exists.

---------------------------------------------------------
The way it would work seems to be better :
    selector:hover {
        on-selector-enter: expression(void(this.parentNode.className+=' childIsHovered'));

        /* Fail on IE, because it's considerated as on-selector-enter (as a simple CSS Property, in fact */
        on-selector-leave: expression(void(this.parentNode.className.replace(/ childIsHovered/g,'');
    }

The value of on-selector-enter should be ignored, as the value of on-selector-leave, except if it's one of : 
- start-animation (start a "fade" animation, such as defined in the Apple transform property)
- no-animation (default, as no value was provided)

---------------------------------------------------------
Naturally, you can "make" another new script language (a CSS-Script language that will be active without any need of JavaScript) and contains only a few functions, and a script( /* CSS Script */) function that can provide support for them.

But $p is a bad idea because you can change the style of all the document on a simple :hover or :focus. This is possible in JavaScript but what's in JavaScript is always supposed to be possibly slow. CSS should always be a quick language.


Fremy
  From: David Hyatt 
  Sent: Thursday, May 08, 2008 2:36 AM
  To: Andrew Fedoniouk 
  Cc: www-style 
  Subject: [Bulk] Re: [BECS] CSSS! - CSS script


  http://www.w3.org/TR/xbl/ 


  dave


  On May 7, 2008, at 7:26 PM, Andrew Fedoniouk wrote:

    Idea is to add ability to define simple event handlers in CSS. 

    Event handlers are ordinary style attributes with names starting with "when-...". 
    Such attributes accept sequence of statements of so called CSSScript ending with ';'

    Here is practical example:  implementation of Tabs functionality. 
    Tabs is a set of labels and set of panels. Visibility of panel is bound with correspondent tab.
    Only one tab can be in current state at the moment and so only one panel from the set can be visible.

    Here is one of possible markups:

      <div class="tab-strip">
           <span current>First tab</span>
           <span>Second tab</span>
           <span>Third tab</span>
      </div> 
      <div class="panels">
        <div current>First panel.</div> 
        <div>Second panel.</div> 
        <div>Third panel.</div> 
      </div> 

    Here is style definition that use CSSS! feature:

    div.tab-strip span
    {
        when-active-on: 
               $(div.tab-strip span[current]).current = null
               $(div.panels>div[current]).current = null
               self.current = true
               $1(div.panels>div:nth-child(< self:index >)).current = true;
     }
     div.tab-strip span[current] { background: yellow; border:1px solid; border-bottom:none; } 
     div.panels > div { display: none; } 
     div.panels > div[current] { display: block; background: yellow; border:1px solid; height:200px; } 

    This simple set of rules will present panel corresponded to its tab/label. As you may see tabs and panels may not 
    be in parent/child relationship. And usually they are not.

    Here I am using 'when-active-on' event handler that is triggered when element is getting active state.
    Meaning of statements of when-active-on handler:

    $(div.tab-strip span[current]).current = null
    $(div.panels>div[current]).current = null

      - select set of DOM elements by the selector "div.tab-strip span[current]" and remove 
        attribute 'current' from each of them (by assigning null). 
        Do the same for the "div.panels>div[current]" selector.

    self.current = true

      - set 'current' attribute equal to "true" on the DOM element this rule is applied to.

    $1(div.panels>div:nth-child(< self:index >)).current = true;

      - set 'current' attribute equal to "true" on the DOM element satisfying the selector
        "div.panels>div:nth-child(X)" where X is an index of the 'self' - DOM element this 
        rule is applied to.

    The CSSScript is simple. It is a sequence of statements in the form:

       <target> <prop> = <left-side-expression>

    Where 'target' is either:
        self - pseudo variable holding reference to the element this rule is applied to (close to 'this' in JS), or
        $xx(...) - one of six selector pseudo-functions. These functions return either one or set of elements.

    'prop' is either: 

      a.. .attrname - name of DOM element attribute, or 
      b.. :statename - name of state flag of the DOM element, examples are:
      :hover, :active, :checked, etc. And there are two additional state fields: 
        a.. :index - index of the DOM element in its parent collection and 
        b.. :value - runtime value of the DOM element, for input elements that is the value and for other it is a text of the DOM element.

    Thus CSSS! is allowed to change DOM element attributes and states but not CSS attributes. For many reasons.

    Selector pseudo functions:

      1.. $(selector) - select elements globally with the :root set to the root node of the document. 
      2.. $1(selector) - select first matching element globally with the :root set to the root node of the document. 
      3.. $c(selector) - select children of the self element, the :root is the self element. 
      4.. $1c(selector) - select first matching child of the self element, the :root is the self element. 
      5.. $p(selector) - select all parents of the self element matching the selector, the :root is the root node of the document. 
      6.. $1p(selector) - select nearest parent of the self element matching the selector. 
    In principle CSSS! can interact with JS by calling functions assigned to DOM elements. But this is optional.

    List of when-... event handlers I've found useful so far:

      a.. when-hover-on: 
      b.. when-hover-off: 
      c.. when-active-on: 
      d.. when-active-off: 
      e.. when-focus-on: 
      f.. when-focus-off: 
      g.. when-click: 
      h.. when-value-changed: 
      i.. when-assigned: - triggered when this rule is assigned to the element. Used for initialization of states.

    I have an implementation of CSSScript already - it is a simple stack based machine that does not require any GC (garbage collector) 
    and the like. In the case of any interest I can publish detailed specification of CSSS! grammar. 

    Some tasks that can be accomplished with CSSS!: 
    Collapsible tree views, Tabs, binding value of input elements with visibility of other DOM elements, etc.
    Surprisingly many common UI tasks can by handled by such simple thing.

    Hope this is interesting. If someone will want to play with CSSS! then it will be available in the next build of 
    htmlayout @ terrainformatica.com

    --
    Andrew Fedoniouk.
    http:/terrainformatica.com