Les unités en CSS, mise à jour

Les unités en CSS, mise à jour (le 18/03/2016)

Tiens, comme Twitter discute des unités en CSS, je participe au troll… heu, à la discussion avec mes habitudes personnelles en la matière (ce n’est pas du tout 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, pour se comprendre dans une guideline, 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, éviter les arrondis foireux de Chrome sur des icônes dimensionnées en em, pour les coins arrondis… et encore !

Ils sont toujours totalement bannis de la typographie et de tout ce qui peut l’impacter chez moi, notamment sur le reset sur html ou body.

Les pourcentages (%)

Je les utilise toujours 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 quoi qu’on en dise !

Les em

Clairement, depuis 5 à 6 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 restent agréables à consulter quel que soit le niveau de zoom.

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 le rythme vertical du texte sans même y penser.

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, donc toujours 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.

vh et vw

Je les utilise de temps en temps, je disais il y a deux ans que cela viendrait, et effectivement : un de mes derniers projets (dont je n’ai pas le droit de parler) les utilise énormément. Unités intéressantes, à utiliser de manière éclairée.

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 toujours le support réel. Pareil pour les ch, je ne m’en sers jamais.

Hormis quelques cas bien particuliers de besoin de mise en forme précise 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 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 pour les très vieux navigateurs alors que je peux clairement tout faire en em les 99% de mes cas.

Et en fait, tout le monde a pris le pli d’utiliser les em au travail, donc le besoin des rem n’est pas critique.

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

Permalien :

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

4 commentaires

Posté par Johan le 18/03/2016 à 10:35:11
Salut Nico,

Merci pour ce billet.

Côté accessibilité, de mon point de vue, si le zoom texte seul, le zoom graphique ou le changement de la taille des textes active les MQ et change l'affichage du site (passage en version mobile) ce n'est pas critique. Si et seulement si tous les contenus sont encore présents et lisibles.

Concrètement, par exemple, un risque peut être de choisir de ne pas proposer le moteur de recherche sur la version mobile qui disparaît donc pour un utilisateur sur Desktop ayant zoomé ou changé sa préférence de taille de textes.

En gros, à mon humble avis, si l'ensemble des contenus sont disponibles sur toutes les versions du site, peu importe la manière de gérer ces points de rupture (px, em ou autre), alors aucun souci réel pour l'accessibilité.
Posté par Nico le 18/03/2016 à 10:57:21
Salut Johan,

merci pour ton commentaire (sourire)

A mon avis, le bonheur est dans l'équilibre. Y a un juste milieu à trouver dans la conception et l'organisation des contenus (on peut discuter des jours sur ce qu'est un contenu critique). Tant que cela sert l'utilisateur avant tout, on ne sera pas fondamentalement à côté de la plaque. (grand sourire)
Posté par Yara le 18/03/2016 à 14:25:37
Concernant le rythme vertical , comment faire repecter ce ryhtme (ou en faut-il plusieurs) lorsque l'on a plusieurs modules (content sidebar , suite de lectures) dont les tailles de typo varies ?
Posté par Nico le 18/03/2016 à 16:11:25
@Yara : Soit on en crée plusieurs (mais là c'est délicat et il faut tester comme un dingue), soit on peut s'inspirer d'un outil comme : http://soqr.fr/vertical-rhythm/ (ce qui est fait avec big, bigger, etc.), ce que j'ai fait pour ma part.

Pour ma part, je ne suis pas un psychopathe du rythme vertical non plus : je définis les propriétés générales (hx, etc.) et je me fais au mieux pour le respecter. Ceci dit, si une image de contenu vient casser ce rythme : tant pis.

Je ne vais pas commencer à calculer les hauteurs des images en fonction de la typo, ce n'est pas une règle absolue.

Encore une fois, c'est agréable pour le visiteur et ça doit le servir, mais de là à y transformer en maniaquerie, non merci. Et c'est impossible à utiliser en production. L'idée est de rendre agréable la lecture, rien de plus. (sourire)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.