Forum

Réagissez dans les forums de JDN Développeurs

La possibilité de laisser CSS gérer la mise en page du site Web une fois imprimée est aujourd'hui reconnue : en précisant qu'une feuille de style s'applique au média "print", il est possible de cibler clairement le support auquel s'applique les styles CSS - en enlevant les éléments de la page qui seraient inutiles sur ce média, comme le soulignement des liens ou un menu cliquable - et donc de ne plus devoir composer une version dédiée à l'impression.

Mais le contenu textuel d'une page Web contiendra le plus souvent des liens qui ont une importance dans le contexte de la page, et dont le lecteur aura besoin lors de la lecture de la page imprimée. La solution : afficher ces URLs dans la page, mais seulement dans la version imprimée. Cela peut se faire directement via CSS.

Pour cela, il suffit d'utiliser le pseudo-élément :after (dont nous avions déjà parlé, lire notre article du 16/03/2005), afin qu'il se saisisse du contenu de l'attribut href de l'élément visé, et le place entre crochets après l'élément. Dans le même temps, nous modifions l'aspect du tout : retrait du soulignement, mise en gras du texte souligné original, modification de la taille du texte du lien... Au final, la page imprimée est plus lisible (plus de texte souligné bleu) tout en gardant les liens accessibles.

<style>
a:link, a:visited {
  color: #000;
  font-weight: bold;
  text-decoration: none;
  }

a:link:after, a:visited:after {
  color: #777;
  content: " [" attr(href) "] ";
  font-size: 70%;
  }
</style>

Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius