11548 sujets

JavaScript, DOM et API Web HTML5

Ajouter du contenu pour l'impression avec IE 6 et 7

Bonjour,

Je poste à dessein dans le forum javaScript, car il me semble que mon problème vient plus de mon code jS que des CSS.

J'utilise, sur le site dont je m'occupe, une feuille de style particulière destinée à l'impression. Comme mon site contient, en guise de <h1>, une bannière en image cliquable (il s'agit d'un lien pointant vers la page d'accueil), je souhaite remplacer, à l'impression, cette bannière en image par le contenu du "alt" du lien.

J'utilise donc le code CSS suivant dans ma feuille de style destinée à l'impression (print.css) :
h1 a[href]:after { content: attr(title); }

Ce code fonctionne très bien, sous Firefox par exemple. Le problème est qu'IE 6 et 7 ne reconnaissent pas la pseudo-class :after. Je souhaiterais donc ajouter le contenu via javaScript, pour IE 6 et 7 seulement.
D'après ce que j'ai pu lire à différents endroits (notamment ici et là), j'ai donc ajouté le code jS suivant :
h1 a { *zoom: expression(this.runtimeStyle.zoom="1",this.innerHTML = "bla bla bla"); }

Malheureusement, ça ne fonctionne pas : IE 6 et 7 n'affichent tout simplement rien. Rien ne se passe...
Quelqu'un aurait-il une idée de ce qui cloche ? Merci pour votre aide !
Modifié par Fix (31 May 2012 - 06:49)
Au lieu d’utiliser des hacks avec zoom ne serait-il pas plus simple de faire :
<h1 id="bandeau"><img src="a.png" alt="bla bla bla"/><p>bla bla bla</p>


#bandeau p {display:none}
@media print {#bandeau img {display:none};#bandeau p {display:block}}
Je ne comprends pas l'intérêt de @media dans ce contexte, puisque j'ai une feuille de style dédiée à l'impression...

Si je comprends bien l'idée (qui me semble excellente !), au lieu d'avoir :
<h1>
	<a href="url_page_d'accueil">
		<img alt="Titre du site" src="ma_bannière.png" />
	</a>
</h1>

J'aurai :
<h1>
	<a href="url_page_d'accueil">
		<img alt="Titre du site" src="ma_bannière.png" />
	</a>
	<p>Titre du site</p>
</h1>

Puis, dans ma feuille de style screen.css (media SCREEN) je mets :
h1 p { display: none; }

Enfin, dans ma feuille de style print.css (media PRINT) je mets :
h1 img { display: none; }

C'est bien ça l'idée ?
Bonjour,

L'idée n'est pas si bonne que cela puisque les utilisateurs pour qui les feuilles de style ne sont pas prises en compte, comme par exemple ceux appartenant à une catégorie marginale que l'on appelle les moteurs de recherche, verront le contenu en double.

Une solution alternative : utiliser les commentaires conditionnels pour générer ce contenu uniquement pour IE6 et IE7. Voir http://en.wikipedia.org/wiki/Conditional_comment
Donc je mets la même chose, mais incluse dans un commentaire conditionnel.

C'est parfait ! Un grand merci à vous, et bonne fin de journée à tous !
Fix a écrit :
Donc je mets la même chose, mais incluse dans un commentaire conditionnel.

Je pense que c'est la solution la moins mauvaise, car elle pénalise une catégorie d'utilisateurs qui est on peut l'espérer vide : les utilisateurs d'IE6 et d'IE7 sans support des feuilles de style. Fais cependant bien attention à cibler précisément ces deux versions dans ton commentaire conditionnel.
Oui, j'ai mis ceci :
<!--[if lte IE 7]><span>Mon titre</span><![endif]-->

Modifié par Fix (30 May 2012 - 18:26)
Il y a quand même un cas pour lequel ça ne fonctionne pas.

Sur la page d'accueil se trouve un carrousel (sous le titre "C'est vous qui le dites !) contenant une liste de couvertures de livres. Comme il s'agit de contenu généré dynamiquement via javaScript, j'utilise la balise <noscript> pour le cas où javaScript serait désactivé.

Le code est le suivant :
<noscript>
	<ul>
		<li>
			<a href="document_1">
				<img src="couverture_du_document_1.png" />
				<!--[if lte IE 7]><span>Titre du document 1</span><![endif]-->
			</a>
		</li>
		<li>
			etc... (idem pour le document 2 et le document 3)
		</li>
	</ul>
</noscript>


Je ne souhaitais pas imprimer l'image elle-même, mais juste son titre. Pourtant, lors de l'aperçu avant impression sous IE6 ou IE7, lorsque javaScript est désactivé (donc lorsque le contenu de la balise <noscript> devrait être pris en compte), le contenu du <span> n'est pas affiché !

Je ne m'explique pas la raison...
Modifié par Fix (30 May 2012 - 22:11)
Chez moi avec ie7 sans style et en désactivant le javascript, le span est bien affiché.

Après pour les utilisateurs qui n’utilisent pas les feuilles de style, vous avez raison. Les moteurs de recherche pourraient peut-être le considérer comme du référencement abusif.
Modifié par adrien881 (31 May 2012 - 10:35)
Julien Royer a écrit :
Peux-tu mettre en place un exemple le plus simple possible reproduisant le problème ?

Ça va être forcément compliqué : il s'agit d'un plugin jQuery (jCarousel), que j'ai eu pas mal de peine à mettre en place Smiley smile

Ceci dit, c'est visible simplement sur la page d'accueil de mon site, en désactivant javaScript, et en faisant un "Aperçu avant impression" sous Internet Explorer versions 6 ou 7. Le résultat est que, sous le titre "C'est vous qui le dites", la liste des titres n'apparaît pas dans l'Aperçu avant impression.

adrien881 a écrit :
Chez moi avec ie7 sans style et en désactivant le javascript, le span est bien affiché.

Bonne nouvelle, ça veut dire qu'il y a de l'espoir : ça viendrait donc de ma feuille de style. Je n'ai pas réussi à tester ça chez moi, car j'utilise IETester, et je ne vois pas comment faire pour y désactiver les CSS.

Ça viendrait donc de ma feuille de style qui, lorsque javaScript est désactivée, n'affiche pas (d'une manière ou d'une autre) ladite liste... mais je ne vois toujours pas pourquoi...

Merci beaucoup pour votre aide !
Bon, j'ai poussé un peu plus loin mes tests : en fait, en ajoutant <noscript>blabla</noscript> n'importe où dans mon code HTML, IE6 n'imprime JAMAIS le texte à l'intérieur de la balise.

Mais j'en suis à me demander si ça n'est pas tout simplement un bug d'IETester...

Est-ce que quelqu'un disposant d'IE6 aurait la gentillesse de bien vouloir tester chez lui ?
La démarche est la suivante :
1. Désactiver javaScript dans IE6.
2. Se rendre sur cette page.
3. On peut remarquer le texte "blabla" sous le lien "Accueil". Lancer alors un "Aperçu avant impression".
Ce texte "blablabla" apparaît-il bien ? Il devrait se trouver, dans l'aperçu, juste en dessous du sous-titre "Blog de la médiathèque etc."

Merci à celui ou celle qui pourra m'aider, et bonne soirée à tous !
Modifié par Fix (05 Jun 2012 - 21:15)
Personne n'aurait un IE6 pour tester ? Siouplait ?
Merci d'avance, et bonne journée à tous !
Sujet clos
Aller à