Unités relatives

Salut,

Florent, toi qui a écrit un bon article sur la taille du texte en em : si on définit la taille d'un conteneur en em qui n'a pas de parent, sa taille est fonction de la taille de la police à la base (je crois bien). Est-ce que c'est écrit quelque part dans les spec CSS ? J'ai pas trouvé.
Et le coup des 16px par défaut pour une fonte que l'on fixe à 100% ? C'est un réglage par défaut des navigateurs issus de quoi ?

Merci

Bonjour,

Si on définit la taille (disons la largeur) d'un bloc en EM, et que ce bloc est enfant de body, ça ne change rien à la donne: sa largeur dépendra de la valeur calculée de font-size pour cet élément, multipliée par la valeur en EM donnée pour la largeur.

C'est à dire que si on n'a précisé de valeur de font-size ni pour html, ni pour body, ni pour l'élément, la valeur calculée de font-size pour cet élément sera égale à la taille de texte par défaut configurée au niveau du navigateur.

Disons que notre élément s'appelle div#test. Si on prend le code suivant:

html {font-size: 100%;}
body {font-size: .85em;}
div#test {
	width: 50em;
}

La largeur de div#test sera de 42,5 fois la taille de texte par défaut. Pour une taille de texte par défaut de 16px, cela nous fait une largeur de 680px. Si la taille de texte par défaut était de 18px, on aurait une largeur de l'élément de 765px. Et ainsi de suite.

Pour rappel, à propos des valeurs calculées:
http://www.w3.org/TR/CSS21/cascade.html#value-stages

talvins a écrit :
Et le coup des 16px par défaut pour une fonte que l'on fixe à 100% ?

Tu vas dans les préférences de Firefox et tu constates que c'est bien la valeur 16px qui est donnée pour la taille de texte par défaut.
C'est une valeur qui s'est plus ou moins «standardisée» au fil du temps... jusqu'ici.

Florent V. a écrit :
Bonjour,

Pour rappel, à propos des valeurs calculées:
http://www.w3.org/TR/CSS21/cascade.html#value-stages


Tu vas dans les préférences de Firefox et tu constates que c'est bien la valeur 16px qui est donnée pour la taille de texte par défaut.
C'est une valeur qui s'est plus ou moins «standardisée» au fil du temps... jusqu'ici.

Hum... euh oui, ça c'est la cascade .
Mais je n'ai pas trouvé où il était indiqué que c'était font-size qui faisait office de référence (question que je posais).
Admettons que je ne connaisse pas du tout CSS : em est une unité relative. Relative à quoi ? Au parent. Ok. Mais pourquoi font-size à la base ? Pourquoi pas width de body ?
Je sais que la question est bizarre, mais on me l'a posée et j'ai répondu que l'unité de 1em était basée sur le premier font-size rencontré... sans savoir vraiment d'où ça vient.

Pour les 16px, idem : je sais que c'est 16px, mais je demande s'il s'agit d'un usage ou d'une règle que je n'aurais pas trouvé.

Pour les 16px: à ma connaissance c'est un usage et pas une règle. Il y a eu des valeurs par défaut différentes avec certains navigateurs ou systèmes, notamment sur Mac il me semble.

Pour EM l'unité n'est pas relative au parent, mais à la valeur calculée de font-size pour l'élément en cours (celui pour lequel on utilise une valeur en EM). Avec une exception: quand l'unité EM est utilisée dans la propriété font-size de l'élément, elle se réfère à la valeur calculée de font-size de l'élément parent.

talvins a écrit :
Mais je n'ai pas trouvé où il était indiqué que c'était font-size qui faisait office de référence (question que je posais).

La spécification CSS 2.1 comporte une partie nommée «Syntax and basic data types» (chapitre 4) où on trouve des informations sur les unités. Je cite:

a écrit :
The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

http://www.w3.org/TR/CSS21/syndata.html#length-units

Parfait ! Merci Florent.

Patidou : oui, en effet. J'ai déjà passé des design en em, mais c'est contraignant.
Je ne sais pas, au final, s'il est plus convenable d'avoir un conteneur de largeur fixe ou relative. Je lancerai un sujet là-dessus

Patidou a écrit :
Bref faut faire attention quand on défini des tailles d'éléments en EM.

Oui. Personnellement, je déconseille d'utiliser cette unité pour définir des largeurs d'éléments (pour certaines hauteurs, faut voir, mais de toute façon en général on évite de figer la hauteur, que ça soit en "em" ou en "px").

Ou alors en combinaison avec max-width, pour limiter la longueur des lignes de texte par exemple.