Version imprimable avec CSS

[EmmaZL]

Bonjour,

Sur mon site, pour chaque page, j'aimerais pouvoir avoir une version imprimable, si possible avec CSS. J'ai bien lu cet article http://pompage.net/pompe/impression/ mais y a un truc que je ne comprend pas.

Dans mon code, j'aurai ceci :

Code : Tout sélectionner

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

Où style.css est la feuille de style pour la page normale et print.css est la feuille de style pour la page imprimable.

Bon, ce que je ne comprends pas, c'est comment faire le lien vers la page imprimable. En haut de chaque article, j'aurai un petit dessin d'imprimante et un lien "Version imprimable" du style :

Code : Tout sélectionner

<a href="blabla.htm" target="_blank" class="texte">Version imprimable</a>

Je dois mettre quoi à la place de blabla.htm ?

Merci d'avance.

Emma.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

[Flore]

En fait tu n'as rien de plus à faire une fois que tu as défini la css pour imprimer. Quand l'utilisateur imprimera la page, cela sélectionnera automatiquement la feuille de style d'impression.

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

[EmmaZL]

Ah ok je vois. Merci pour ta réponse. C'est le media="print" qui gère ça je pense (si j'ai bien compris).

Cependant, n'est il tout de même pas possible d'avoir un lien "Version imprimable" qui renvoie vers la même page mais cette dernière utiliserait une autre CSS ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

[Benoit]

Ben en fait il suffit de demander un aperçu avant impression pour ça

Mais sinon oui ça doit être possible de faire un petit script qui charge la feuille de style "print".

[calimo]

Code : Tout sélectionner

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

Où style.css est la feuille de style pour la page normale et print.css est la feuille de style pour la page imprimable.

En fait, comme tu ne définis pas de média pour style.css, elle sera appliquée à tous les médias, écran, impression, vocal, …
Pour que style.css ne soit appliquée que pour l'écran, il faudrait définir son media.

Simplement, lorsque le media change, donc devient "impression", tu as une feuille de style en plus.


Ce serait peut-être plus simple à comprendre si tu mettais le media pour style.css à "screen", tu comprendrais que la page, quand elle est affichée sur l'écran, utilise le media "screen", et lorsque tu l'affiches sur une feuille de papier, ce n'est plus un écran, mais un "print". Est-ce que c'est plus clair comme ça ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

[EmmaZL]

Code : Tout sélectionner

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

Où style.css est la feuille de style pour la page normale et print.css est la feuille de style pour la page imprimable.

En fait, comme tu ne définis pas de média pour style.css, elle sera appliquée à tous les médias, écran, impression, vocal, …
Pour que style.css ne soit appliquée que pour l'écran, il faudrait définir son media.

Simplement, lorsque le media change, donc devient "impression", tu as une feuille de style en plus.


Ce serait peut-être plus simple à comprendre si tu mettais le media pour style.css à "screen", tu comprendrais que la page, quand elle est affichée sur l'écran, utilise le media "screen", et lorsque tu l'affiches sur une feuille de papier, ce n'est plus un écran, mais un "print". Est-ce que c'est plus clair comme ça ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8

Donc comme ça, juste ?

Code : Tout sélectionner

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

[nico@nc]

Donc comme ça, juste ?

Code : Tout sélectionner

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

Juste, mais plus clair comme ça :

Code : Tout sélectionner

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

Mais ainsi, note que s'il n'y a ni d'écran, ni d'imprimante, aucune feuille de style ne sera utilisée... (c'est possible ça ?)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

[calimo]

Mais ainsi, note que s'il n'y a ni d'écran, ni d'imprimante, aucune feuille de style ne sera utilisée... (c'est possible ça ?)

Ben oui, plutôt : http://www.yoyodesign.org/doc/w3c/css2/ ... edia-types

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.8) Gecko/20061025 Firefox/1.5.0.8