Gestion des tailles : px, rem ou mix ?

Bonjour.

Je suis en train de me créer un nouveau framework CSS. Dans cette démarche, je réfléchis aux règles de base. Parmi elles, il y a la gestion des tailles (block, marges, paddings, fontes…). Jusqu’à présent je suivais un concept assez courant il y a quelques années, notamment parce que les autres intégrateurs voulaient l’appliquer tel quel. Ce concept est celui du font-size défini à 10px sur le html et toutes les autres dimensions en rem en divisant par 10 la taille attendue en px.

html { font-size: 10px;}
h1 {font-size: 3rem;}
.toto {margin: 1rem 0 3.5rem}

Toutefois, j’ai l’impression qu’avec les navigateurs modernes qui gèrent correctement le zoom, cette façon de faire est obsolète. Je partais donc sur une logique de revenir à du px sur les objets et garder les rem pour les fontes. Mais un collègue me dit que tant qu’à faire on peut passer à du px pour tout. Du coup j’ai un doute.

Étant donné que je n’ai pas eu le temps de faire de la veille sur ces sujets depuis longtemps, j’aimerais avoir vos avis d’experts sur la question.

Derwoed a écrit :
Bonjour.
Je suis en train de me créer un nouveau framework CSS. Dans cette démarche, je réfléchis aux règles de base. Parmi elles, il y a la gestion des tailles (block, marges, paddings, fontes…). Jusqu’à présent je suivais un concept assez courant il y a quelques années, notamment parce que les autres intégrateurs voulaient l’appliquer tel quel. Ce concept est celui du font-size défini à 10px sur le html et toutes les autres dimensions en rem en divisant par 10 la taille attendue en px.

html { font-size: 10px;}
h1 {font-size: 3rem;}
.toto {margin: 1rem 0 3.5rem}

Toutefois, j’ai l’impression qu’avec les navigateurs modernes qui gèrent correctement le zoom, cette façon de faire est obsolète. Je partais donc sur une logique de revenir à du px sur les objets et garder les rem pour les fontes. Mais un collègue me dit que tant qu’à faire on peut passer à du px pour tout. Du coup j’ai un doute.
Étant donné que je n’ai pas eu le temps de faire de la veille sur ces sujets depuis longtemps, j’aimerais avoir vos avis d’experts sur la question.

Bonjour,
Perso, c'est :
- font-size:1EM sur la balise BODY
- toutes les mesures en REM (pas en EM trop contraignent par son côté relatif au conteneur)
et jusqu'à présent cela me convient parfaitement...

Salut.

OK, merci à tous les 2.

Sur le 10px sur le HTML, c’est une définition "pré-existante". Perso, ailleurs, je faisais en 62.5%, mais je n’avais pas remis en cause ce choix (un tort…).

Du coup, je vais partir sur un font-size à 62.5% sur HTML, avec des tailles de police en rem et tout le reste en px. Je garde toutefois sous le coude l’idée de taille en rem pour des marges qui devraient suivre la taille du texte. A voir si c’est utile…

Moi, après avoir pas mal utilisé les unités rem, j'ai tendance à utiliser les em (attention à l'héritage avec les éléments parents) afin de pouvoir obtenir une possibilité de zoom à l'aide de classes sur n'importe quel élément html déjà défini.

Avec cette technique nul besoin de créer des boutons "big" ou "small" par exemple, il suffira simplement de leur ajouter une classe '.zoom200' (200%) ou '.zoom50' (50%).

Exemple en ligne : Zoom
Modifié par Olivier C (12 Oct 2018 - 07:35)

Olivier C a écrit :
Moi, après avoir pas mal utilisé les unités rem, j'ai tendance à utiliser les em (attention à l'héritage avec les éléments parents) afin de pouvoir obtenir une possibilité de zoom à l'aide de classes sur n'importe quel élément html déjà défini.

Bonjour.

Oui, merci. J’ai déjà testé ce genre de principes. Je n’est jamais été fan du em : pas assez stable à mon goût. Toutefois, je reconnais volontiers que c’est pratique dans un environnement simple et surtout maîtrisé. Malheureusement ce n’est pas mon cas ici