Since Charles put me up to this...

[Mr Initial Man]

In a thread discussing an XSL article, Charles said of XSL:

It's there to describe how to transform XML to any other text based format.

The emphasis is mine. According to this, it should be possible to transform XML into CSS, so I simply HAD to try. So it's all your fault, Charles.

I've got the two files created. The XML file is at http://coachrandom.furtopia.org/Style/CSS/comic_style.xml and the XSL sheet is at http://coachrandom.furtopia.org/Style/style_ml.xsl . The text appears as a stylesheet.

The final hurdle: to get it to WORK as a stylesheet. As you can see by the page at http://coachrandom.furtopia.org/Chronological/comic-001a.xml, that hurdle hasn't been reached yet. (The XSL for this is at http://coachrandom.furtopia.org/Style/chron_pages_try.xsl)

And, yes, I KNOW I could simply write it as a simple CSS document, but what's the fun in that? :D

So, how do I get this hideous abuse of XML, XSL, and complete abandonment of common sense to work?

EDIT: After this: XML into JavaScript.

[rnd me]

two issues with your setup:

1. in the context of a <link>, the xsl will never be touched, only the raw text of the comic_style.xml would be seen, and it's not a stylesheet.

2. link'd stylesheets in firefox need to be served under a text/css mimetype, anything else gets ignored.



what you can do it build your CSS text and insert it into a <style> tag in your document.
i use that in my cms to apply certain colors to every page on the site:






<!-- page-specific CSS -->
<xsl:template mode="pageCSS" name="pageCSS" match="/site">
<style type='text/css'>
a { <xsl:value-of select="color/a[1]/@style" /> }
a:visited { <xsl:value-of select="color/a[@visited='yes']/@style" /> }
a:active { <xsl:value-of select="color/a[@active='yes' ]/@style" /> }

h1 { <xsl:value-of select="color/h1/@style" /> }
h2 { <xsl:value-of select="color/h2/@style" /> }
h3 { <xsl:value-of select="color/h3/@style" /> }
h4 { <xsl:value-of select="color/h4/@style" /> }
body{ <xsl:value-of select="color/body/@style" /> }

body[class="<xsl:value-of select="$section" />"] #navigation .<xsl:value-of select="$section" /> { }
#content a[href^="<xsl:value-of select="$BASE" />"]:before {content:none;}
#content a[href^="<xsl:value-of select="$BASE" />"]:after {content:none;}

</style>
</xsl:template>
<!-- end page-specific CSS -->




javascript should be easier to an extent, you can use any mimetype, and you can use ajax, or in-browser XSLT pre/post process the results.


you could combine both to create an XSL to store CSS as a javascript literal, and add that escaped text to the a blank, dynamically created stylesheet.

that would get you around the mime issue, but you would still need to process the files in javascript first.


there are several XML to JSON xsls floating around, i bet their escape templates could be a helpful base lib for your javascript project...

[Stephen Philbin]

Can't you just put <xsl:output method="text" encoding="utf-8" media-type="text/css"/> in the XSL file to make it work?

I haven't checked it in anyway, but surely it can't be far from that? I'm guessing you can see how you'd tweak it to work for Javascript.

[Mr Initial Man]

I tried your way, Mr. Philben, but it still doesn't work. And since the CSS for various pages would require different XML files, I need a way to include it in the page, I guess.

[Mr Initial Man]

Wait... what if this was done with Server-side XSL? How do I do that?