1630 sujets

Formats, encodage, internationalisation, XML

[résolu] Combiner XML, XSLT et CSS

Bonjour,

J'utilise XSLT pour transformer un fichier XML et HTML.
Je cherche à mettre en forme ce résultat avec CSS, mais à quel endroit appeler la CSS ?

J'ai essayé :
<?xml-stylesheet type="text/css" href="rhcp.css" ?>

dans le fichier XML
@import url(rhcp.css);
dans le fichier XSL dans la partie <head></head>

Mais ces solutions ne fonctionnent pas...

[b]XML[/b]

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="musicout.xsl" ?>
<doc>
	<artiste>Red Hot Chili Peppers</artiste>
	<album>
		<titre>Stadium Arcadium</titre>
		<liste>
			<element>Chanson1</element>
			<element>Chanson2</element>
			<element>Chanson3</element>
			<element>Chanson4</element>
		</liste>
	</album>
</doc>



[b]XSLT[/b]

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <xsl:output method="html" encoding="ISO-8859-1" />
  <xsl:template match="/">
    <html>
      <head>
        <title>Musique</title>
      </head>
      <body>
         <xsl:apply-templates select="doc"/>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="artiste">
    <h1><xsl:apply-templates/></h1>
  </xsl:template>
  <xsl:template match="liste">
    <ul><xsl:apply-templates/></ul>
  </xsl:template>
  <xsl:template match="element">
    <li><xsl:apply-templates/></li>
  </xsl:template>
</xsl:stylesheet>  




[b]CSS[/b]

artiste{color:ff0000;font-size:12px;}
liste element {list-style-type:none;}


Merci !
Modifié par EricLB (29 May 2006 - 15:42)
Bonjour,

Tout est possible, mais cela correspond à des situations bien différentes. Il faut savoir par ailleurs que CSS et XSLT sont vu par le navigateur comme "des feuilles de styles", et qu'une unique feuille de style peut être associée à un arbre XML (soit CSS, soit XSLT).

Il en résulte 3 possibilités :
1/ les CSS s'appliquent directement au XML source et il n'y a pas de XSLT, alors 
<?xml-stylesheet type="text/css" href="rhcp.css" ?>
est parfait.

2/ il y a XSLT et les CSS s'appliquent au XML résultat alors
EricLB a écrit :
dans le fichier XSL dans la partie <head></head>
est valable

3/ il y a XSLT et les CSS s'appliquent au XML source. C'est le cas le plus complexe. Il y a peu de raison de s'aventurer sur ce terrain. En tout cas il faut que le XSLT prenne en charge également la transformation des fragments CSS.

Voici un exemple du cas 2/ (le plus courant) à partir de ton code :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <xsl:output method="html" encoding="ISO-8859-1" />
  <xsl:template match="/">
    <html>
      <head>
        <title>Musique</title>
        <style type="text/css">
          h1{color:ff0000;font-size:12px;}
          ul li {list-style-type:none;}
        </style>
      </head>
      <body>
         <xsl:apply-templates select="doc"/>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="artiste">
    <h1><xsl:apply-templates/></h1>
  </xsl:template>
  <xsl:template match="liste">
    <ul><xsl:apply-templates/></ul>
  </xsl:template>
  <xsl:template match="element">
    <li><xsl:apply-templates/></li>
  </xsl:template>
</xsl:stylesheet>
Xavier a écrit :

2/ il y a XSLT et les CSS s'appliquent au XML résultat alors est valable


Bonjour Xavier merci pour ta réponse, effectivement ce que je recherche est le cas n° 2.

Mais n'est-il pas possible d'appeler une feuille CSS plutôt que mettre les styles directement dans la page ? Ce qui oblige à mettre les mêmes styles pour chaque page, ce qui ne me semble pas être une évolution souhaitable.

Je recherche plutôt à reproduire un code proche du XHTML strict.
Modifié par EricLB (15 May 2006 - 19:46)
C'est possible bien sur. Voici un exemple :
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <xsl:output method="html" encoding="ISO-8859-1" />
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Musique</title>
        <link type="text/css" rel="stylesheet" href="/styles/generale.css" />
        <xsl:comment>[if lt IE 7]>
        <![CDATA[
         <link type="text/css" rel="stylesheet" href="/styles/generale-ie.css" />
        <![endif]]]>
       </xsl:comment>
           ...
      </head>
      <body>
           ...
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>
Merci Xavier pour toutes tes réponses !
J'ai essayé ta solution mais, rien à faire, ça ne prends pas la CSS, peut-être qu'il ya un truc qui déconne dans mon code mais je ne trouve pas... Smiley decu

XML

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="musicout.xsl" ?>
<doc>
	<artiste>Red Hot Chili Peppers</artiste>
	<album>
		<titre>Stadium Arcadium</titre>
		<liste>
			<element>Chanson1</element>
			<element>Chanson2</element>
			<element>Chanson3</element>
			<element>Chanson4</element>
		</liste>
	</album>
</doc>


XSL

<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="ISO-8859-1" />
  <xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Musique</title>
       <link type="text/css" rel="stylesheet" href="rhcp.css" />
        <xsl:comment>[if lt IE 7]>
        <![CDATA[
         <link type="text/css" rel="stylesheet" href="rhcp.css" />
        <! endif ]]>
       </xsl:comment>
    </head>
    <body>
      <xsl:apply-templates select="doc"/>
    </body>
  </html>
  <xsl:template match="artiste">
    <h1>
      <xsl:apply-templates/>
    </h1></xsl:template>
  <xsl:template match="titre">
    <h2>
      <xsl:apply-templates/>
    </h2></xsl:template>
  <xsl:template match="liste">
    <ul>
      <xsl:apply-templates/>
    </ul></xsl:template>
  <xsl:template match="element">
    <li>
      <xsl:apply-templates/>
    </li></xsl:template></xsl:stylesheet>


CSS

*{font-family:arial, verdana, sans-serif;}
artiste{color:#ff0000;font-size:20px;font-weight:bold;}
liste element {list-style-type:none;}


Si quelque chose te saute aux yeux, n'hésite pas !
merci
Modifié par EricLB (18 May 2006 - 15:06)
Désolé ... j'ai pas ta réponse !

Par contre j'ai sensiblement le même problème que toi : ici.

Peux-tu m'aider !

Gôm
EricLB a écrit :
Si quelque chose te saute aux yeux, n'hésite pas !
J'en pleure Smiley biggol

1/ tu as oublié de fermer l'élément <xsl:template match="/">
2/ tu dois remplacer artiste par h1, liste par ul et element par li
Xavier a écrit :
J'en pleure Smiley biggol

1/ tu as oublié de fermer l'élément <xsl:template match="/">
2/ tu dois remplacer artiste par h1, liste par ul et element par li


Merci ! Smiley biggrin Tu m'as été d'une grande aide !

1/ oui, une étourderie...
2/ comment n'y ai-je pas pensé ! Le style n'est pas appliqué sur le fichier xml mais sur sa transformation html...

Une question supplémentaire : xslt permet de transformer du xml en html, mais quand tu regardes la source de ton navigateur, tu as toujours du xml, la transformation se fait du côté client. Pour que la transformation se fasse du côté serveur et que tu ais véritablement un souce html, comment faire ? Il faut passer par un langage comme PHP ?
Modifié par EricLB (20 May 2006 - 13:09)
EricLB a écrit :
Une question supplémentaire : xslt permet de transformer du xml en html, mais quand tu regardes la source de ton navigateur, tu as toujours du xml, la transformation se fait du côté client.
Oui coté client la transformation xslt est assimilée à l'application d'une feuille de style, comme les styles CSS, c'est pourquoi le source du navigateur montre effectivement l'arbre XML avant transformation.
Cependant sous FF tu peux observer l'arbre après transformation dans l'outil inspecteur DOM.
EricLB a écrit :
Pour que la transformation se fasse du côté serveur et que tu ais véritablement un souce html, comment faire ? Il faut passer par un langage comme PHP ?
Sur un serveur les solutions sont multiples, et celle que tu retiendras dépendra du serveur et de la ou des infrastructure(s) installée(s) (.NET, JAVA, PHP...)

PHP est effectivement une solution pratique et courante. A l'intérieur de PHP il y a à nouveau de plusieurs solutions, mais celle qui me parait la meilleure est L'API XSL de PHP5. Cette thématique a été traité plusieurs fois sur ce forum. Voici 2 liens pour débuter :
- les API PHP
- exemple de code
Sujet clos
Aller à