Re: [xml-dev] CSS as XML

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index]
From: "Manfred Staudinger" <manfred.staudinger@gmail.com>
To: "Fraser Hore" <fraserhore@hotmail.com>
Date: Thu, 6 Sep 2007 11:49:56 +0200
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>
>
>
Follow-Ups:
- RE: [xml-dev] CSS as XML
  - From: "Fraser Hore" <fraserhore@hotmail.com>
References:
- CSS as XML
  - From: "Fraser Hore" <fraserhore@hotmail.com>
[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index]