Re: [BECS] CSSS! - CSS script

David Hyatt wrote:
> http://www.w3.org/TR/xbl/
>
Disable JS in your UA and the whole thing will go away.
Proposed CSSS! thing is perfectly safe, lightweight and fast.

About XBL in general:

I would like to hear answers on the question:
why do I need XML as an entity for binding DOM elements with JavaScript 
event handlers?
So we have HTML DOM, CSS and JS. Is it mandatory to bring XML in this 
triade for
the task: this set of elements of <selector> has this set of event 
handlers <js-object>?
If 'yes' then why? What are the benefits? I *really* would like to know.

--
Andrew Fedoniouk.
http:/terrainformatica.com



> 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:
>>
>>     * .attrname - name of DOM element attribute, or
>>     * :statename - name of state flag of the DOM element, examples are:
>>       :hover, :active, :checked, etc. And there are two additional
>>       state fields:
>>           o :index - index of the DOM element in its parent
>>             collection and
>>           o :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:
>>
>>     * when-hover-on:
>>     * when-hover-off:
>>     * when-active-on:
>>     * when-active-off:
>>     * when-focus-on:
>>     * when-focus-off:
>>     * when-click:
>>     * when-value-changed:
>>     * 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
>>

Received on Thursday, 8 May 2008 01:11:42 UTC