CSS-Tranformation mechanism and modularizing CSS

Hello,

Seeing this discussion about BECSS and if it should be allowed
inside a style sheet, I want to propose an idea I've had for
a while now:

Seperately defining the transformation part of CSS (CSST),
in such a way that it can be used for all kinds of purposes.

What is the transformation part of CSS?
I think it is: "dynamically adding attributes and content
to a (already structured) document".
These attributes and content do not have to conform to
a DTD or Schema of the document. They are added for
presentational purposes only.

To allow arbitrary attributes to be added, namespaces
have to be added to the *attributes*.
An example:

@namespace html url(http://www.w3.org/TR/xhtml11)
@namespace css url(http://www.w3.org/TR/CSS3)

html|h1 {
    css|font:200% arial,helvetica;
    html|onclick:func(event);
}

This way
<h1 xmlns="http://www.w3.org/TR/xhtml11">Header 1</h1>
is turned into
<h1 xmlns="http://www.w3.org/TR/xhtml11" onclick="func(event)"
css:font="200% arial,helvetica">Header 1</h1>

With this functionality CSS3 can be described as a set
of attributes, and could also be modularized.
Aural style-sheets f.e. could be defined separately,
and it would be given a separate namespace.

What do you think?

Sjoerd Visscher
www.locosoft.nl


PS. Personally I would like an XML version even more:

<csst xmlns="http://www.w3.org/TR/CSST"
    xmlns:html="http://www.w3.org/TR/xhtml11"
    xmlns:css="http://www.w3.org/TR/CSS3">

<rule media="screen" importance="1">
    <comment>
        This rule set the font for the html:H1 tag
        and adds an onclick event-handler to it.
    </comment>
    <sel>html|h1</sel>
    <target html:onclick="func(event)" css:font="200% arial,helvetica" />
</rule>

<rule>
    <comment>
        This adds style to H2 and H3, when H3 is inside an H2,
        or when an H3 follows an H2.
        !2 behind an element-name means 'add the attributes of
        target number two to these elements'.
    </comment>
    <sel>html|h2!1 html|h3!2</sel>
    <sel>html|h2!1 + html|h3!2</sel>
    <target nr="1" css:fontSize="150%" css:fontWeight="bold"
css:fontStyle="normal" />
    <target nr="2" css:fontSize="120%" css:fontWeight="normal"
css:fontStyle="italic" />
</rule>

</csst>

(Of course this is a bit too much to go for in one post,
but I hope it spawnes some ideas.)

Received on Monday, 27 September 1999 18:02:16 UTC