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