|
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> |