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

**souffle56** · 05/03/2010, 21h09

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**polymorphisme** · 06/03/2010, 12h40

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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.

**Morbo** · 06/03/2010, 14h35

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

.

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

**souffle56** · 06/03/2010, 21h32

Bonjour polymorphisme,
Tu saurais préciser ta remarque... pas tout compris !

**souffle56** · 07/03/2010, 00h32

Sinon, Morbo, quand tu dis :

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...)

**Morbo** · 07/03/2010, 01h06

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.

**souffle56** · 07/03/2010, 17h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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é...

Qu'en penses-tu ?

**Morbo** · 07/03/2010, 21h25

Je viens de faire le test et ça marche chez moi

.
C'est donc une erreur de nom de fichier à mon avis, fais gaffe aux majuscules/minuscules sous linux et aux chemins relatifs.

**souffle56** · 08/03/2010, 00h48

Grand Merci, Morbo, je viens de vérifier, c'est exactement ça :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 !

**Morbo** · 08/03/2010, 11h38

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.

**souffle56** · 08/03/2010, 20h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

-> Là, c'est du tout bon !

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

- Pour être assuré que les accentuations particulières (é,ï, ô...) seront bien prises en compte correctement

- Ou pour d'autres raisons

Merci si tu peux me préciser !

**Morbo** · 08/03/2010, 21h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

. 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.

**souffle56** · 08/03/2010, 22h42

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 !

**darius1000** · 02/05/2011, 20h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**thelvin** · 03/05/2011, 00h03

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.

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

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager