RE: [xml-dev] CSS as XML

["Fraser Hore" <fraserhore@hotmail.com>]

Hi Manfred,

I'm not sure I completely understand question right.  I would express your
example as follows:

<style nodeset="//div[@id='namindex']//div">
	<padding>
		<left unit="px">8</left>
	</padding>
	<text>
		<color unit="name">black</color>
	</text>
	<background>
		<color unit="hex">ccddff</color>
	</background>
</style>

<style nodeset="//div[@id='namindex']//div//div">
	<padding>
		<left unit="px">0</left>
	</padding>
</style>

The second xpath expression looks a little funny but in a quick test in a
sandbox it seemed to be fine.  The xslt would then convert the xpath back to
css selectors as in your example (replace the // with space and the [@id='
with . and remove the ']). 

The browser's css processor would then just process the css as normal.  Of
course I don't know how to get it to do that, but that's the idea.  With
regard to the specificity, you can see from the xpath expressions that the
second style defines more specifically the divs that are descendents of divs
that are descendents of divs with id 'namindex'.  So, according to the
specificity rules it should override the first style element.

Regarding your question b, I suppose if the styles are dynamically generated
then you're right, they can't be cached.  Perhaps the xml and xslt files can
be cached and the processing would be done at run time.

Cheers,

Fraser

-----Original Message-----
From: Manfred Staudinger [mailto:manfred.staudinger@gmail.com] 
Sent: September 6, 2007 5:50 AM
To: Fraser Hore
Cc: xml-dev@lists.xml.org
Subject: Re: [xml-dev] CSS as XML

Hi Fraser,

Very interesting, indeed. Here are my questions:
a) Consider the following rules:
div.namindex div {
       padding-left: 8px;
       color: black; background: #ccddff;
}
div.namindex div div {
       padding-left: 0px;
}
This is only a simple example for the usage of the "specificity rule".
To calculate it seems not too difficult, but how would you map it to
your XML representation of the CSS?
b) If you use the <style> element, the browser cannot cache the
stylesheet anymore, to be reused for other documents from the
same site. Any solution for that?

Manfred

On 05/09/07, Fraser Hore <fraserhore@hotmail.com> wrote:
>
>
>
>
> People have suggested that CSS could be more useful in XML form.  One big
> advantage would be styling CSS using xforms.
>
>
>
> I decided to try representing CSS styles as XML and then use XSLT to
> transform it back into CSS format.  This approach works well if the page
to
> be presented is included in the XSLT.  It would be ideal if we could add a
> <link> element to an (X)HTML document which refers to an XML document
> containing the style information, which in turn calls an XSLT file to
> transform it into the CSS format that the browser can handle.
>
>
>
> I would appreciate any thoughts on whether this approach is possible, and
if
> so how. Details on my work in progress is below.
>
>
>
> Thanks!
>
>
>
> Fraser
>
>
>
> CSS as XML
>
> Firstly, xpath is used to select nodes instead of css selectors.  A good
> xpath to CSS mapping is here.   Next, I simply used the inherent logic and
> hierarchical structure of CSS.  See the W3C CSS Reference page.  The XML
> document is as follows:
>
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <?xml-stylesheet type="text/xsl" href="CSSTransform.xsl"?>
>
>
>
> <styles>
>
>     <style nodeset="//div" pseudo-class="hover">
>
> /* xpath expression to define the element or elements to be styled (using
> the "|" separator, xpath allows the identification of multiple nodesets or
> elements)*/
>
>         <text>
>
>             <color unit="hex">#000000</color>
>
>             <direction/>
>
>             <line-height/>
>
>             <letter-spacing/>
>
>             <align/>
>
>             <decoration/>
>
>             <indent/>
>
>             <shadow/>
>
>             <transform/>
>
>             <unicode-bidi/>
>
>             <white-space/>
>
>             <word-spacing/>
>
>         </text>
>
>
>
>         <font>
>
>             <family/>
>
>             <size unit="px">40</size>
>
>             <size-adjust/>
>
>             <stretch/>
>
>             <letter-style/> /* font-style in CSS2 i.e. normal, italic,
> oblique */
>
>             <variant/>
>
>             <weight/>
>
>         </font>
>
>
>
>     </style>
>
> </styles>
>
>
>
> XSLT to Transform the XML to CSS
>
> The following illustrates the use of the transform to put the appropriate
> CSS in the <style> tag of an (X)HTML document.  The HTML elements and
> content would be removed if you wanted to create a generic transform that
> could be called by any XML document containing CSS information.  Not that
I
> haven't yet figured out the conversion of xpath expressions to CSS
selectors
> but it should be doable.
>
>
>
> <?xml version="1.0" encoding="UTF-8"?>
>
> <xsl:stylesheet
> xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
> version="2.0">
>
>     <xsl:template match="/">
>
>         <html>
>
>             <head>
>
>                 <style type="text/css">
>
>
>
>                         <xsl:for-each select="/styles/style">
>
>                             <xsl:value-of select="@nodeset"/> {
>
>
>
>                             <xsl:for-each select="./text/color |
> /text/direction | ./text/line-height | ./text/letter-spacing |
> /text/white-space | ./text/word-spacing">
>
>                                 <xsl:value-of select="name(.)"/>:
> <xsl:value-of select="."/>;
>
>                             </xsl:for-each>
>
>                             <xsl:for-each select="./text/align |
> /text/decoration | ./text/indent | ./text/shadow | /text/transform">
>
>                                 <xsl:value-of
> select="name(..)"/>-<xsl:value-of select="name(.)"/>: <xsl:value-of
> select="."/>;
>
>                             </xsl:for-each>
>
>
>
>                             <xsl:for-each select="./font/*">
>
>                                 <xsl:value-of
> select="name(..)"/>-<xsl:value-of select="name(.)"/>: <xsl:value-of
> select="."/>;
>
>                             </xsl:for-each>
>
>                             }
>
>                         </xsl:for-each>
>
>
>
>                 </style>
>
>             </head>
>
>             <body>
>
>                 <h2>CSS Transformation Test</h2>
>
>                 <div>This is a div.</div>
>
>             </body>
>
>         </html>
>
>     </xsl:template>
>
>
>
> </xsl:stylesheet>
>
>
>
> Linking to the XML Document from an (X)HTML Document
>
>
>
> <!DOCTYPE html SYSTEM
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
>
> <html xmlns="http://www.w3.org/1999/xhtml";>
>
>     <head>
>
>         <title>XML CSS Test</title>
>
>         <link rel="stylesheet" type="text/css" href="XMLCSS.xml" />
>
>     </head>
>
>
>
>     <body>
>
>         <div>This is a div</div>
>
>     </body>
>
> </html>
>
>

_______________________________________________________________________

XML-DEV is a publicly archived, unmoderated list hosted by OASIS
to support XML implementation and development. To minimize
spam in the archives, you must subscribe before posting.

[Un]Subscribe/change address: http://www.oasis-open.org/mlmanage/
Or unsubscribe: xml-dev-unsubscribe@lists.xml.org
subscribe: xml-dev-subscribe@lists.xml.org
List archive: http://lists.xml.org/archives/xml-dev/
List Guidelines: http://www.oasis-open.org/maillists/guidelines.php