Les EMS sont-ils toujours pertinents?

Ma compréhension de la lecture de fils comme celui-ci est que le point de ems est de définir toutes les mesures dans votre page Web, par la taille de police de base , qui peut être définie par votre navigateur.

Par exemple, dans Chrome, vous pouvez le faire en allant settings -> show advanced settings -> web content -> font size: very large. Je pourrais le faire si j'utilisais un grand écran haute résolution, qui était loin.

J'ai créé un plongeur qui montre la différence entre ems et px dans le dimensionnement.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Si dans mon navigateur, je définis la taille de la police sur moyenne, ces divs seront de la même taille, la taille de la police de base étant de 16 pixels, donc 20 em = 320 pixels.

Cependant, lorsque je change la taille de la police de mon navigateur en très grand, nous pouvons voir que la div mesurée en ems a augmenté de taille.

Cependant, cet effet sera annulé si je définis la taille de police dans la balise body par exemple.

body {
  font-size: 16px;
}

Parce que maintenant mon CSS remplace la taille de police définie par le navigateur.

Je comprends qu'ems aurait été important à l'époque des navigateurs plus anciens, où le zoom sur la page ne ferait que redimensionner les polices. Mais de nos jours, les navigateurs modernes augmentent à la fois les pixels et les polices, ce qui rend le problème de zoom sans objet.

En regardant autour du web - beaucoup de sites font la taille de la police dans leur ensemble balise body.

Par exemple, Stack Overflow définit la taille de police à 13 pixels dans la balise body. La définition de la taille de la police dans mon navigateur n'affecte en rien la disposition de Stack Overflow.

Les résultats de recherche Google ne le font pas.

(ces deux captures d'écran prises avec une taille de police chromée très grande et un zoom à 100%).

Donc, vous pourriez peut-être affirmer que la définition de la taille de la police dans la balise body est une mauvaise idée car elle empêche les propres paramètres d'accessibilité d'un utilisateur. Mais étant donné que l'utilisateur peut zoomer pour augmenter les tailles (ce qui augmentera proportionnellement tous les pixels) - cela ne semble pas être un vrai problème.

Cependant, cet effet sera annulé si je définis la taille de police dans la balise body par exemple.

body {
  font-size: 16px;
}

Parce que maintenant mon CSS remplace la taille de police définie par le navigateur.

Vous oubliez l' accessibilité .

Voir C14: Utilisation des unités em pour les tailles de police de Web Content Accessibility Guidelines (WCAG 2.0).

Définissez l'option de taille de police de votre navigateur sur Très grande . Accédez maintenant à un site Web tel que W3C . À quoi ressemble le texte?

C'est à cela que sert cette option. Les développeurs de StackExchange et de nombreux autres sites Web ont décidé que leurs choix étaient plus importants que les choix des utilisateurs malvoyants. Que ce choix soit bon ou mauvais est hors de la portée de cette question, et la réponse n'est pas nécessaire directement.

Cependant, vous pouvez être contraint (y compris par la loi pour certains sites Web) de prendre des décisions différentes et de laisser les utilisateurs sélectionner leur taille de police. De là, vous avez le choix: soit vous spécifiez la taille des images et les différentes zones de la page en pixels, auquel cas l'option de taille de police du navigateur aura des effets amusants sur la mise en page, soit vous utilisez empour ces éléments comme bien.

Notez également que si vous ne spécifiez pas la taille de la police en pixels au niveau du corps, respectez emau moins la taille de la police partout. Par exemple, Google a spécifié la taille de la police de manière incohérente et leur page de recherche a l'air bizarre, en particulier avec des titres apparaissant plus petits que le texte ordinaire. Wikipédia, d'autre part, a fait un excellent travail en utilisant emchaque fois que la taille de la police a été spécifiée. Voici les captures d'écran des deux sites rendues par Chromium avec l'option de taille de police définie sur Très grand :

Donc, vous pourriez peut-être affirmer que la définition de la taille de la police dans la balise body est une mauvaise idée car elle empêche les propres paramètres d'accessibilité d'un utilisateur. Mais étant donné que l'utilisateur peut zoomer pour augmenter les tailles (ce qui augmentera proportionnellement tous les pixels) - cela ne semble pas être un vrai problème.

C'est un vrai problème pour deux raisons.

Premièrement, la plupart des navigateurs stockent le facteur de zoom site par site. Si vous avez une déficience visuelle, vous serez obligé de zoomer, encore et encore, sur chaque site que vous visitez. Ça craint. Compte tenu de l'indifférence actuelle des concepteurs et développeurs Web à l'égard de l'accessibilité, les personnes malvoyantes doivent le faire de toute façon, mais cela ne signifie pas que cela devrait rester ainsi.

Deuxièmement, trop de sites Web ne se comporteront pas bien visuellement lors d'un zoom non plus. Les sites Web réactifs fonctionnent bien, mais ceux qui ne répondent pas présentent un défilement horizontal ou une sorte de comportement "votre écran est trop petit".

Il existe également une différence fondamentale entre le zoom et l'échelle de texte pour un développeur. Alors que emsignifie «ajuster cela aux préférences de taille du texte de l'utilisateur», le zoom consiste à agrandir ou réduire la page entière, pas seulement le texte.

Prenons un exemple du menu du site (en haut de la page, avec des liens positionnés sur une ligne). Avec le zoom, vous savez que la hauteur du menu changera proportionnellement aux autres éléments. Avec l'option de taille du texte, c'est à vous de déterminer le comportement. Vous pouvez supposer qu'une personne malvoyante pourra voir votre 50pxmenu de hauteur dans tous les cas: personne ne manquera un menu noir sur fond blanc. Ou vous pouvez décider que sa hauteur doit rester proportionnelle au texte, par exemple 1.5em.

le point de ems est de définir toutes les mesures dans votre page Web, par la taille de police de base

Cela peut être une mauvaise compréhension des termes de ma part, mais pour clarifier: emest relatif à la taille de police de "l'élément actuel". remest relatif à la taille de la police racine.

Je comprends qu'ems aurait été important à l'époque des navigateurs plus anciens, où le zoom sur la page ne ferait que redimensionner les polices.

Ce n'est pas pour ça que j'utilise emdes. En fait, votre expérience de zoom est la dernière chose à laquelle je pense lorsque j'utilise des unités de mesure relatives. Ma préoccupation est double.

Premièrement, je suis normalement intéressé à simplement définir mes dispositions en termes relatifs. Ma préoccupation est que mes conteneurs soient beaux les uns par rapport aux autres et au texte qu'ils contiennent. Et lorsque je change la police ou que je modifie les choses dans la chaîne, je ne veux pas recalculer et tout mettre à jour à la main pour conserver les proportions pour lesquelles je photographie. Laissez le navigateur faire le calcul ...

Deuxièmement, je veux simplement exprimer les tailles de police en termes simples que je peux comprendre. Si j'exprime mes polices de base en pts et tout le reste en rems ou em, c'est plus facile pour moi. Je n'ai pas besoin de connaître la résolution de votre appareil et vous n'avez pas besoin de zoomer. Votre navigateur sait combien de pixels utiliser; aucun de nous ne devrait avoir à y penser.