em ou px, selon vous ? [Débat]

[Sergejack]

Je suis en train de faire beaucoup de lecture sur des recommandations portant sur le CSS et l'(X)HTML.

Une des choses qui me laisse perplexe c'est la recommandation de ne pas définir de taille en terme de pixels (px) mais plutôt de façon relative (em* et/ou %) et ce afin d'avoir des affichages toujours lisibles selon les préférences/besoin de chacun.
* ex aurait le désavantage de ne pas être constant selon les navigateurs et en tout cas selon les polices.

Ce qui me laisse perplexe c'est tout ce que j'ai pu lire et apprendre à propos de boutons/champs/... personnalisés à l'aide d'image de fond principalement.
Et s'il y a bien une lacune que je retiens du CSS avant sa version 3, c'est bien que les images de fond ont un taille constante qui se traduit en pixels.


Pour résumé :

Tout ce qui touche à l'emploie d'images de fond*, nous invite à employer des mesures en pixels et un design à taille figé.
Mais, surtout avec les grands progrès des mobiles, on nous vente les bienfaits (voir l’impératif) d'oublier les px pour travailler en em.
* de façon classique (css : background-image), il est possible d'utiliser des balises img et de superposer les éléments (est-ce bien raisonnable ?).

Qu'est-ce que vous en pensez ?

[thelvin]

Je pense d'abord à % ou em ou ex suivant les cas.

Mais j'utilise les pixels dans certaines conditions :
- Bordures, lignes horizontales, le genre de trucs qui est censé faire "quelques pixels," et où ça n'a pas d'importance si ce n'est pas à l'échelle des autres dimensions du navigateur.
- Taille des images et tout ce qui a une taille intrinsèque en pixels. Autant que possible j'essaie d'utiliser cette taille intrinsèque mais ça ne marche pas toujours.
- Lorsque je veux imposer une "largeur maximale" au contenu d'une page, pour ne pas avoir des paragraphes larges d'un demi-mètre sur les écrans 16/9. Là, la logique et de prendre référence sur la largeur maximale qu'on a avec les écrans 5/4, c'est à dire certaines résolutions en pixels. Ça n'a pas de sens de lui donner une taille relative à autre chose.
Par contre, pour bien faire, cette taille maximale devra pouvoir varier avec le temps, mais au fond c'est aussi le cas des techniques de présentation du contenu.

[Atomya Rise]

J'utilisais avant que des px pour les tailles d'écriture, or, à présent ce n'est plus le cas, car j'ai remarqué la nette différence entre les différents OS (windows, linux, mac)

En ce qui concerne le reste, je n'ai rien à redire là dessus. Les px sont très bien pour définir les tailles d'images, table...

Pour les %, je les utilise très régulièrement. Cela est bien pratique afin de parer aux différentes tailles d'écran !
Or cela m'est déjà arrivé d'avoir des soucis avec certaines fonctionnalités dans javascript quand on veux faire une mise en page bien spéciale avec des div.... Mais on trouve toujours une solution

En gros, pour répondre à la question, je ne pense pas qu'il y ai une unité bien particulière à utiliser, toutes restent indispensable selon le développement que l'on fait.

[Sergejack]

J'ai changé mes habitudes depuis quelques temps.
En effet après de nombreuses lectures sur le sujet et des sujets connexes je suis arrivé aux conclusions suivantes :

Il est préférable de n'avoir aucune taille fixée en px (pas même les images), cela entraverait vos tentatives de rendre un jour votre mise en page élastique.
Les appareils mobiles (smartphones, ...) sont de plus en plus dans nos mœurs et comme une mise en page élastique est plus adapté (je n'en ferai pas la preuve ici) à ces derniers, la mise en page élastique s'impose de plus en plus.

Il est donc préférable de toujours préférer EM et ensuite %.

À cela, il y a une exception : la taille originale de la police (font en anglais).
On ne peut (hélas) pas définir en css de taille de police en relation direct avec l'espace disponible (ce que fait %) du contenant du texte ciblé.
Par exemple si vous avez un calque (div) d'une certaine taille, vous ne pouvez pas indiquer en css que la police devrait avoir une taille équivalent à 25% de la taille du calque.
En réalité, la seule façon dont vous pouvez contrôler la taille absolue de la police, c'est avec une mesure exprimé en px.

Comme l'intérêt de EM est d'avoir un design directement relatif à la taille de la police, avoir un contrôle sur cette dernière est manifestement un point d'intérêt.
Cependant, pour ne pas rompre l’élasticité du design il ne faut pas définir des tailles de polices différentes à différents endroits.
En fait, l'idéal est de définir cette taille une seule fois et à l'élément le plus élevé de la structure auquel on puisse penser, cet élément est HTML.

Voici une mise en page typique de mise en application :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
HTML {
 font-size: 16px;
}
 
HTML, BODY {
	margin: 0em;
	padding: 0em;
}
 
/* Voici une de mes astuces ... */
/* Sur une vue de largeur x à y (exclu) pixel, apparaît l'intérêt d'un design élastique ... redimensionner la fenêtre fonctionne */
@media only all and (max-width:259px){html{font-size:12px}}
@media only all and (min-width:260px) and (max-width:279px){html{font-size:13px}}
@media only all and (min-width:280px) and (max-width:299px){html{font-size:14px}}
@media only all and (min-width:300px) and (max-width:319px){html{font-size:15px}}
@media only all and (min-width:320px) and (max-width:339px){html{font-size:16px}}
@media only all and (min-width:340px) and (max-width:359px){html{font-size:17px}}
@media only all and (min-width:360px) and (max-width:379px){html{font-size:18px}}
@media only all and (min-width:380px) and (max-width:399px){html{font-size:19px}}
@media only all and (min-width:400px) and (max-width:419px){html{font-size:20px}}
@media only all and (min-width:420px) and (max-width:439px){html{font-size:21px}}
@media only all and (min-width:440px) and (max-width:459px){html{font-size:22px}}
@media only all and (min-width:460px) and (max-width:479px){html{font-size:23px}}
@media only all and (min-width:480px) and (max-width:499px){html{font-size:24px}}
@media only all and (min-width:500px) and (max-width:519px){html{font-size:25px}}
@media only all and (min-width:520px) and (max-width:539px){html{font-size:26px}}
@media only all and (min-width:540px) and (max-width:559px){html{font-size:27px}}
@media only all and (min-width:560px) and (max-width:579px){html{font-size:28px}}
@media only all and (min-width:580px) and (max-width:599px){html{font-size:29px}}
@media only all and (min-width:600px) and (max-width:619px){html{font-size:30px}}
@media only all and (min-width:620px) and (max-width:639px){html{font-size:31px}}
@media only all and (min-width:640px) and (max-width:659px){html{font-size:32px}}
@media only all and (min-width:660px) and (max-width:679px){html{font-size:33px}}
@media only all and (min-width:680px) and (max-width:699px){html{font-size:34px}}
@media only all and (min-width:700px) and (max-width:719px){html{font-size:35px}}
@media only all and (min-width:720px) and (max-width:739px){html{font-size:36px}}
@media only all and (min-width:740px) and (max-width:759px){html{font-size:37px}}
@media only all and (min-width:760px) and (max-width:779px){html{font-size:38px}}
@media only all and (min-width:780px) and (max-width:799px){html{font-size:39px}}
@media only all and (min-width:800px) and (max-width:819px){html{font-size:40px}}
@media only all and (min-width:820px) and (max-width:839px){html{font-size:41px}}
@media only all and (min-width:840px) and (max-width:859px){html{font-size:42px}}
@media only all and (min-width:860px) and (max-width:879px){html{font-size:43px}}
@media only all and (min-width:880px) and (max-width:899px){html{font-size:44px}}
@media only all and (min-width:900px) and (max-width:919px){html{font-size:45px}}
@media only all and (min-width:920px) and (max-width:939px){html{font-size:46px}}
@media only all and (min-width:940px) and (max-width:959px){html{font-size:47px}}
@media only all and (min-width:960px) and (max-width:979px){html{font-size:48px}}
@media only all and (min-width:980px) and (max-width:999px){html{font-size:49px}}
@media only all and (min-width:1000px) and (max-width:1019px){html{font-size:50px}}
 
DIV.main {
 width: 20em;
 overflow: auto;
 background-color: red;
}
 
DIV.left {
 float: left;
 width: 50%;
 background-color: green;
}
 
DIV.right {
 float: right;
 width: 50%;
 background-color: blue;
}
</style>
</head>
<body>
<div class="main">
	<div class="left">
    left
    </div>
	<div class="right">
    right
    </div>
</div>
</body>
</html>

Je vous invite à tester cette page sous smartphone ou sur navigateur de bureau en redimensionnant la fenêtre.

[rotrevrep]

le px pour la police d'écriture et les images.
em éventuellement pour une image de fond

[ouldfella]

j'utilise que px, ya pas de casse tête quoi que je maitrise pas em vraiment, j'ai pas cherché son vrai utilité, je le ferai après avoir rédigé ce message

[dev14]

J'utilise les px mais je sais que les em sont à préférer, par contre les smartphones possèdent une telle définition en terme de mégapixels, que je doute que ça pose un problème, d'ailleurs mes sites ont toujours eu un bon rendement sur iPhone/blackberry, pas essayé sur d'autres supports. Et pourtant ils étaient gérés intégralement en px.

Donc je veux bien passer aux em, mais encore faut-il que je vois vraiment ce qui cloche avec les px, pour l'instant je n'ai pas vu de problème de disproportions lié aux px.

[Atomya Rise]

Envoyé par dev14

....mais encore faut-il que je vois vraiment ce qui cloche avec les px, pour l'instant je n'ai pas vu de problème de disproportions lié aux px.

L'un des soucis rencontré avec les px sont l'utilisation des différents OS...
Exemple, la police par défaut sous Windows et Linux sont différentes, et donc, d'une taille en px différente, ce qui créer des disproportions....

Ce n'est qu'un exemple.

[Sergejack]

Envoyé par dev14

J'utilise les px mais je sais que les em sont à préférer, par contre les smartphones possèdent une telle définition en terme de mégapixels, que je doute que ça pose un problème, d'ailleurs mes sites ont toujours eu un bon rendement sur iPhone/blackberry, pas essayé sur d'autres supports. Et pourtant ils étaient gérés intégralement en px.

Donc je veux bien passer aux em, mais encore faut-il que je vois vraiment ce qui cloche avec les px, pour l'instant je n'ai pas vu de problème de disproportions lié aux px.

Ce qui cloche avec les px c'est que ce sont des valeurs absolues.

J'ai principalement un site en taille relative, il ne me faudrait que 10 secondes pour multiplier sa taille par n'importe quel facteur.

Celui qui travail en px ne pourra certainement pas comme moi répondre à la question "Pourrais-tu faire le site 20% plus petit ?" "Aucun problème, ce sera fait dans 5 minutes".

Travailler en px est une grosse erreur pour toute partie de site dont la durée de vie continuera au delà d'un an.

EDIT: allez sur le site en question http://www.mygolfevents.be avec un mobile, vous verrez l'intérêt des tailles relatives quand vous constaterez que l'affichage est plein écran (même si vous pivotez votre mobile, rien qu'avec du CSS).

[dev14]

Vous préconisez quoi au juste? Pourcentages pour les dimensions, em pour les polices ou pourcentages aussi sur les polices? (ce que je n'ai jamais essayé)

[Atomya Rise]

Pour ma part, j'utilise les em car elle permet de se baser sur les réglages du navigateur...

Je n'ai jamais essayé non plus les "%" ni les "ex" qui sont les plus utilisés par les développeurs qui souhaite laisser le choix à l'utilisateur de réduire ou d'augmenter la taille de la police....

[sacha69]

Salut !

Personnellement, j'utilise les em pour les tailles de police uniquement et px pour le reste.

Il m'arrive d'utiliser % mais uniquement si je dois avoir des blocs extensibles.

[mara1]

Bonjour a vous tous

personnellement j'utilise les px, par exemple pour les tableaux et les div, j’essaie de préciser les dimension en px, après je dimensionne les width en %, et les em je n'avais jamais travaillé avec.

[Sergejack]

Envoyé par dev14

Vous préconisez quoi au juste? Pourcentages pour les dimensions, em pour les polices ou pourcentages aussi sur les polices? (ce que je n'ai jamais essayé)

Définissez une taille précise de police (si celle par défaut de l'utilisateur ne vous convenait pas) en px au niveau de l'élement HTML ou BODY.

Ensuite définissez toutes vos tailles principalement en em et si besoin est en %.
Il ne devrait jamais y avoir la moindre mention de px dans vos style sinon comme je le disais pour définir la taille initiale de la police.

Si vous indiquez par exemple

Code :

1
2
3
HTML {
 font-size: 16px;
}

et qu'un jour vous souhaitez augmenter la taille de tout votre site de moitié, il vous suffit de le changer en

Code :

1
2
3
HTML {
 font-size: 24px; /* = 16 * 1.5 */
}

[Melcain]

Personnellement je ne suis pas fan du % et je pense qu'on finit par avoir des résultats hasardeux. En général j'opte pour le px et les valeur fixe. Je changerais d'avis si un jour j'ai à travailler sur un site mobile friendly... à ce moment je prendrais aussi en considération max-height, max-width, min-height et min-width

En ce qui concerne l'unité em je pense que c'est une bonne charte pour la typographie en gardant à l'esprit que 1em = 16px

Code :

1
2
3
4
5
6
p {font-size:1em;
text-indent:1em;
letter-spacing:0.0625em;
line-height:1em;
padding:1em; margin:1em;
font-family: Century Gothic, sans-serif;}

remarque peut etre pas pour le letter-spacing:0.0625em;

[dev14]

Et vous faites comment pour gérer les % lorsque ces derniers sont si mal gérés sur les versions antérieures à IE7 (IE7 compris)?

http://www.webdevout.net/browser-support-css