Re: CSS Referencing

That's interesting! I didn't know about TTML. But in this case, this
looks more like an inline equivalent to css, using style tags and
arguments instead of css and classes.

I have thought about another way, maybe easier to integrate, and also
powerfull :
add something like :
@bank bank_name{
my-width: 1px;
my-bg-color-r:128;
my-bg-color-g:128;
my-bg-color-b:0;
}
.left_box{
background-color:rgba(use(bank_name:my-bg-color-r),
use(bank_name:my-bg-color-g), use(bank_name:my-bg-color-b), 0.5);
border:use(bank_name:my-width) solid rgb(use(bank_name:my-bg-color-r),
use(bank_name:my-bg-color-g), use(bank_name:my-bg-color-b));
}

This allows to create variables which may be used anywhere. It is not as
powerfull as the version i spoke about yesterday, as we have to declare
every variable, but it would still help a lot to maintain css files
without having to "Search and replace".

Le 16/01/2012 20:47, Glenn Adams a écrit :
> you might wish to review what was done in TTML [1] regarding style
> reference chains (albeit not using CSS grammar)
>
> [1] http://www.w3.org/TR/ttaf1-dfxp/#semantics-style-resolution
>
> On Mon, Jan 16, 2012 at 8:36 AM, Brice PARENT <brice@websailors.fr
> <mailto:brice@websailors.fr>> wrote:
>
>     I think this is a two part proposal :
>     1 - allow to reference a property to another one
>     2 - ask for those reference to be able to create bidirectionnal
>     relationships.
>
>     For the first, before being lead to this list, i've created the list
>     http://lists.w3.org/Archives/Public/www-style/2012Jan/0673.html.
>     I copy the examples i proposed here just to be clear :
>
>     /* simple pointer : */
>     ..example1{color: as(.model);}
>     /* The text color is red (as found in .model{color:red;}) */
>
>     /* complete pointers */
>     ..example2{margin: as(.model?border-width); background-color:
>     as(.model?border-color);}
>     /* The margin is 2px on all sides (as found in
>     ..model{border-width:2px;}), and the background color is blue (as
>     found
>     in .model{border-color:blue}) */
>
>     /* inner pointer */
>     ..example3{color:grey; border: 1px dashed as(?color);}
>     /* The border-color is grey (as found in .example3{color:grey;}) */
>
>     I would just drop any properties that would create a loop like
>     .b{width:as(.a);}
>     .a{width:as(.b);}
>
>     About the fact that we could always create a shared css class
>     containing
>     the common values, i agree but it kills some of the benefits of using
>     css : We either have to create lots of classes (smallText, biggerText,
>     hugeText, smallMargins, ...) and have many classes placed on every
>     element, which would lead to setting the style right in the html,
>     or we
>     have to create a very big css file containing every single case for
>     every common properties (div.test1 table.test2 td:first-child,
>     div.test3
>     ul, div.test4 ul:hover...{color:red}), and it wouldn't allow to
>     share a
>     color and a background color.
>
>     This referencing would shorten a lot the css selectors, and would help
>     to have a simple new kind of inheritance.
>
>     It should not be seen as the programming goto, but more like a
>     variable,
>     which may be called from anywhere. Every element has a set of
>     variables
>     that always have some values (default or inherited at the beginning),
>     that we set using the css propoerties, and some of these
>     properties are
>     just like pointers to those variables. The values that are read are
>     never computed values, but always the values that are asked (default,
>     inherited, set, or pointed).
>
>     About the second point, i agree that it may be more complicated, and
>     that's not that much what i asked for.
>
>

Received on Tuesday, 17 January 2012 08:29:34 UTC