Est-il mauvais, en termes de compatibilité, d'utiliser des nombres de pixels en CSS plutôt que des pourcentages ? Qu'en est-il des résolutions inférieures ? Est-il possible de travailler avec des plages de 1 à 100 ?
Réponses
Trop de publicités?Il s'agit d'une question difficile, car la réponse dépend essentiellement de votre situation.
Les pixels ne sont pas si mauvais, je les utilise aussi la plupart du temps. (Parfois même pour les tailles de police).
Je fixe généralement l'élément de bloc extérieur de la mise en page par une taille donnée (pixels avec les mises en page à largeur fixe, et pourcentages avec les mises en page fluides), et sur les éléments intérieurs, je fixe généralement des pourcentages lorsque cela est possible.
Il y a des éléments qui ne peuvent tout simplement pas être stylisés avec des pourcentages ou des em
surtout les trucs les plus sophistiqués provenant de concepteurs graphiques qui ne comprennent pas ces principes.
Par exemple : Si votre site comporte une colonne au style simple, vous pouvez facilement régler sa largeur sur un pourcentage, mais si elle comporte une image d'arrière-plan d'une largeur spécifique qui n'a pas été conçue pour être mise à l'échelle, elle n'est bonne qu'avec une largeur fixe. Dans ce cas, vous devrez veiller à ce que le reste de la page occupe correctement la largeur restante.
Notez que vous pouvez utiliser les pixels et les pourcentages ensemble.
Par exemple, voici un extrait de l'une de mes dernières applications web :
min-width: 800px;
width: 80%;
max-width: 1500px;
Le choix dépend également du design ou de la disposition que vous souhaitez obtenir.
Pour un largeur fixe la mise en page, les valeurs en pixels sont parfaites. Si un concepteur vous donne une image Photoshop qui contient des éléments vraiment fantaisistes et dont le redimensionnement serait extrêmement compliqué à imaginer, vous devez absolument opter pour cette solution.
Si votre mise en page doit être dynamique Vous pouvez également utiliser l'extrait de code ci-dessus pour améliorer l'apparence de l'image dans des scénarios où elle serait autrement insensée.
Certaines mises en page (par exemple, imaginez que StackOverflow occupe tout l'espace) seraient plutôt moches sur une largeur de 1920 pixels, par exemple - les largeurs de ligne seraient tellement élevées qu'elles seraient extrêmement peu pratiques à lire.
C'est ce que max-width
est pour. Même dans certaines mises en page dynamiques, vous devrez limiter la largeur maximale de votre site pour maximiser la convivialité et la lisibilité.
Et tenez également compte des écrans plus petits.
Il est vrai que plus personne n'utilise un ordinateur de bureau 800×600, mais beaucoup de gens naviguent sur le web avec des appareils mobiles qui ont une résolution encore plus petite.
C'est ce que min-width
sert à : rendre votre mise en page dynamiquement étendue moins encombrée sur les petites résolutions.
J'espère que cela vous aidera.
EDITAR:
Le site Un livre passionnant a de très bonnes idées sur le sujet.
EDIT 2 :
Je ne veux pas que mon article donne l'impression que je veux que vous imposiez à vos visiteurs un dimensionnement basé sur les pixels.
(Apparemment, certaines personnes dans les commentaires m'ont mal compris de cette façon).
Pour clarifier les choses :
Je pense que la mise en page idéale est celle qui s'adapte bien à toutes les résolutions et à tous les paramètres possibles.
Cependant, nous ne pouvons pas toujours tout faire parfaitement. Le temps/les ressources et le public cible sont les éléments clés pour déterminer si votre site nécessite cette fonctionnalité avancée ou non.
Je suggère que vous utilisiez la bonne chose pour le travail donné.
Si vous développez un site qui aura un pourcentage significatif de visiteurs qui nécessitent des ajustements plus avancés du site, cela peut en valoir la peine.
(Bien sûr, il arrive que nous le fassions pour nous-mêmes, pour avoir le sentiment de faire les choses de la bonne manière, mais ce n'est pas toujours une décision financièrement saine).
Néanmoins, vous devez effectuer les recherches appropriées sur le type de site, les visiteurs, etc., avant de décider des mises en page et de savoir si cela vaut la peine de les rendre fluides ou plus dynamiques.
Toutes les mesures ont leurs propres objectifs :
-
Utilisez les pixels pour les choses basées sur les pixels comme les frontières. Vous ne voulez probablement pas d'une bordure qui fasse 1,3422 pixel de large.
-
Utilisez des mesures centrées sur le texte (em, ex) pour les choses basées sur le texte. comme les zones de contenu, les étiquettes et les zones de saisie. C'est un moyen facile de s'assurer que vous avez de la place pour un texte d'une certaine longueur et largeur.
-
Utilisez les pourcentages pour les choses basées sur les fenêtres comme des colonnes.
Il y a des exceptions, bien sûr. Par exemple, vous pouvez spécifier une largeur minimale de colonne en pixels. Mais suivez les conseils ci-dessus et vos pages seront bien mises à l'échelle. Faites TOUJOURS des zooms avant et arrière sur vos pages pour voir comment elles fonctionnent avec différentes tailles de police et formes de navigateur - ne soyez pas surpris plus tard.
Taille des polices
Je pense que vous devez d'abord comprendre les enjeux qui existent lorsqu'on travaille avec des pixels en CSS :
- Le zoom dans les anciens navigateurs ne fonctionne pas. Par exemple, IE6 et IE7 ne redimensionnent pas le texte lors du zoom . La hauteur de ligne peut aussi être bizarre. Ces problèmes n'existent pas dans les navigateurs modernes, mais ils sont une raison pour laquelle beaucoup hésitent à utiliser des pixels pour les tailles de police.
- Tout le monde verra texte de la même taille si vous spécifiez la taille de la police en pixels. Les navigateurs ont une taille par défaut de 16px pour les paragraphes, donc si vous n'utilisez que des polices de type
em
et d'autres tailles relatives, vous respecter la décision d'utilisateurs qui le modifient. Ceci est particulièrement important sur les sites à fort contenu textuel, surtout si les utilisateurs sont plus âgés. D'un autre côté, si le design d'un site est important, je pense qu'il est possible et justifiable d'utiliserpx
pour spécifier la taille des polices sans nuire à la convivialité.
Au final, vous devez prendre la décision vous-même, et cela dépend des circonstances exactes, mais je pense que il est possible de spécifier la taille des polices en pixels .
D'ailleurs, lorsque vous travaillez avec em
pour spécifier la taille de la police, c'est un bonne idée pour définir le body
a font-size: 62.5%
. Cela signifie que la taille de base de la police est de 10px, donc que 1em correspond à 10px, 1,6em à 16px et ainsi de suite, ce qui facilite l'accès à l'information. penser en pixels lors de la conception à l'aide d'ems . Je trouve toujours frustrant de travailler ainsi, surtout lorsque les valeurs d'ems sont en cascade. Il existe des sites très pratiques comme PXtoEM.com qui aident à cela.
Problèmes de mise en page
L'écran est un mise en page basée sur les pixels Les pixels sont donc un choix intuitif pour de nombreuses choses. Le principal problème ici est que différents utilisateurs ont différentes tailles d'écran . Comme d'autres l'ont souligné, l'utilisation de min-width
y max-width
en pixels ainsi que width
en pourcentage est un moyen utile de respecter la taille de l'écran, tout en évitant que votre site soit déraisonnablement écrasé ou étiré sur les très petites et très grandes fenêtres.
Cependant, j'éviterais généralement cette approche en faveur de Requêtes média CSS . Vous pouvez alors utiliser des morceaux de largeur fixe et élargir la mise en page (entre autres) à mesure que la taille de l'écran augmente. Toutefois, les requêtes média CSS, comme toutes les technologies Web intéressantes, ne sont pas prises en charge par les navigateurs. Plus particulièrement, IE8 et les versions antérieures ne les prennent pas en charge, bien qu'il existe des correctifs JavaScript. En revanche, l'iPhone et d'autres appareils portables les prennent en charge et je vous les recommande vivement si vous souhaitez que votre site soit agréable à regarder sur ces appareils.
Je pense les grilles à largeur fixe sont bien . Les systèmes de grille à largeur fixe comme Système de grille 960 sont suffisamment populaires en soi, et il y a tellement d'autres sites qui ont une largeur fixe, que je doute que vous entendiez beaucoup de plaintes si vous faites cela. Les appareils portables qui n'ont pas de grands écrans posent un problème, mais c'est là que les requêtes média CSS doivent être utilisées. possibilité de tout spécifier en pixels et faire en sorte que votre site soit magnifique sur le bureau et sur l'iPhone.
Conclusion
En fin de compte, tout dépend de qui sont vos utilisateurs, de ce que vous devez prendre en charge et de l'aspect que vous voulez donner à votre site, mais il y a des choses que vous pouvez faire. il n'y a rien d'intrinsèquement mauvais à utiliser des pixels en CSS .
Cela dépend de ce que vous stylisez. Pour les colonnes, par exemple, la largeur devrait probablement dépendre de la taille du texte afin de garantir une apparence optimale sur plusieurs résolutions/écrans. Si vous voulez diviser votre page en deux parties, vous devez utiliser des pourcentages. Mais si vous voulez une bordure de 1px entre ces deux parties, indépendamment de la résolution, utilisez des pixels.
En fait, cela dépend de la personne qui vous engage et, par conséquent, du public auquel s'adresse votre travail. À des fins institutionnelles (où le contenu doit prévaloir sur la forme, comme dans le cas d'un projet gouvernemental), il est préférable de travailler avec des .em ou des %, qui sont plus difficiles à contrôler, mais qui sont très conviviaux en termes d'accessibilité.
Si nous parlons de sites web corporatifs (où la forme est l'affaire), le pixel sera un outil plus précis pour répondre aux attentes de votre client concernant sa marque. Une interface liquide (%, .em) est toujours une bonne chose quand elle est bien faite, mais n'oubliez pas de vérifier votre conception dans des conditions extrêmes et soyez sûr qu'elle sera stable.
Si vous travaillez avec des pixels, vous aurez un contrôle absolu sur l'aspect final de votre site, mais vous devrez assumer l'impossibilité pour certains utilisateurs de l'exploiter efficacement.
Meilleure option : plutôt que de concevoir un site Web compatible avec toutes les plates-formes (ce qui aboutira à un design multi-déficit), proposez à vos clients des versions spéciales du site adaptées à chaque demande, ce qui est une meilleure pratique et un meilleur business pour un designer aussi...