second css file not loading after refresh [closed]

StackOverflow https://stackoverflow.com/questions/21330997

  •  02-10-2022
  •  | 
  •  

Question

Let me explain my problem with simple example...

example.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="example.xsl"?>
<ex>True</ex>

and my example.xsl

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

  <xsl:template match="/">
    <html>
      <head>
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="a.css"/>
        <link rel="stylesheet" type="text/css" href="b.css"/>
      </head>
      <body>
        <h1>will get red color from a.css</h1>
        <h2>will get blue color from b.css</h2>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

when I open xml file on browser both headlines h1 and h2 comes properly iwth red and blue, but after every refresh <h2></h2> text comes sometimes in blue and sometimes in black..... could anyone please let me know the problem?

Was it helpful?

Solution

Nothing is wrong with your XSLT code. And nothing is wrong with your input XML or the CSS files. The only reason I can think of for the behaviour you describe is that b.css ceases to be available.

This is the output I get with Firefox, the blue font color stays even if I refresh.

EDIT: It might help to have internal CSS styles instead of referencing them from external files.

The stylesheet below does essentially the same as yours, except that the CSS is internal. This might lower the chances of CSS files not being available.

Stylesheet

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="2.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns="http://www.w3.org/1999/xhtml">

   <xsl:output method="html" indent="yes" doctype-system="about:legacy:compat"/>

   <xsl:template match="/">
      <html>
         <head>
            <title>Title</title>
            <style type="text/css">
               h1 {color:red;}
               h2 {color:blue;}
            </style> 
         </head>
         <body>
            <h1>will get red color from a.css</h1>
            <h2>will get blue color from b.css</h2>
         </body>
      </html>
   </xsl:template>

</xsl:stylesheet>

Output

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top