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
Why <Big> Is Not in HTML 5 Tag List While <Small> Is
Calculate Sum Opacity from Layers
HTML/CSS - Div Element Hidden When It Shouldn't Be
Fixed Positioned Div Is Extending Outside of HTML & Body
Flying-Saucer/Itext PDF in Servlet Not Finding CSS File
Using Same Id for Multiple HTML Tags
Equal Height Divs (Two Column)
How to Change a Div Padding Without Affecting The Width/Height
How to Center Text Inputs Using Materialize CSS
How to Use Image as a Table Background in Email
How to Hide Any Text from Sighted User and Search Engine But Not from Screen Reader
How to Make a Div Adopt The Height of The Screen
Border Collapse Differences in Ff and Webkit
4 Columns Elastic CSS with Top-Left Box Spanning 2 Columns. How
Why Don't We Have a // Comment in CSS