Connecting Xslt to External CSS

connecting xslt to external css

Use a link element in the head, same as you would if you wrote the HTML by hand:

<link rel="stylesheet" type="text/css" href="table_style.css" />

If you need to insert it into the HTML output (and you're using XSLT 2.0):

<style>
  <xsl:value-of select="unparsed-text('table_style.css')"
                disable-output-escaping="yes"/>
</style>

See http://www.w3.org/TR/xslt20/#unparsed-text

Use XSLT variable in external css stylesheet

If you want to use variables in CSS files you should take a look at CSS preprocessors like Sass.

With this kind of tools you can maintain "dynamic CSS templates" and generate static CSS files out of it.

Then you can simply assign static style-names to elements in your XSL code.

Preprocess XSL Stylesheet - include external documents

Processing xsl:include the way you are doing it isn't correct acccording to the XSLT specification, for a number of reasons: the copied instructions will have in-scope namespaces different from the original, they will have different values for controlling attributes such as version and exclude-result-prefixes, etc.

Handling xsl:import this way is even more challenging, because of the need to respect import precedence. Basically, there are things you can do in a multi-module stylesheet that can't be done in a single-module stylesheet.

As for calls on document(), to find the calls accurately you will need to parse all the XPath expressions. If the argument to document() is a string literal, then in most cases it should be possible to generate a global variable containing the content of the referenced document, and replace the call on document() by a reference to the variable. (But take care with base URIs).

You haven't actually said what you're trying to achieve by transforming your stylesheets in this way. It's a lot of effort, and I can't see what it accomplishes.

How to copy external CSS and JavaScript in XSLT

XSLT 2.0 provides the unparsed-text() function to read documents via URL that are not XML.

In XSLT 1.0, if you don't need to be too script about the CSS, you can use the following to make the CSS file XML-compatible. And, fortunately, the browsers tolerate the HTML comments.

CSS

<!--/*--><root><![CDATA[<!--*/--> 
body
{
    margin: 0;
}
div > p
{
    background-color: yellow;
}
<!--/*-->]]></root><!--*/--> 

XSLT

<style type="text/css">
    <xsl:value-of select="document('test.css')" disable-output-escaping="yes" />
</style>

Using external CSS in XSL-FO

With the valuable suggestion provided by Danial Haley, I did some research and found the solution. It is below for anyone's reference.

File with styles (e.g. Styles.xsl)

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:attribute-set name="CustomStyles">
    <xsl:attribute name="background-color">#BB5588</xsl:attribute>
    <xsl:attribute name="border-bottom">solid 2pt #409C94</xsl:attribute>
    <xsl:attribute name="border-top">solid 2pt #409C94</xsl:attribute>
    <xsl:attribute name="font-size">9pt</xsl:attribute>
</xsl:attribute-set>

My main file where I am importing styles (e.g. Main.xsl)

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="Styles.xsl"/>

<fo:table xsl:use-attribute-sets="CustomStyles" margin-bottom=".1in" text-align="center" table-layout="fixed" width="100%">
    <fo:table-column column-width="proportional-column-width(100)"/>
    <fo:table-body width="100%" table-layout="fixed">
        <fo:table-row>
            <fo:table-cell text-align="center" padding-top=".5mm" padding-bottom=".5mm">
                <fo:block>Some text is placed here.</fo:block>
            </fo:table-cell>
        </fo:table-row>
    </fo:table-body>
</fo:table>

Here you can see in Main.xsl, that I have a imported (could also have used xsl:include) the "stylesheet" Styles.xsl. In the tag fo:table, I added xsl:use-attribute-sets, which in VS2010, provided intellisense for all the xsl:attribute-set defined in Styles.xsl.

Linking XML to XSL to CSS?

Your XSLT stylesheet ("car.xsl") should look something like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="utf-8" indent="yes"/>

<xsl:template match="/">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">VRM Checker</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>
<h2>BMW X6 Available Parts</h2>
<table>
    <thead>
        <tr>
            <th>Products</th>
            <th>Description</th>
            <th>Suitability</th>
            <th>Caution</th>
            <th>Price (In GBP)</th>
        </tr>
    </thead>
    <xsl:for-each select="catalog/cd">
        <tr>
            <td><xsl:value-of select="Products"/></td>
            <td><xsl:value-of select="Description"/></td>
            <td><xsl:value-of select="Suitability"/></td>
            <td><xsl:value-of select="Caution"/></td>
            <td><xsl:value-of select="Price"/></td>
            <td><img src="{image}"></img></td>
        </tr>
    </xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Then put all your "quality CSS styles" inside the "mystyle.css" document referenced in the XSLT stylesheet above.

Of course, you could place the CSS within the XSLT stylesheet itself, too - same as you would with an HTML document.

---

Related Topics