W3C home > Mailing lists > Public > www-style@w3.org > May 2008

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

From: Andrew Fedoniouk <news@terrainformatica.com>
Date: Thu, 08 May 2008 14:05:28 -0700
Message-ID: <48236B18.4070402@terrainformatica.com>
To: Francois Remy <fremycompany_pub@yahoo.fr>
CC: David Hyatt <hyatt@apple.com>, www-style <www-style@w3.org>

Francois Remy wrote:
> 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.
I agree in general but the same question arises about the calc() 
feature. Why do you need it if you have that expression()?
In principle you can do in JS everything that it offers. In some ugly 
way but still.
>  
> ---------------------------------------------------------
> 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)
That is actually bad as it mixes three separate entities: CSS JS and DOM 
API. Very fragile in many senses.

If to speak about binding of DOM elements with JS based event handlers I 
would rather prefer to have
simple 'behavior' attribute that accepts simple name:
selector
{
    behavior: MyComponent;
}

And if you have something like below (in JS) then runtime can do fast 
and effective binding
of DOM element(s) with this:

var MyComponent =
{
   onAttached: function(evt) { .... },
   onMouseEnter: function(evt) { .... },
   onMouseLeave: function(evt) { .... }
}

That will work and will not pollute CSS with JS stuff. If user will 
allow JS to be run of course.

For some other environments this behavior name can be used for binding 
elements with
e.g. intrinsic/built-in behaviors. E.g.
img
{
    behavior: button;
}
will make img element clickable as a button.
 
>  
> ---------------------------------------------------------
> 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.
Yes. there are just few functions / statements needed for very broad  
class of tasks.
Including animation by the way. This:
selector
{
   when-hover-off: self.fade-away ( 400ms );
}
is better than
selector:hover
{
   animate: what? and when?;
}

>  
> 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.
Here is question that I 've got off list:
[quote]
  What if I have several lists in a block:
  <div class="comparison" id="comparison">
  <ul>
       <li class="specification"></li>
       <li class="description"></li>
  </ul>
   [several lists exist]
 </div>
 And I want each li.specification to gain the same style if any one of 
them is hovered, so it's easy to compare several similarly formatted lists.
[/quote]

So you will do:

li.specification
{
  when-hover-on: $1p( div.comparison ).highlight-specifications = "yes";
  when-hover-off: $1p( div.comparison ).highlight-specifications = null;
}
div#comparison[highlight-specifications] li.specification {  
background:yellow; }

That is not more computationally complex than this:

li.specification
{
  when-hover-on: $1( div#comparison ).highlight-specifications = true;
  when-hover-off: $1( div#comparison ).highlight-specifications = null;
}

First one offers better modularity -  you can declare group of reusable 
styles.

--
Andrew Fedoniouk.
http://terrainformatica.com

>  
>  
> Fremy
Received on Thursday, 8 May 2008 21:06:17 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:55:06 GMT