28106 sujets

CSS et mise en forme, CSS3

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...
Administrateur
Hello,

Il existe toujours deux façons de zoomer sur la page :
1- le zoom graphique, par défaut, qui agrandit toute la page au-delà du viewport
2- le "zoom texte uniquement" qui n'agrandit que le contenu et qui ne s'active que manuellement en le trouvant dans les menus du navigateur

Une personne mal-voyante n'a presque aucun intérêt à employer le 1er car elle perd toutes les informations qui sortent du viewport et devra "deviner" où sont cachées les différentes zones.

En zoom texte, les polices fixes (pixel et autres) ne sont pas agrandissables.

Donc oui, il est toujours important de choisir des unités fluides pour les tailles de polices.

PS : si tu choisis une base de 10 pixels sur ton HTML, donc en unité fixe, toutes les unités qui vont en découler seront fixes Smiley ohwell Il vaudrait mieux opter pour 62.5% ou 0.625em ce qui reviendra au même mais qui ne fixera pas les tailles dans le marbre.

PS2 : tu trouveras un exemple concret ici : https://github.com/alsacreations/KNACSS/blob/master/sass/_library/_base.scss#L19

Bonne journée Smiley smile
Meilleure solution
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 Smiley cligne