Share via

Using the <STYLE> Element with Older Browsers

  • Article

 

Most of this section describes a best practice XSLT-to-HTML transformation. However, older browsers cannot process a client-side XSLT-to-HTML transformation, so this section applies to server-side or static transformations only.

Some browsers, particularly older ones, do not recognize the <STYLE> element at all. As with any unrecognized HTML elements, the default behavior of such browsers is simply to display the content of the unrecognized element—in this case, the CSS code itself.

To prevent this behavior, in a stand-alone HTML document you would embed the CSS code in an HTML comment. This masks the CSS code from browsers that do not understand the <STYLE> element, but still makes it available to browsers that do understand the <STYLE> element.

To create a comment in the result tree of an XSLT transformation, you use an <xsl:comment> element whose content is the text of the comment. For example, a backward-compatible version of the template rule for processing the <BOOK> element from book.xsl would look like bookbackwcmp.xsl, shown below.

Note

You cannot simply place the literal <!-- and > comment delimiters in the result tree to create the desired effect. Doing so creates a comment in the XSLT style sheet itself.

Example

The following is an example.

XML File (bookbackwcmp.xml)

<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="bookbackwcmp.xsl" ?>
<book>
    <book_title>Jambing on the Trixles</book_title>
    <author> Randall, Tristan</author>
</book>

XSLT File (bookbackwcmp.xsl)

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="book">
    <HTML>
<HEAD>
            <TITLE>Book Info</TITLE>
        <STYLE>
            <xsl:comment>
                H1 {font-family: Arial,Univers,sans-serif;
                    font-size: 36pt }
                </xsl:comment>
            </STYLE>
    </HEAD>
    <BODY><xsl:apply-templates/></BODY>
    </HTML>
</xsl:template>

<xsl:template match="book_title">
    <H1><xsl:value-of select="."/></H1>
</xsl:template>

</xsl:stylesheet>

Formatted Output

Formatted output