28172 sujets

CSS et mise en forme, CSS3

Une autres question de débutant !

Pour définir la taille relative des caractères, mieux vaut travailler en em ou en % ?

Après avoir lu l'article sur la taille em de Florent V., je me pose la question sur le %.
Est-ce équivalent ? 1 em ou 100% c'est bien égale à la taille de caractère déclaré par défaut dans le navigateur de l'internaute. Donc si c'est le cas, 1 em = 100% ?
Bonsoir,

krakkos a écrit :
Pour définir la taille relative des caractères, mieux vaut travailler en em ou en % ?

L'un ou l'autre, c'est pareil.

krakkos a écrit :
1 em ou 100% c'est bien égale à la taille de caractère déclaré par défaut dans le navigateur de l'internaute.

1em, c'est la taille du texte pour l'élément concerné. Si tu appliques un margin-top: 2em à un titre qui fait 16px de haut, la marge supérieure sera de 32px. Si tu appliques un margin-top de 2em à un élément en font-size: 1.2em alors que la taille du texte dans le parent de cet élément est de 12px, tu obtiens:
- un élément avec une taille de texte (calculée par le navigateur) de 14.4px;
- et une marge supérieure d'un peu moins de 29px (28.8px).

Ça peut avoir l'air compliqué dit comme ça, mais ça n'est pas bien méchant à l'usage. Smiley cligne

krakkos a écrit :
Donc si c'est le cas, 1 em = 100% ?

Pour la propriété font-size, oui. Pour la plupart des autres propriétés qui acceptent des valeurs en EM et en pourcentages, par contre, non. Un width: 1em n'a par exemple rien à voir avec un width: 100%.
Heu, à relire cette discussion, j'ai un doute sur mon interprétation Smiley confus :
Florent V. a écrit :
1em, c'est la taille du texte pour l'élément concerné

C'est à dire que cela reprend la valeur de la taille par défaut de chaque élément ?
Si j'indique html {font-size:1em} ou html {font-size:100%}, chaque élément HTML de ma page conserve sa taille par défaut (selon chaque navigateur).
Pour un <p> cela sera 16px, pour un <h2> cela sera 24px.
Modifié par krakkos (02 Feb 2009 - 22:04)
krakkos a écrit :
Par rapport à son élément parent ?

Non, pour une dimension de marge ou height, width, padding, etc., ça correspond à la taille du texte de l'élément lui-même (celui qui est ainsi dimensionné ou affublé d'une marge ou d'un padding), que cette taille de texte soit précisée avec une unité fixe (font-size: 12px par exemple), héritée du parent, ou encore héritée du parent et modifiée par une taille relative (font-size: .8em ou font-size:80%).

krakkos a écrit :
Si je défini html {font-size:1em} ou html {font-size:100%} cela s'applique aux éléments de texte (<body>, <p>, <ul>, <table>...)

Oui.

krakkos a écrit :
mais pas aux éléments de titre : <h1> à <h6> (ni à <pre>) qui ont leur propre valeur de taille par défaut ?

Si, ça s'applique à eux également. Leur taille par défaut est en général exprimée dans une unité relative (em ou pourcentages ou autre mécanisme selon la cuisine interne du navigateur). Si tu définis la taille du texte de HTML à font-size: 50px, tous les éléments seront impactés, y compris les titres même si ces derniers seront proportionellement plus gros que le reste du texte.

À vérifier peut-être pour l'élément PRE, certaines navigateurs proposent de fixer une taille de texte par défaut pour le texte à chasse fixe, elle s'applique peut-être dans ce cas en l'absence d'un font-size sur l'élément PRE. Comme si le navigateur avait les styles par défaut suivants:
RACINE {
	font-size: [i]taille du texte à chasse variable par défaut[/i]; /* 16px sauf si réglage différent de l'utilisateur */
}
HTML, BODY, DIV, etc. {
	font-size: inherit; /* valeur par défaut */
}
PRE, CODE, KBD {
	font-size: [i]taille du texte à chasse fixe par défaut[/i]; /* 14px je crois */
}
(Ce n'est qu'une représentation schématique, bien sûr. La «racine» est en amont de l'élément HTML -- qui est la racine du document à proprement parler.)
krakkos a écrit :
Si j'indique html {font-size:1em} ou html {font-size:100%}, chaque élément HTML de ma page conserve sa taille par défaut (selon chaque navigateur).

Oui.

krakkos a écrit :
Pour un <p> cela sera 16px

Dans la quasi-totalité des cas, oui. Sauf réglage spécifique de l'utilisateur. Et sauf peut-être pour certains navigateurs précis (par exemple un navigateur pour téléphones mobiles peut choisir une taille de texte par défaut de 14px si c'est un choix pertinent...).

krakkos a écrit :
pour un <h2> cela sera 24px.

Ça va dépendre du navigateur, il y a justement une légère différence pour certains niveaux de titres, d'où l'intérêt de préciser les tailles de texte pour les titres (en em ou pourcentages).
Modifié par Florent V. (02 Feb 2009 - 22:11)
Tu m'éclaires et je m'embrouille !
Je définis ces règles :
html {
	font-size: 1em;
}
.taille1em {
	font-size: 1em;
}

Dans ma page j'utilise un <h1>, <h2>, <p> et <ul> : ils utilisent bien leur taille par défaut. Normal après ce que l'on vient de voir.
Puis, je copie/colle ces éléments et leur applique le style .taille1em : ils ont tous la même taille ! Je ne comprends pas pourquoi ?
Modifié par krakkos (02 Feb 2009 - 23:00)
Bon. Mettons que pour le navigateur utilisé pour les tests, les éléments H1 aient une taille de texte de 180%. Pour le premier H1 (sans classe), les styles appliqués par ordre de priorité sont les suivants:
/* Styles propre à l'élément: */
h1 {font-size: 180%;} /* Style par défaut du navigateur */

/* Styles hérités (cascade CSS) */
html {font-size: 1em;} /* Style que tu spécifie */

Le cumul de tout ça va donner 180% * 1em * 16px (taille par défaut du texte) = 1.8 * 1 * 16 = 28.8px.

Pour ton H1 qui porte la classe "taille1em", les styles appliqués par ordre de priorité sont:
/* Styles propre à l'élément: */
.taille1em {font-size: 1em;} /* Style que tu spécifies */
h1 {font-size: 180%;} /* Style par défaut du navigateur, [b]sera écrasé par le style ci-dessus, et donc sera ignoré[/b] */

/* Styles hérités (cascade CSS) */
html {font-size: 1em;} /* Style que tu spécifie */

Le cumul est maintenant: 1em * 1em * 16px = 1 * 1 * 16 = 16px.
Le font-size: 180% (style par défaut) est ignoré car écrasé par le style de la classe.

En résumé, lorsqu'on utilise des tailles de texte relatives, la taille du texte est calculée par multiplication et:
- les tailles de texte définies en amont (que ce soit par toi ou par les styles par défaut du navigateur) rentrent dans la multiplication;
- si plusieurs tailles de texte s'appliquent à un même élément de l'arborescence (l'élément lui-même, son parent, un élément plus en amont...), les règles de priorité des sélecteurs s'appliquent.

Pour se faciliter la vie, mieux vaut éviter de spécifier des tailles de texte à tous les niveaux de l'arborescence, mais plutôt uniquement lorsque c'est utile.

À lire: http://openweb.eu.org/articles/cascade_css
De nouveau merci pour ces éclaircissements.
J'ai une dernière question : vaut-il mieux déclarer le font-size et/ou le font-family (quand on veut une même police partout) dans le HTML ou le body ?
Modifié par krakkos (03 Feb 2009 - 08:29)
krakkos a écrit :
J'ai une dernière question : vaut-il mieux déclarer le font-size et/ou le font-family (quand on veut une même police partout) dans le HTML ou le body ?

C'est kif-kif. La convention est plutôt de les déclarer au niveau de l'élément BODY, mais pourquoi pas au niveau de l'élément HTML, ça marche aussi.

En général je déclare les styles de base du texte ainsi:
html {
	font-size: 100%; /* Empêche un bug d'IE 6-7 avec les tailles de texte en EM */
}
body {
	font-family: ...;
	font-size: .8em;
}
(Le bug en question est le suivant.)

On pourrait aussi simplifier et écrire:
body {
	font-family: ...;
	font-size: 80%;
}