[XML-DEV Mailing List Archive Home] [By Thread] [By Date] [Recent Entries] [Reply To This Message]

CSS as XML

  • From: "Fraser Hore" <fraserhore@h...>
  • To: <xml-dev@l...>
  • Date: Wed, 5 Sep 2007 15:59:59 -0400

CSS as XML

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 http://plasmasturm.org/log/444/.   Next, I simply used the inherent logic and hierarchical structure of CSS.  http://www.w3schools.com/css/css_reference.asp.  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:

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index]


PURCHASE STYLUS STUDIO ONLINE TODAY!

Purchasing Stylus Studio from our online shop is Easy, Secure and Value Priced!

Buy Stylus Studio Now

Download The World's Best XML IDE!

Accelerate XML development with our award-winning XML IDE - Download a free trial today!

Don't miss another message! Subscribe to this list today.
Email
First Name
Last Name
Company
Subscribe in XML format
RSS 2.0
Atom 0.3
 

Stylus Studio has published XML-DEV in RSS and ATOM formats, enabling users to easily subcribe to the list from their preferred news reader application.


Stylus Studio Sponsored Links are added links designed to provide related and additional information to the visitors of this website. they were not included by the author in the initial post. To view the content without the Sponsor Links please click here.

Site Map | Privacy Policy | Terms of Use | Trademarks
Free Stylus Studio XML Training:
W3C Member
Stylus Studio® and DataDirect XQuery ™are products from DataDirect Technologies, is a registered trademark of Progress Software Corporation, in the U.S. and other countries. © 2004-2013 All Rights Reserved.