How to copy external CSS and JavaScript in XSLT


Tags: javascript,css,debugging,xslt,include

Problem :

I have an XSL transformation which outputs HTML. In the head element I have a CSS file reference.

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

I would like to create a standalone HTML result without external references and thus I would like to include external CSS references. To prevent code duplication, I do not want to hard code the styles into the XSLT template, so I am looking for some XSLT command to copy the file contents of the CSS file. I know xsl:include or xsl:import won't work, since they expect XSLT files. Neither does

<xsl:copy-of select="document('css/styles.css')"/>

as it expects something XML compliant.

I also have some JavaScript function declarations which I would like to copy as well.

Is this possible with pure XSLT, or will I have to do some pre-processing of the XSLT file (or post-processing of the HTML file)?



Solution :

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>

    CSS Howto..

    How to remove only one media rule property from external css

    how to decrease space between headings?

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    How to change the width of bootstrap popover

    CSS: How to vertically align elements inside div with display: table-cell

    How to formatting a simple
      in columns and bolding the first item on its own line

    how to show css text in html div

    How to get a gravity effect in a CSS animation?

    how to switch to another view using css class on click in angularjs using ngclass

    CSS - How to remove comments and make CSS one line

    HTML: How to style each table cell in a column via CSS?

    Using only CSS, show div on hover over

    How can I vertically align text within a span element, or make the span the same size as the text?

    how to change html content text

    using css

    How to prevent CSS table-cell content expanding to full height of row

    How to make this CSS layout

    How to make text appear when input box is active

    Bootstrap dropdown div not showing in non-collapsed view

    How to switch visibility of an HTML div in css for overlaying

    How do I remove a CSS class from a jqGrid cell?

    How to add a background to a boostrap grid row (including padding!)?

    How to prevent divs from overlapping?

    How to use an image as a frame, and scroll inside? Simulating a phone on a website

    Bootstrap How to make a responsive grid degradating in two steps?

    How can I apply my CSS stylesheet to an RSS feed

    How to apply css to 'text' and 'password' together [closed]

    How to get a reference to id=“xxx.yyy” in CSS?

    How to match element containing another element?

    Show/hide css class by url parameter with php

    How to use an image more than one place in CSS