DEV Community

Cover image for đŸ‡«đŸ‡· [CSS] Pourquoi les unitĂ©s relatives sont un enfer
Gravisto
Gravisto

Posted on • Updated on

đŸ‡«đŸ‡· [CSS] Pourquoi les unitĂ©s relatives sont un enfer

Lorsque l'on parle de responsivité, on entend souvent dire que les px sont à bannir, et qu'il faudrait privilégier les em et les rem.
Pour vĂ©rifier, j’ai demandĂ© Ă  Bard (concurrent de chatGpt ) et voilĂ  le rĂ©sultat

En général, les unités relatives sont préférables aux unités absolues pour le responsive design, car elles permettent de garantir que le design d'un site web s'adapte à différents écrans et résolutions.

Bon, on vas voir pourquoi bard se trompe et pourquoi cette question et si importante pour la DX de votre projet. Surtout qu’il y a une tendance Ă  sous-estimer l'importance du CSS dans les projets et tout particuliĂšrement la questions des unitĂ©s. Alors qu'elles sont comme le train d'atterrissage d'un avion : ce n'est pas ce qui te permet de voler, mais si c'est mal pensĂ©, tu vas vite avoir un problĂšme.

accident avion

Le bordel des unités en css

C'est lĂ  que tout commence, car il existe vraiment beaucoup d'unitĂ©s. En effet, il y a mĂȘme toute une histoire liĂ©e Ă  l'Ă©volution du CSS Ă  travers les technologies et les besoins des utilisateurs.

Aujourd'hui, il est encore possible d'utiliser des unités comme le pt (point) ou le pc (pica), qui proviennent de leur utilisation par les imprimantes il y a 20 ans. Il est important de noter cependant que le px est la seule unité créée et conçue pour le CSS. Cependant, le px est aussi une relique du passé :

Pour avoir une idée de l'apparence du px, prenez un écran cathodique des années 90 : le plus petit point qu'il peut afficher mesure environ 1/100e de pouce (0.25mm) ou un peu plus. L'unité px tire son nom de ces pixels d'écrans.

Et au fil des annĂ©es, de nouvelles unitĂ©s ont Ă©tĂ© ajoutĂ©es pour rĂ©pondre Ă  de nouveaux besoins. C'est ainsi que les unitĂ©s em, rem, vh et vw ont rejoint la collection. Il est Ă©vident que les personnes qui les ont crĂ©Ă©es avaient une problĂ©matique spĂ©cifique en tĂȘte. Par exemple, sont arrivĂ© trĂšs rĂ©cemment les dvh et les dvw qui rĂ©pondent aux nouveaux besoins des smartphones. Donc si dans un projet uniquement sur PC vous trouvez des unitĂ©s dvh ou dvw vous savez que c'est un abus. Ce genre de comportement est plus prĂ©sent qu'on ne le croit car les raisons d'ĂȘtres des polices sont souvent mĂ©connu ou oubliĂ©es avec le temps.

homer simpson dur de choisir

L’Intox de l’accessibilitĂ©

Avant d'aller plus loin dans le détail du choix des unités, je tiens à remettre en question une légende. Les unités rem et em sont souvent présentées comme étant plus intéressantes pour l'accessibilité. Cet argument était vrai dans le passé ! Ce n'est plus le cas aujourd'hui. En effet, dans les années 2000-2005, la plupart des navigateurs ne s'adaptaient pas aux textes utilisant des unités absolues comme le px. Cependant, les navigateurs modernes s'adaptent désormais à tous les types d'unités, qu'elles soient absolues ou relatives.
Par conséquent, il n'est plus nécessaire d'utiliser des unités responsives pour faciliter l'accessibilité de vos sites.

Les unités responsives

Simplement pour vous rappeler de quoi on parle, et cité les plus courantes.

em rem % vh&vw ch
La valeur dĂ©pend de la taille de la police du parent La valeur dĂ©pend de la taille de la police de l’élĂ©ment html L'unitĂ© de pourcentage (%) redimensionne un Ă©lĂ©ment en fonction de la taille de son parent. 1% de la hauteur/largeur de la zone d'affichage (viewport) Relatif a la largeur du caractĂšre ‘0’ de la font-size utilisĂ© dans votre projet

Le problĂšme des em

Cette unité relative à une forte tendance à devenir trÚs vite autre chose que ce que vous aviez prévu. Si je définis une taille de police de 20 px dans mon parent, puis que j'ajoute un enfant avec un autre enfant en dessous, et que chacun d'eux utilise des em, on se retrouve rapidement avec des tailles complÚtement aléatoires.

schema 1

Bien que l'utilisation des em pour définir une taille de police en fonction d'une autre taille de police soit acceptable, il est plus problématique de l'utiliser pour définir la taille maximale du container.

Cas d’utilisation des em, vous pouvez les utiliser pour dĂ©finir la typographie Ă  travers votre projet de maniĂšre simplifiĂ©e, exemple : “Un titre 1 fait 4 fois la taille d’un paragraphe” ⇒

h1 {
font-size : 4em;
}
Enter fullscreen mode Exit fullscreen mode

Cependant, cela signifie que vous devez avoir les informations de la maquette qui vous indiquent : "tel Ă©lĂ©ment doit ĂȘtre exprimĂ© en fonction de la taille de la police de tel autre Ă©lĂ©ment". Si vous ne disposez pas de ces informations, n'utilisez pas les em !

En effet, nous ne souhaitons pas induire de comportement qui ne soit pas requis par le business. Si le designer ne vous a pas donné de relation proportionnelle à la taille de la police du parent, alors n'utilisez pas les em !

Surtout les cas oĂč les designers ont le temps et les moyens de calculer tout cela Ă  l'Ă©chelle d'une application entiĂšre sont trĂšs rares. Il vaut donc mieux oublier l'utilisation quotidienne des em.

Autre problùme, si vous ne changez pas la taille de votre police au niveau de votre parent, alors vous serez simplement en train d’utiliser un multiple de 16px. A ce moment là, pourquoi conserver les em ?

Le risque des rem

La solution pour contrer cette histoire de cascade est d’utiliser les rem. Puisque au lieu d’utiliser la taille de la police du parent, on utilise la taille de la police de l’élĂ©ment html.

schema 2

Mais alors du coup, si rien ne change la taille de la police de l'élément HTML, que se passe-t-il ?

En fait, rien. Tous vos dĂ©veloppeurs utiliseront un multiple de 16 px, car la taille de police par dĂ©faut de l'Ă©lĂ©ment racine est de 16 px. C’est tout, sans forcĂ©ment qu’ils ne comprennent pourquoi. Cependant, tout le monde aura l'impression de faire du “design responsive”. En soit, nous n’introduisons pas d'erreurs dans le code, mais nous amenons la grande majoritĂ© des dĂ©veloppeurs Ă  ne pas pouvoir comprendre leur design. C'est comme ajouter une couche de flou supplĂ©mentaire au fichier CSS.
En bref, les rem ne doivent ĂȘtre utilisĂ©s que si votre designer vous a fourni les rĂšgles sur les tailles de police. D'autant plus lorsqu'il s'agit d'exprimer autre chose que la taille de la police avec un multiple d'une taille de police.

La sauce magique em + rem

Bien sûr, le vrai enfer apparaßt lorsque l'on mélange les deux. En effet, on ajoute une couche de flou sur des comportements non souhaités. De ce fait, les valeurs n'ont plus aucun sens et les effets de bord sont à leur comble.

schema 3

Dans cet exemple, personne n'a jamais demandé 9,6 px de marge ou de gap. Pour utiliser correctement les rem et les em ensemble, il faut une maßtrise totale de votre CSS et de votre design. Dans le cas contraire, préparez-vous à devoir ajouter des breakpoints et des !important partout dans votre code pour contrÎler les valeurs.
Notez que dans mes exemples, l'effet de cascade n'a que 2 niveaux de profondeur. Cependant, dans une application moderne, on obtient rapidement des profondeurs bien plus élevées.

Mais alors, on met des px partout ?

Bien que cela puisse paraßtre contre-intuitif, la responsivité ne s'exprime pas à travers les unités. Il est plus important de maßtriser correctement les breakpoints et les layouts.

La taille de vos composants est généralement déterminée par la place que vous leur donnez dans votre layout. L'utilisation de px pour les marges et les paddings ne pose pas de problÚme. En théorie, 5 px de marge sur un écran de 1080 x 720 px et sur un écran de 400 x 800 px sont presque équivalents. En pratique, on aura plutÎt tendance à jouer sur la présence de certains éléments ou leur aspect général, plutÎt que sur la taille des marges.

mobile version of deepl

pc version of deepl
Les marges des Ă©lĂ©ments restent les mĂȘmes, mais le layout change !

Le choix de l'unitĂ© doit toujours ĂȘtre motivĂ© par la production d'un comportement souhaitĂ©. L'utilisation des px par dĂ©faut n'est pas une mauvaise chose. Au contraire, elle est prĂ©fĂ©rable Ă  toute autre unitĂ© relative. Le principal avantage du px, c'est sa simplicitĂ©. Bien sĂ»r, il est possible de faire n’importe quoi avec cette unitĂ© absolue, mais cela ne vous crĂ©era pas de nouvelles erreurs.

gif de madame qui fait des calculs

Conclusion

Vous l’aurez compris, le but de cet article n'Ă©tait pas de vous prĂ©senter les bonnes pratiques en CSS. Ce n'Ă©tait pas non plus de vous expliquer le fonctionnement des tailles de police ou des unitĂ©s. Simplement de vous faire sortir de la tĂȘte que l'utilisation des rem ou des em est la clĂ© de la responsivitĂ©. Il sera toujours plus simple de rajouter des rĂšgles sur des px que de devoir comprendre des rem,em mal placĂ©. Si j'ai rĂ©ussi ne serait-ce qu'un tout petit peu Ă  vous faire rĂ©flĂ©chir sur votre utilisation des polices relatives, alors c'est rĂ©ussi !
Mort aux rem sans design system, mort aux em sans information business. Il est temps de mettre fin à la ségrégation des px, qui est non seulement injustifiée, mais aussi une source de torture quotidienne.

podium ou les px arrivent premier et les rem ne sont pas sur le podium

Source

Voici une suite d’articles trĂšs sympas que j’ai utilisĂ©s pour produire cette article
when-and-where-to-use-rem-and-em-units-in-web-design
css-unit
Unités Css:em,px,rem...
Comment svh, lvh et dvh peuvent améliorer votre conception réactive

Top comments (0)