Quelle est la valeur de l'unité css «ex»?
(À ne pas confondre avec Xunit , une bibliothèque de tests unitaires .Net populaire.)
Aujourd'hui, dans un accès d'ennui, j'ai commencé à inspecter Gmails DOM (oui, je m'ennuyais beaucoup).
Tout semblait assez simple jusqu'à ce que je remarque une spécification intéressante sur les largeurs de certains éléments. Les illustres Googlites avaient spécifié un certain nombre de colonnes de table en utilisant la rare unité "ex".
width: 22ex;
Au début, j'étais perplexe ("qu'est-ce qu'un" ex "?"), Puis cela m'est revenu: il semble que je me souvienne de quelque chose d'il y a des années, lorsque j'apprenais pour la première fois le CSS. D'après la spécification CSS :
[L'unité ex est] égale à la hauteur x utilisée de la première police disponible . La hauteur x est ainsi appelée car elle est souvent égale à la hauteur du "x" minuscule. Cependant, un "ex" est défini même pour les polices qui ne contiennent pas de "x".
Bel et bien. Mais je ne l'ai jamais vu utilisé auparavant (encore moins utilisé moi-même). J'utilise les ems assez couramment, et j'apprécie leur valeur, mais pourquoi les "ex"? Il semble une mesure beaucoup moins standard que l'em, et beaucoup moins utile.
L'une des rares pages que j'ai trouvées sur ce sujet est celle de Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/emex.html . Stephen soulève de bons points, cependant, sa discussion ne me semble pas concluante.
Donc ma question est: Quelle valeur l'unité "ex" prête-t-elle à la conception web?
(Cette question pourrait être qualifiée de subjective, mais je laisserai cette décision à des utilisateurs plus expérimentés que moi.)
Il est utile lorsque vous souhaitez dimensionner quelque chose par rapport à la hauteur des lettres minuscules de votre texte. Par exemple, imaginez travailler sur un design comme celui-ci:
Dans la dimension typographique du design, la hauteur des lettres a d'importantes relations spatiales avec le reste des éléments. Les lignes de l'image source ci-dessus sont destinées à vous aider à souligner la hauteur x du texte, mais elles montrent également où seraient les lignes directrices si vous concevez autour de ce texte.
Comme Jonathan l'a souligné dans les commentaires, ex est simplement la version en hauteur de em (largeur).
Pour répondre à la question, une utilisation est en exposant et en indice. Exemple:
sup {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
bottom: 1ex;
}
Une autre chose à considérer ici est de savoir comment votre page évolue lorsqu'un utilisateur augmente ou diminue sa taille de police (peut-être en utilisant ctrl + molette de la souris (windows)).
Je les ai utilisés avec .. padding-left: 2 em; rembourrage à droite: 2 em;
et ex avec rembourrage: 2 ex; rembourrage: 2 ex;
On utilise ainsi une unité de mesure verticale pour une propriété de mise à l'échelle verticale et une unité de mesure horizontale pour une propriété de mise à l'échelle horizontale.
La valeur de l'avoir dans la spécification CSS, si c'est ce que vous demandez vraiment, est exactement la même que la valeur d'avoir l'unité em.
Il vous permet de définir les polices sur relative tailles.
Vous ne savez pas quelle est ma taille de police de base. Ainsi, une bonne stratégie pour la conception Web consiste à définir des tailles de police qui sont relatives plutôt qu'absolues; l'équivalent de "doubler votre taille normale" ou "un peu plus petit que votre taille normale" plutôt qu'une taille fixe comme "dix pixels".
Notez que des termes comme "interligne simple/double" signifient en fait le décalage entre deux lignes adjacentes, mesuré par em. Donc, "double interligne" signifie que chaque ligne a une hauteur de 2 em.
Par conséquent, si vous souhaitez spécifier une distance verticale proportionnelle aux "lignes", utilisez em. N'utilisez ex que si vous voulez la hauteur réelle de la lettre minuscule, ce qui est, j'ose le dire, un cas beaucoup plus rare.