28172 sujets

CSS et mise en forme, CSS3

[Résolu] Media="print" pour afficher un display:none ?

Bonjour,

est-il possible d'afficher un élément qui a la propriété "display:none" pour l'impression via une feuille CSS de type media="print".

J'ai essayé par exemple de mettre dans mon CSS print :
p {
    display:block;
    }

mais mon paragraphe ne s'affiche pas... Smiley decu
Une idée ou c'est impossible ?
Merci d'avance

@ bientôt Smiley smile
Modifié par Tchupacabra (02 Aug 2008 - 22:18)
Bonjour,

Tchupacabra a écrit :
est-il possible d'afficher un élément qui a la propriété "display:none" pour l'impression via une feuille CSS de type media="print".

Ta phrase ne veut pas dire grand chose (problème de syntaxe et manque de précision). Mais si je t'ai bien compris, oui, tu peux avoir un style display: none pour un élément qui s'appliquerait à tous les médias, et un style display: block pour ce même élément appliqué pour le média print. Du moment que la règle pour le média print est appliquée en deuxième, ça marchera très bien, sous réserve que les sélecteurs CSS soient de priorité égale.

Une solution plus simple serait de ne PAS appliquer de feuille de styles pour tous les médias (sauf peut-être une feuille de styles avec quelques styles génériques seulement), mais de lier les styles pour l'affichage à l'écran au média screen. Non seulement ce serait plus simple, mais ce serait plus logique. Ainsi, ton display: none dans la feuille de styles pour le média screen ne sera pas appliqué à l'impression, et voilà.

Une note peut-être utile: les styles CSS placés dans un attribut style de la balise HTML ouvrante de l'élément, par exemple ainsi: <p style="display: none;">,
1. s'appliquent pour tous les médias, et
2. ont la priorité sur tous les styles placés dans des feuilles de styles internes ou externes.

Enfin, il faut noter que si tu as un DIV en display: none, et que ce DIV contient des paragraphes, tu ne peux pas afficher les paragraphes avec un display: block. Les paragraphes seront théoriquement visibles, mais dans un bloc lui-même masqué, donc ils ne seront pas affichés.

Voilà, j'ai essayé de couvrir différents cas de figure qui peuvent être liés à ton problème. Si la réponse n'est pas dans ce message, il va nous falloir une page en ligne pour examiner ce que tu as fait et peut-être débusquer le problème.
je pense que tu as répondu à ma question mais malheureusement pas résolu mon problème...

Donc, j'ai une page HTML contenant des éléments "effacés" par du javascript. Et c'est là quej e viens de comprendre le problème : le js applique des propriétés de style "en durs" et donc prioritaires aux styles provenant de feuilles de styles externes...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Document sans nom</title>

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

<script type="text/javascript" src="/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('div').hide();	
})
</script>
</head>
<body>

<div>blabla</div>

</body>
</html>


avec print.css :
div { display:block; };


Donc, apparemment, cela n'est pas possible... Smiley confus
Tchupacabra a écrit :
Donc, apparemment, cela n'est pas possible... Smiley confus

Effectivement.

Le plus simple est peut-être d'utiliser une classe hasJS sur l'élément HTML (qui permet de savoir si JS est activé). Cf. http://forum.alsacreations.com/topic-23-35418-1-Menu-deroulant-vertical.html
Tu peux alors masquer ton élément depuis la feuille de styles. Ce n'est pas 100% fiable car JavaScript peut être activé mais la fonction qui permet d'afficher l'élément peut être buguée, auquel cas l'élément sera caché et tu n'auras pas de moyen de l'afficher. Mais ça reste une solution décente.
j'ai réfléchi au faite que les propriétés CSS appliquées en dur via le JS avec hide() étaient "prioritaires" à la feuille de style CSS de type print.
L'astuce était donc de ne pas modifier la valeur de la propriété style de l'élément mais celle de sa classe comme ci dessous :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Document sans nom</title>

<script type="text/javascript" src="/js/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('div').toggleClass("invisible");
   $('div').click(function() {
       $(this).toggleClass("invisible");
   });
})
</script>

<style type="text/css">
@media print {
    div {display:block;}
}
@media screen {
    div.invisible {display:none;}
}
</style>
</head>
<body>

<div>blabla</div>

</body>
</html>


ça semble fonctionner... Smiley lol

@+
Tchupacabra a écrit :
L'astuce était donc de ne pas modifier la valeur de la propriété style de l'élément mais celle de sa classe

Arf, j'y ai même pas pensé alors que c'est quelque chose que je fais régulièrement...
Sujet clos
Aller à