 |
|
|
| |
| PRATIQUE CLIENTS WEB |
|
|
|
| CSS : choisir une unité de taille de police relative |
| |
| Pourcentage, em, ex, px : quelle unité choisir pour ses feuilles de style ? Pour comprendre.
(05/04/2006) |
  |
 |
Forum |
|
|
Réagissez
dans les forums de JDN Développeurs
|
La gestion des tailles de police est un sujet délicat lorqu'on a recourt aux feuilles
de style. Les unités disponibles sont nombreuses (lire notre
article du 25/01/05), pas toujours correctement implémentées, et aucune
ne répond à tous les besoins.
Au fil du temps, certaines unités ont toutefois "pris le dessus", pour
de bonnes raisons. Parmi celles-ci, l'unité qui a prouvé la plus grande constance
est sans doute em, l'une des unités relatives
avec %, px et
ex. Les unités relatives se montrent particulièrement
utiles dès lors que le développeur souhaite laisser l'internaute baisser ou augmenter
la taille de la police. px n'entre pas vraiment
dans ce cadre, car il s'agit d'une unité particulière, relative à l'écran, mais
ne permettant pas de changer la taille.
ex,
de son côté, serait la méthode idéale pour gérer les tailles avec agrandissements
possibles, mais cette unité est encore partiellement implémentée dans les navigateurs
courants, donc le développeur doit se rabattre sur em,
et ses petits problèmes d'arrondis de taille.
em permet de baser ses tailles sur les réglages
du navigateur : 1em signifie que la police a la
même taille que celle réglée par défaut dans le navigateur. 1.5em
l'augmente de moitié, 0.5em la divise par deux.
Les pourcentages sont assez proches : 100% pour
conserver la taille par défaut, 200% pour la doubler,
50% pour la diviser.
p {
font-size: 1.0em;
line-height: 1.3;
}
.small {
font-size: 88%;
}
La différence entre les deux revient donc en partie à l'intuitivité : par la force
des choses, et l'omniprésence des points dans les logiciels de texte comme Word,
l'usage courant n'est pas d'utiliser des pourcentages. Par ailleurs, les polices
en pourcentage subissent directement la hiérarchie en cascade ; il faut donc éviter
de préciser une taille de police en pourcentage directement sur un élément généraliste.
p { /* a eviter */
font-size: 88%;
}
p#titire { /* plus sur */
font-size: 88%;
}
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
|
|
|
|
|
|
|
