XML avec XSLT et CSS : la CSS n'est pas prise en compte -> ?

Version imprimable

Bonjour,
Voilà, j'ai un petit programme qui fonctionne très bien (voir codes ci-dessous), sauf que le fichier CSS ne semble pas pris en compte par ma page XSLT (le texte aurait dû s'afficher en rouge !).
Y a t-il quelque chose que je n'aurais pas programmé correctement ?
Si vous avez quelque suggestion, par avance Merci !

Code XML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="Audios/Audios.xsl"?>
 
<enregistrements>
   <audios>
      <enseignements>
         <auteur nom="Gaston">
            <album titre="Le Bonjour de Gaston">
            </album>
         </auteur>
      </enseignements>
   </audios>
</enregistrements>

Code XSLT:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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" encoding="utf-8" 
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
 
<xsl:template match="/">
 
<html xmlns="http://www.w3.org/1999/xhtml">	
<head>
 
<title>Audio</title>
 
<link type="text/css" rel="stylesheet" href="Audios_css_Firefox.css" />
 
</head>
<body bgcolor="#FFFFFF">
 
<div id="Titre" style="position:absolute; width:700px; z-index:1; left: 100px; top:22px">
<xsl:value-of select="enregistrements/audios/enseignements/auteur/album/@titre"/>
</div>
 
</body>
</html>
 
</xsl:template>
</xsl:stylesheet>

Code CSS (Fichier "Audios_css_Firefox.css"):

Code:

1
2
3
4
5
6
7
8
 
#Titre
{
   color: #9E352F; /* Texte en rouge */
   font-weight: bold; /* Texte en gras */
   font-size: 12  ; 
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

PS : A noter que si j'intègre directement le contenu de la CSS dans la partie <head></head> du fichier XLST, comme ci-dessous, ça fonctionne, le texte apparait bien en rouge ! :? Quelqu'un saurait m'expliquer ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<title>Audio</title>
 
<style type="text/css">
#Titre
{
   color: #9E352F; /* Texte en rouge */
   font-weight: bold; /* Texte en gras */
   font-size: 12  ; 
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}
</style>
</head>

06/03/2010, 12h40
polymorphisme

Bonjour,

Code:

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

C'est le seul élément de ton code ne contenant qu'une seule balise.
06/03/2010, 14h35
Morbo

J'avais essayé ce genre de combinaison l'an dernier et les navigateurs ne le supportaient pas et on dirait que c'est toujours le cas :aie:.

Je fais donc xml+xsl coté serveur et xhtml+css coté client.
06/03/2010, 21h32
souffle56

Bonjour polymorphisme,
Tu saurais préciser ta remarque... pas tout compris ! :(
07/03/2010, 00h32
souffle56

Sinon, Morbo, quand tu dis :

Citation:

Je fais donc xml+xsl coté serveur et xhtml+css coté client.

-> Saurais-tu m'en préciser un peu plus, car ça a l'air intéressant, comme approche ! :)
(exemple / au code ou adresse Internet / ce thème, par exemple...)
07/03/2010, 01h06
Morbo

Rien de révolutionaire, tu fais ta transfo xml+xsl=>xhtml coté serveur via une techo type php ou java. Le navigateur lira le résultat de cette tranformation (xhtml) et appliquera le css.

Merci Morbo,
J'espère que j'ai bien compris ta suggestion (?) car, du fait, voilà ce que je viens d'essayer :
* J'ai repris mes 3 fichiers XML, XSLT et CSS (comme précisés en début de ce topic) avec, donc, le fichier CSS appelé en externe par la XSLT, c'est à dire, avec :
Partie <Head> de la XSLT :
Code:

1 2 3 4 5 6 7 <head> <title>Audio</title> <link type="text/css" rel="stylesheet" href="Audios_css_Firefox.css" /> </head>
et je lance l'appel XML + XSLT à partir de ce petit bout de code php :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php $xslDoc = new DOMDocument(); $xslDoc->load("Audios/Audios.xsl"); $xmlDoc = new DOMDocument(); $xmlDoc->load("ENREGISTREMENTS_XML.xml"); $proc = new XSLTProcessor(); $proc->importStylesheet($xslDoc); echo $proc->transformToXML($xmlDoc); ?>
-> J'ai bien le contenu de l'atrtribut "titre" qui s'affiche à l'écran (c'est à dire "Le Bonjour de Gaston") mais...
sans le formatage CSS (-> pas en rouge, mais en noir) :( ->
* Soit j'ai mal compris ta proposition
* Soit il y a un autre élément à prendre en compte qu'on n'a pas encore abordé... :roll:
Qu'en penses-tu ?

07/03/2010, 21h25
Morbo

Je viens de faire le test et ça marche chez moi :aie:.
C'est donc une erreur de nom de fichier à mon avis, fais gaffe aux majuscules/minuscules sous linux et aux chemins relatifs.
08/03/2010, 00h48
souffle56

Grand Merci, Morbo, je viens de vérifier, c'est exactement ça : :ccool:
En fait, le problème est lié à l'adressage du fichier CSS : C'est spécial mais c'est ainsi, y a plus à en douter, l'appel externe d'une CSS depuis une XSL, si il est fait à partir d'une adresse relative (comme dans le cas présent) doit être vu, non à partir de la position du fichier XSL lui-même, mais à partir de la position du fichier XML qui appele la XSL... Du fait, après avoir rectifié l'adressage (ligne suivante) :

Code:

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

j'ai fait un essai en appelant directement la XML (-> sans passer par du PHP) et... Ca marche impeccable... ;)
Allez, si tu veux bien, je te paie une bière (au moins en pensée) depuis la Bretagne, tellement je suis content ! :P
08/03/2010, 11h38
Morbo

Ah ben c'est cool tout ça!
Tu pourrais tester sur différents navigateurs pour voir s'ils gèrent tous xml+xsl+css. Comme ça le serveur se fait chier à la place des clients pour ce qui reste de la mise en forme.
08/03/2010, 20h34
souffle56

Je viens d'essayer sur Firefox et sur IE7 -> Ca passe très bien, toujours en appel direct de la XML !
sauf que, si je remplace "Le Bonjour de Gaston" par "Le Bonjour de Gâstön" -> Il ne m'affiche les caractères accentués correctement que sous Firefox -> Du coup, j'ai repris ta proposition de lancer XML et XSL depuis le code PHP (précisé précédemment), en retirant évidemment le code suivant de la XML :

Code:

<?xml-stylesheet type="text/xsl" href="Audios/Audios.xsl"?>

-> Là, c'est du tout bon ! :ccool: Merci à toi ! :)

PS : Excuse ma question un peu naïve, peut-être (je débute dans le domaine), mais :
* Ai-je bien compris si je dis que, en appelant ainsi XML et XSL depuis le code PHP, c'est en conséquence le navigateur client qui va gèrer l'agencement de tout cela avec la CSS (et non plus mon serveur) ?
* Quel intérêt y a t-il à ce que ça soit le navigateur client qui fasse cela ?
- Pour moins utiliser mes ressources, coté serveur :question:
- Pour être assuré que les accentuations particulières (é,ï, ô...) seront bien prises en compte correctement :question:
- Ou pour d'autres raisons :question:

Merci si tu peux me préciser !

Pour ton pb d'accent, en xsl-t il existe un élément pour préciser l'encodage utilisé pour générer le xml en sortie. Sinon les navigateurs font un peu ce qu'ils veulent.
Donc tu pourrais essayé en ajoutant cette balise comme suit :
Code:

1 2 3 4 5 6 <?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="xml" version="1.0" encoding="iso-8859-1" indent="yes"/>
Bon ça c'est la théorie, en pratique, je me souviens que tous les navigateurs "n'écoutaient pas" cette déclaration :aie:. Mais ça coute rien de tester avec ISO-8859-1 et UTF-8.

Pour ta seconde question, php s'éxécute coté serveur (xml+xsl => xhtml coté serveur, le client fait juste xhtml+css).
Donc si N client se connectent, il va faire autant de fois cette transformation xml+xsl => xhtml. Alors que si on fait tout coté client, ces opérations sont déportés/factorisées sur chacune des machines clientes.
Bon c'est en très gros, ce qui se passe, en vrai il y a des systèmes de cache qui font que le serveur ne refait pas bêtement chaque opération. Mais rien que ces systèmes de cache c'est en trop dans l'absolu.
Pour moi, toutes ces opérations, ça reste de la mise en forme de données et je les verrais bien exécutés sur la machine qui cherche à les afficher.

08/03/2010, 22h42
souffle56

Ok, Merci Morbo pour les explications... Du fait, je comprends mieux ce qui se passe, à présent.
Sinon, à propos de l'accentuation, je ferai d'autres essais à l'occasion et, si besoin, j'essaierai le bout de code proposé pour xsl !
A une prochaine et... Bonne continuation à toi ! :)

Où placer le code php ?

Bonjour,

Je me permet de reprendre cette conversation car je ne sais pas où placer le code php présenté à l'époque par souffle 56 comme suit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php $xslDoc = new DOMDocument(); $xslDoc->load("Audios/Audios.xsl"); $xmlDoc = new DOMDocument(); $xmlDoc->load("ENREGISTREMENTS_XML.xml"); $proc = new XSLTProcessor(); $proc->importStylesheet($xslDoc); echo $proc->transformToXML($xmlDoc); ?>
Désolé, si la question peut vous paraître idiote, je débute mais ce bout de code doit-il être intégré au fichier xml ou xslt et à quel endroit de ces pages ?

Merci de votre réponse !

03/05/2011, 00h03
thelvin

Citation:

Envoyé par darius1000

Désolé, si la question peut vous paraître idiote, je débute mais ce bout de code doit-il être intégré au fichier xml ou xslt et à quel endroit de ces pages ?

Ni l'un ni l'autre, ça c'est le code de l'URL qui prend le fichier XML d'une part, le fichier XSLT d'autre part, qui fait la transformation, et qui envoie le résultat au navigateur.