Dois-je utiliser des unités de valeur px ou rem dans mon CSS?

Je conçois un nouveau site Web et je souhaite qu’il soit compatible avec autant de navigateurs et de parameters de navigateur que possible. J’essaie de décider quelle unité de mesure je devrais utiliser pour la taille de mes fonts et de mes éléments, mais je suis incapable de trouver une réponse définitive.

Ma question est la suivante: devrais-je utiliser px ou rem dans mon CSS?

  • Jusqu’à présent, je sais que l’utilisation de px n’est pas compatible avec les utilisateurs qui ajustent leur taille de police de base dans leur navigateur.
  • Je n’ai pas tenu compte de ces problèmes, car ils sont plus compliqués à maintenir que comparés avec les rem , car ils se répercutent en cascade.
  • Certains disent que les rem sont indépendants de la résolution et donc plus souhaitables. Mais d’autres disent que la plupart des navigateurs modernes zooment de la même manière sur tous les éléments, donc utiliser px n’est pas un problème.

Je pose cette question car il y a beaucoup d’opinions différentes quant à la mesure de distance la plus souhaitable en CSS, et je ne suis pas sûr de ce qui est le mieux.

TL; DR: utilise px .

Les faits

  • Tout d’abord, il est extrêmement important de savoir que, selon les spécifications , l’unité px CSS n’est pas égale à un pixel d’affichage physique. Cela a toujours été vrai – même dans la spécification CSS 1 de 1996.

    CSS définit le pixel de référence , qui mesure la taille d’un pixel sur un affichage 96 dpi. Sur un écran ayant un dpi sensiblement différent de 96dpi (comme les écrans Retina), l’agent utilisateur rééchelonne l’unité px pour que sa taille corresponde à celle d’un pixel de référence. En d’autres termes, ce redimensionnement est exactement la raison pour laquelle 1 pixel CSS est égal à 2 pixels d’affichage Retina physiques.

    Cela dit, jusqu’en 2010 (et malgré la situation du zoom mobile), le pixel correspondait presque toujours à un pixel physique, car tous les affichages largement disponibles étaient autour de 96 dpi.

  • Les tailles spécifiées dans em s sont relatives à l’élément parent . Cela conduit au “problème de composition” de l ‘ em , où les éléments nesteds deviennent progressivement plus grands ou plus petits. Par exemple:

     body { font-size:20px; } div { font-size:0.5em; } 

    Nous donne:

      - 20px 
    - 10px
    - 5px
    - 2.5px
    - 1.25px
  • Le rem CSS3, qui est toujours relatif uniquement à l’élément html racine, est trop récent pour pouvoir être utilisé. En juillet 2012, environ 75% de tous les navigateurs utilisés supportaient le rem .

L’opinion

Je pense que tout le monde s’accorde à dire qu’il est bon de concevoir vos pages pour qu’elles soient adaptées à tous et qu’elles tiennent compte des déficients visuels. L’une de ces considérations (mais pas la seule!) Est de permettre aux utilisateurs d’agrandir le texte de votre site, de manière à faciliter sa lecture.

Au début, la seule façon de fournir aux utilisateurs un moyen de faire évoluer la taille du texte consistait à utiliser des unités de taille relative (telles que les em E). C’est parce que le menu de taille de police du navigateur a simplement changé la taille de la police racine. Ainsi, si vous spécifiez des tailles de police en px , elles ne seront pas mises à l’échelle lorsque vous modifiez l’option de taille de police du navigateur.

Les navigateurs modernes (et même les IE7 moins modernes) ont tous changé la méthode de mise à l’échelle par défaut en effectuant simplement un zoom sur tout, y compris les images et les tailles de boîte. Essentiellement, ils rendent le pixel de référence plus grand ou plus petit.

Oui, quelqu’un pourrait toujours changer la feuille de style par défaut de son navigateur pour modifier la taille de police par défaut (l’équivalent de l’ancienne option de taille de police), mais c’est une façon très ésotérique de le faire. (Dans Chrome, il est caché sous les parameters avancés, contenu Web, tailles de police. Dans IE9, il est encore plus caché. Vous devez appuyer sur Alt et aller à Affichage, Taille du texte.) Il est beaucoup plus facile de sélectionner l’option Zoom dans dans le menu principal du navigateur (ou utilisez Ctrl + + / - / molette de la souris).

1 – dans l’erreur statistique, naturellement

Si nous supposons que la plupart des utilisateurs mettent à l’échelle des pages à l’aide de l’option de zoom, je trouve que les unités relatives ne sont généralement pas pertinentes. Il est beaucoup plus facile de développer votre page lorsque tout est spécifié dans la même unité (les images sont toutes traitées en pixels) et vous n’avez pas à vous soucier de la composition. ( “On m’a dit qu’il n’y aurait pas de maths” – il faut calculer ce à quoi 1.5em travaille réellement.)

Un autre problème potentiel lié à l’utilisation des unités relatives uniquement pour les tailles de police est que les fonts redimensionnées par l’utilisateur peuvent casser les hypothèses formulées par votre mise en page. Par exemple, cela pourrait entraîner une réduction du texte ou son exécution trop longue. Si vous utilisez des unités absolues, vous n’avez pas à vous soucier des tailles de police inattendues en cas de rupture de votre mise en page.

Donc, ma réponse est d’utiliser des unités de pixels. J’utilise px pour tout. Bien sûr, votre situation peut varier et si vous devez prendre en charge IE6 (que les dieux des RFC aient pitié de vous), vous devrez de toute façon les utiliser.

Je voudrais faire l’éloge de la réponse de josh3736 pour fournir un excellent contexte historique. Bien que ce soit bien articulé, le paysage des CSS a changé depuis presque cinq ans depuis que cette question a été posée. Lorsque cette question a été posée, px était la bonne réponse, mais cela ne se vérifie plus aujourd’hui.


tl; dr: utiliser rem

Vue d’ensemble de l’unité

Historiquement, les unités px représentaient généralement un pixel de périphérique. Avec des périphériques ayant une densité de pixels de plus en plus élevée, ceci n’est plus le cas pour de nombreux périphériques, comme avec l’écran Retina d’Apple.

rem unités rem représentent la taille maximale. C’est la font-size de la font-size de toutes les correspondances :root . Dans le cas de HTML, c’est l’élément ; pour SVG, c’est l’élément . La font-size par défaut dans chaque navigateur * est 16px .

Au moment de la rédaction de ce document, rem est pris en charge par environ 98% des utilisateurs . Si vous vous inquiétez de cette autre 2%, je vous rappelle que 98% des utilisateurs soutiennent également les requêtes médias .

Sur l’utilisation de px

La majorité des exemples CSS sur Internet utilisent des valeurs px car ils étaient la norme de facto. pt , in et une variété d’autres unités auraient pu être utilisées en théorie, mais elles ne traitaient pas bien les petites valeurs, car vous auriez rapidement besoin de fractions, plus longues à taper, et plus difficiles à raisonner.

Si vous voulez une bordure fine, avec px vous pouvez utiliser 1px , avec pt vous devez utiliser 0.75pt pour des résultats cohérents, et ce n’est pas très pratique.

Sur l’utilisation de rem

La valeur par défaut de 16px de rem n’est pas un argument très fort pour son utilisation. Ecrire 0.0625rem est pire que d’écrire 0.75pt , alors pourquoi utiliser quelqu’un rem ?

Il y a deux parties à mettre en avant par rapport aux autres unités.

  • Les préférences de l’utilisateur sont respectées
  • Vous pouvez changer la valeur px apparente de rem à ce que vous voulez

Respect des préférences de l’utilisateur

Le zoom du navigateur a beaucoup changé au fil des ans. Historiquement, de nombreux navigateurs n’augmentaient que la taille de la font-size , mais cela changeait assez rapidement lorsque les sites Web se rendaient compte que leurs superbes conceptions parfaites en pixels se brisaient à chaque fois que quelqu’un effectuait un zoom avant ou arrière. À ce stade, les navigateurs redimensionnent l’intégralité de la page, de sorte que le zoom basé sur la police est hors de l’image.

Respecter les souhaits d’un utilisateur n’est pas exclu. Tout simplement parce qu’un navigateur est défini sur 16px par défaut ne signifie pas qu’un utilisateur ne peut pas modifier ses préférences à 24px ou 32px pour corriger une mauvaise vision. Si vous basez vos unités hors rem , tout utilisateur de taille supérieure verra un site proportionnellement plus grand. Les bordures seront plus grandes, le rembourrage sera plus grand, les marges seront plus grandes, tout sera graduellement plus fluide.

Si vous basez vos requêtes multimédias sur rem , vous pouvez également vous assurer que le site que vos utilisateurs voient correspond à leur écran. Un utilisateur dont font-size définie sur 32px sur un navigateur de 640px large verra effectivement votre site affiché à un utilisateur à 32px sur un navigateur 640px large. Il n’y a absolument aucune perte pour RWD en utilisant rem .

Changer la valeur apparente de px

Puisque rem est basé sur la font-size de la font-size du noeud :root , si vous voulez changer ce que 1rem représente, il suffit de changer la font-size la font-size :

 :root { font-size: 100px; } body { font-size: 1rem; } 
 

Don't ever actually do this, please

Cet article décrit assez bien les avantages et les inconvénients de px , em et rem .

L’auteur conclut enfin que la meilleure méthode consiste probablement à utiliser à la fois px et rem , en déclarant d’abord px pour les anciens navigateurs et en redéfinissant rem pour les nouveaux navigateurs:

 html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */ 

En tant que réponse réflexe, je recommanderais d’utiliser rem, car cela vous permet de modifier le “niveau de zoom” de l’ensemble du document en même temps, si nécessaire. Dans certains cas, lorsque vous souhaitez que la taille soit relative à l’élément parent, utilisez em.

Mais la prise en charge de rem est inégale, IE8 nécessite un polyfill et Webkit présente un bogue. De plus, le calcul des sous-pixels peut entraîner la disparition de certaines lignes de pixels. La solution consiste à coder en pixels pour de très petits éléments. Cela introduit encore plus de complexité.

Alors, dans l’ensemble, demandez-vous si cela en vaut la peine: quelle est l’importance et la probabilité que vous modifiiez le «niveau de zoom» de l’ensemble du document dans CSS?

Dans certains cas, c’est oui, dans certains cas, ce sera non.

Donc, cela dépend de vos besoins, et vous devez peser le pour et le contre, car l’utilisation de rem et em introduit quelques considérations supplémentaires par rapport au workflow basé sur les pixels “normal”.

Gardez à l’esprit qu’il est facile de changer (ou plutôt de convertir) votre CSS à partir de px en rem (JavaScript est une autre histoire), car les deux blocs de code CSS suivants produiraient le même résultat:

 html { } body { font-size:14px; } .someElement { width: 12px; } 

 html { font-size:1px; } body { font-size:14rem; } .someElement { width: 12rem; } 

La réponse de josh3736 est bonne, mais pour contrer 3 ans plus tard:

Je recommande d’utiliser des unités rem pour les fonts, ne serait-ce que parce que cela facilite la modification des tailles pour vous , en tant que développeur. Il est vrai que les utilisateurs changent très rarement la taille de police par défaut dans leur navigateur, et que le zoom du navigateur moderne permet de faire évoluer les unités px . Mais que se passe-t-il si votre patron vient à vous et dit “n’agrandissez pas les images ou les icons, mais faites en sorte que toutes les fonts soient plus grandes”. Il est beaucoup plus facile de changer la taille de la police racine et de laisser toutes les autres fonts évoluer par rapport à cela, puis de modifier les tailles de px en dizaines ou en centaines de règles CSS.

Je pense qu’il est toujours judicieux d’utiliser des unités px pour certaines images, ou pour certains éléments de mise en page qui doivent toujours avoir la même taille, quelle que soit l’échelle de la conception.

Caniuse.com a peut-être dit que seulement 75% des navigateurs de josh3736 ont affiché sa réponse en 2012, mais au 27 mars, ils réclamaient un soutien de 93,78% . Seul IE8 ne le prend pas en charge parmi les navigateurs qu’ils suivent.

J’ai trouvé que la meilleure façon de programmer les tailles de police d’un site Web est de définir une taille de police de base pour le body , puis d’utiliser les em (ou rems) pour chaque autre font-size je déclare après. Je suppose que c’est une préférence personnelle, mais elle m’a bien servi et a facilité l’intégration d’un design plus réactif .

En ce qui concerne l’utilisation des unités rem, je pense qu’il est bon de trouver un équilibre entre la progressivité de votre code et la prise en charge des anciens navigateurs. Consultez ce lien sur la prise en charge du navigateur pour les unités rem , ce qui devrait vous aider dans votre décision.

pt est similaire à rem , en ce sens qu’il est relativement fixe, mais presque toujours indépendant du DPI, même lorsque les navigateurs non conformes traitent le px d’une manière dépendant du périphérique. rem varie avec la taille de la police de l’élément racine, mais vous pouvez utiliser quelque chose comme Sass / Compass pour le faire automatiquement avec pt .

Si vous aviez ceci:

 html { font-size: 12pt; } 

alors 1rem serait toujours 12pt . rem et em sont seulement aussi indépendants que les éléments sur lesquels ils s’appuient; certains navigateurs ne se comportent pas selon les spécifications et traitent littéralement le px . Même dans les temps anciens du Web, 1 point était toujours considéré comme 1/72 pouce – c’est-à-dire qu’il y avait 72 points dans un pouce.

Si vous avez un ancien navigateur non conforme et que vous avez:

 html { font-size: 16px; } 

alors 1rem va être dépendant du périphérique. Pour les éléments qui hériteraient du html par défaut, 1em serait également dépendant du périphérique. 12pt serait l’équivalent indépendant de l’appareil: 16px / 96px * 72pt = 12pt , où 96px = 72pt = 1in .

Faire des calculs peut être assez compliqué si vous voulez vous en tenir à des unités spécifiques. Par exemple, .75em of html = .75rem = 9pt et .66em of .75em of html = .5rem = 6pt . Une bonne règle de base:

  • Utilisez pt pour les tailles absolues. Si vous avez vraiment besoin que cela soit dynamic par rapport à l’élément racine, vous demandez trop de CSS; Vous avez besoin d’un langage compatible avec CSS, comme Sass / SCSS.
  • Utilisez em pour les tailles relatives. Il est très pratique de pouvoir dire: “Je veux que la marge de gauche soit à peu près de la largeur maximale d’une lettre” ou “Rendre le texte de cet élément un peu plus grand que son environnement”.

    est un bon élément sur lequel utiliser une taille de police dans ems, car elle peut apparaître à différents endroits, mais devrait toujours être plus grande que le texte à proximité. De cette façon, vous n’avez pas besoin d’une taille de police distincte pour chaque classe appliquée à h1 : la taille de la police sera automatiquement adaptée.

  • Utilisez px pour les très petites tailles. A de très petites tailles, pt peut devenir flou dans certains navigateurs à 96 DPI, puisque les pt et px ne s’alignent pas tout à fait. Si vous souhaitez simplement créer une bordure mince d’un pixel, dites-le. Si vous avez un affichage haute résolution, cela ne vous semblera pas évident lors des tests, alors assurez-vous de tester un affichage générique de 96 DPI à un moment donné.
  • Ne traitez pas de sous-pixels pour rendre les choses plus attrayantes sur les écrans à haute résolution. Certains navigateurs peuvent le supporter – en particulier sur les écrans haute résolution – mais c’est un non-non. La plupart des utilisateurs préfèrent les gros et les clairs, bien que le web nous ait appris le contraire aux développeurs. Si vous souhaitez append des détails étendus pour vos utilisateurs avec des écrans de pointe, vous pouvez utiliser des graphiques vectoriels (lire: SVG), ce que vous devriez faire de toute façon.

Oui. Ou plutôt non.

Euh, je veux dire, ça n’a pas d’importance. Utilisez celui qui convient à votre projet. PX et EM ou les deux sont également valables, mais se comporteront différemment selon l’architecture CSS de votre page.

METTRE À JOUR:

Pour clarifier, je déclare que ce que vous utilisez n’a probablement pas d’importance. Parfois, vous pouvez spécifiquement choisir l’un sur l’autre. Les EM sont pratiques si vous pouvez recommencer à zéro et que vous voulez utiliser une taille de police de base et tout faire par rapport à cela.

Les PX sont souvent nécessaires lorsque vous modifiez une nouvelle conception sur une base de code existante et que vous avez besoin de la spécificité de px pour éviter les problèmes d’imbrication incorrects.

Les em sont la voie à suivre, pas seulement pour les fonts de caractères, mais vous pouvez également les utiliser avec des boîtes, des épaisseurs de lignes et d’autres éléments, pourquoi?

Mettez simplement les em sont les seules qui s’adaptent à l’unisson avec les touches alt + et alt- du navigateur pour zoomer.

D’autres mesures s’échelonnent, mais pas aussi proprement qu’un em.

Sur une note de côté, si vous voulez le meilleur en matière de mise à l’échelle, convertissez également vos graphiques en fichiers SVG vectoriels, dans la mesure du possible, car ceux-ci évolueront également avec le taux de zoom des navigateurs.

Les EM sont la SEULE chose qui évolue pour les requêtes multimédias qui traitent de +/-, ce que les gens font tout le temps, pas seulement les aveugles. Voici une autre démonstration professionnelle très bien écrite expliquant pourquoi cela compte.

Au fait, c’est pour cette raison que Zurb Foundation utilise ems , tandis que Bootstrap 3 inférieur utilise toujours des pixels.