Discussion :

[FixSan]

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

Code :

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

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 :

Code :

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

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 !

[SpaceFrog]

utilise plutot le media print en css ?

en media screen les elements seraient en display none et tu les rends visible sur le media print

[FixSan]

Comment faire cela ? Je comprends mal ce que tu veux dire...

[SpaceFrog]

fais une recherche avec @media screen et @media print

http://plambert.developpez.com/tutoriel/css/style-base/
cf lectures complémentaires en bas de page

[FixSan]

Mmm... Je ne comprends toujours pas le rapport avec mon problème, qui est de cibler IE 6 et 7 pour y ajouter du contenu.

Je veux dire que même dans ma feuille de style pour les médias "screen", le contenu ne s'affiche pas. Autrement dit, ma ligne de jS reste sans effet. C'est ce qui me faisait penser à un problème spécifique à mon code jS, justement.

[SpaceFrog]

rajoute ce style css entre des commentaires conditonnels ...

[FixSan]

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 :

Code :

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

1
2
3
4
5
<h1>
	<a href="url_page_d'accueil">
		<img alt="Titre du site" src="ma_bannière.png" />
	</a>
</h1>

J'aurai :

Code :

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

1
2
3
4
5
6
<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 :

Code :

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

h1 p { display: none; }

Enfin, dans ma feuille de style print.css (media PRINT) je mets :

Code :

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

h1 img { display: none; }

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

[SpaceFrog]

oui dans des balises de commentaires conditionnels dons uniquement pour les version de IE visées ..

[FixSan]

Pourquoi des commentaires conditionnels ? Ne serait-il pas plus judicieux, par souci de légèreté du code notamment, d'appliquer cette solution pour tous ?

[SpaceFrog]

Ben je sais pas, ce n'est pas moi qui pose la question ...

e souhaiterais donc ajouter le contenu via javaScript, pour IE 6 et 7 seulement.

[FixSan]

Bah oui, mais je faisais remarquer que, finalement, la question n'était peut-être plus tout à fait pertinente justement, et que la solution proposée pouvait très bien, au final, convenir pour tous les navigateurs...

Bref...

Merci !