Les unités en CSS (le 9 avril 2014)

Je viens de voir passer une traduction sur Pompage à propos des unités en CSS, et j’avoue être surpris de certains choix.

Je vous propose mes habitudes personnelles en la matière (pas une vérité absolue, ça dépend comme on dit).

Les pixels (`px`)

Ils sont toujours utiles, en tout cas pour discuter avec un graphiste, s’accorder sur une idée générale, etc.

Mais en CSS, je reconnais que je les utilise maintenant très peu. Hormis une taille fixée arbitrairement (ça peut arriver), pour les bordures, les ombres portées, faire un hr, des fois pour fixer quelques éléments de formulaires, des coins arrondis… et encore !

Je les ai par contre totalement bannis de la typographie et de tout ce qui peut l’impacter, notamment sur le reset sur html ou body.

Les pourcentages (`%`)

Je les utilise beaucoup pour des grilles et tout ce qui doit/peut être fluide. C’est toujours utile pour qu’un site pas prévu pour être redimensionné le soit in fine. Une valeur sûre !

Les `em`

Clairement, depuis 2 à 3 ans, c’est l’unité que j’utilise le plus. En fait, elle sert à tout ce qui doit/peut être proportionnel à la typographie. Et comme énormément de choses peuvent être fonction de la typo en matière de web (margin, padding, width ou max-width pour éviter des lignes trop longues, etc.), je les utilise énormément.

Utiliser cette unité me permet beaucoup de choses, le tout en permettant de respecter les préférences de l’utilisateur, et en permettant un zoom.

Sur les sites en responsive, les media-queries en em ont des avantages indéniables, par exemple, zoomer fortement sur le site de Prezenz vous fera afficher la « version » mobile en très gros caractères sur votre ordinateur (même en zoom texte), cela permet d’avoir à tout instant une version dont les contenus sont agréables à consulter.

Certaines classes atomiques de RÖCSSTI me permettent même d’avoir un niveau d’abstraction, je ne fonctionne par exemple plus en pixels pour ajouter une marge, mais en em, c’est tellement plus pratique, et cela permet de respecter par exemple plus facilement les calculs pour le rythme vertical du texte.

Certes ils peuvent être compliqués à gérer dans certains cas précis (genre beaucoup d’intervenants ne se rencontrant dans aucun dimension sur des projets très compliqués, et encore), mais la quasi-totalité de mes cas ne tombe pas dedans, pas d’excuse.

Les nombres bruts

Dans pas mal de cas, autant éviter les unités inutiles. Pour line-height, pas besoin d’unité, pour une valeur nulle (ex : border: 0;) non plus, autant utiliser une valeur auto dans d’autres cas, etc.

Autres

Hormis un cas d’utilisation bien précis dans RÖCSSTI (pour fixer un interlignage disgracieux en cas d’utilisation des balises sub et sup), je ne me sers jamais des ex. Idem pour les en, dont j’ignore même le support réel. Pareil pour les ch, je ne m’en sers jamais.

Idem pour les vh et vw (et autres vmin et vmax), leur support relatif et leur jeunesse font que je ne les utilise jamais (pas eu de cas pour le moment, mais cela va venir).

Hormis quelques cas bien particuliers pour le media print, je ne me sers jamais des mm et autres cm, idem pour les pt (points), les in inches) et les pc (pica).

Les rem sont très intéressants, mais comme je ne puis abandonner IE8 pour le moment, je ne m’en sers que très peu, cela me fatigue clairement de devoir gérer une solution de secours en em alors que je peux clairement tout faire en em les 99% de mes cas.

Il existe d’autres unités, mais elles sont tellement anecdotiques pour mon utilisation pratique…

Permalien : https://www.nicolas-hoffmann.net/source/1623-Les-unites-en-CSS.html

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1623

3 commentaires

Posté par Geoffrey le 09/04/2014 à 18:42:42

Hello,
Sympa de voir que les pixels ne te servent quasiment plus, notamment pour la typographie. Quand je n'hérite pas d'une feuille de styles toute caca, je me le permets également :p

Pour l'unité `vw` et sa petite soeur, j'ai proposé ceci il y a quelques temps : http://www.creativejuiz.fr/blog/veille-technologique/taille-police-en-fonction-largeur-ecran-viewport et également une possibilité de conserver un ratio sur la hauteur/largeur d'un bloc : http://codepen.io/CreativeJuiz/pen/KzkgL

C'est utilisable dans une idée d'amélioration progressive, le support étant plutôt bon sur les navigateurs modernes.

À bientôt !

Posté par Victor Brito le 09/04/2014 à 22:44:05

N'oublions pas que Pompage n'a fait que pomper ce qu'a dit l'auteur original.

Cela dit, en ce qui concerne le pixel, nous sommes d'accord, il est à bannir de la typographie, y compris dans un reset CSS. N'oublions pas que, même dans ses dernières versions, IE est sans appel : il refuse d'agrandir le texte si la taille de police est définie en pixels. Et si le pixel est utilisé pour définir la taille de police au niveau de l'élément body ou de l'élément racine html, aucune taille de police définie en unité relative dans les éléments descendants ne pourra faire agrandir le texte sous IE. Soit dit en passant, à tous les sceptiques tentés de répliquer que le zoom n'est que graphique depuis IE 8, appuyez sur la touche Alt pour faire apparaître le menu : vous trouverez encore de quoi agrandir uniquement le texte, avec les 5 options proposées par IE en la matière.

En ce qui concerne l'utilisation de rem, je suis très surpris par tes réticences. Certes, les versions d'IE antérieures à la 9 ne reconnaissent pas cette unité (pas plus qu'Opera Mini, d'ailleurs) ; mais, pour définir les tailles de police, c'est parfaitement exploitable, tout en assurant la compatibilité avec IE 8 et Opera Mini (on définit d'abord la taille en em, puis on l'écrase par celle en rem), ce qui est même un jeu d'enfant quand on utilise Sass (un mixin pour générer les deux déclarations font-size et une fonction pour calculer la taille en em en fonction de la taille de référence) : c'est, d'ailleurs, ce que je fais, désormais, dans mes intégrations.

Quant à l'effet produit sur l'affichage avec un zoom élevé par l'utilisation de l'unité em dans les media queries, sous Safari, il ne se produit pas si l'on est en mode zoom texte.

Enfin, en ce qui concerne les unités jouant avec le viewport, si l'on évite vh (dont le comportement est problématique sous iOS 7) et vmax (non reconnu par les versions d'IE antérieures à la 11, entre autres) et qu'on a à l'esprit qu'IE 9 comprend vm au lieu de vmin, on peut franchir le pas dès maintenant (même si je ne m'en suis pas encore servi pour ma part).

Posté par Nico le 10/04/2014 à 8:57:28

Geoffrey : Ah oui, je ne m'en souvenais plus. A retenir

Victor : comme je l'ai dit, ce ne sont pas des réticences, mais comme tout gérer en em ne me pose quasiment jamais de problème, ça me fatigue de tout rechanger pour un système où je dois faire en plus un fallback. Sur certaines inté, je n'utilise pas de préprocesseur (et il faudra que je refasse les fonctions de calcul de rythme vertical du coup).

Si le but de cette unité est de me simplifier la vie, c'est pour le moment raté, mais à l'avenir, ça sera très bien.

Les unités en CSS

Les unités en CSS (le 9 avril 2014)

Les pixels (px)

Les pourcentages (%)

Les em