Est-ce mauvais de travailler avec des pixels en CSS?

Est-ce 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 acceptable de travailler avec eux dans des gammes de 1-100?

C’est une question difficile, car la réponse dépend principalement de votre situation.

Les pixels ne sont pas si mauvais que je les utilise surtout. (Parfois même pour les tailles de police.)
Je fixe généralement l’élément de bloc externe de la mise en page selon une taille donnée (pixels avec des dispositions à largeur fixe et des pourcentages avec des dispositions fluides), et à l’intérieur des éléments, lorsque cela est possible.

Il y a des éléments qui ne peuvent tout simplement pas être stylés avec des pourcentages ou des em , en particulier les éléments les plus sophistiqués provenant de concepteurs graphiques qui ne comprennent pas ces principes.

Par exemple: si vous avez une colonne sur votre site avec un style simple, vous pouvez facilement définir sa largeur à un pourcentage, mais si elle a une image d’arrière-plan avec une largeur spécifique qui ne tient pas compte de la mise à l’échelle avec une largeur fixe. Dans ce cas, vous devez vous assurer que le rest de la page occupe correctement la largeur restante.

Notez que vous pouvez utiliser des pixels avec des pourcentages ensemble.
Par exemple, ceci est un extrait de l’une de mes dernières applications Web:

 min-width: 800px; width: 80%; max-width: 1500px; 

Le choix dépend également de la conception ou de la disposition que vous souhaitez réaliser.

Pour une mise en page à largeur fixe , les valeurs de pixel sont correctes. Si un concepteur vous donne une image Photoshop contenant des éléments très sophistiqués, ce qui serait extrêmement compliqué de penser à la façon dont il redimensionnerait, vous devriez certainement y aller.

Si votre mise en page doit être dynamic , vous devez utiliser des pourcentages pour vous assurer qu’elle s’agrandit au fur et à mesure que la résolution change, et vous pouvez utiliser l’extrait de code ci-dessus pour le rendre plus beau dans les scénarios où il semble insensé.

Certaines mises en page (par exemple, imaginez si StackOverflow occuperait tout l’espace) sembleraient plutôt laides par exemple. 1920 pixels – les largeurs des lignes seraient si incroyablement élevées qu’il serait extrêmement difficile de les lire.
C’est à quoi sert la max-width . Même dans certaines configurations dynamics, vous devrez limiter la largeur maximale de votre site pour optimiser la convivialité et la lisibilité.

Et également prendre en compte les écrans plus petits.
Il est vrai que plus personne n’utilise un ordinateur de bureau 800 × 600, mais de nombreuses personnes naviguent sur le Web avec des appareils mobiles dont la résolution est encore plus faible.
C’est ce à quoi sert min-width : pour que votre mise en page dynamicment étendue soit moins encombrée sur de plus petites résolutions.

J’espère que ça aide.

MODIFIER:

Le Smashing Book a de très belles reflections sur le sujet.

EDIT 2:

Je ne veux pas que mon article ressemble à ce que je souhaite pour que vous imposiez un dimensionnement basé sur les pixels à vos visiteurs.
(Apparemment, certaines personnes dans les commentaires m’ont mal compris de cette manière.)

Pour le vider:

Je crois que la disposition idéale est celle qui s’adapte bien à toute résolution ou réglage possible.
Cependant, nous ne pouvons pas toujours tout faire parfaitement. Le temps / les ressources et le public cible sont la clé pour déterminer si votre site nécessite des fonctionnalités avancées 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 nécessitant des ajustements plus avancés sur le site, cela en vaut peut-être la peine.
(Bien sûr, parfois, nous le faisons nous-mêmes pour avoir le sentiment de faire les choses correctement, mais ce n’est pas toujours une décision financièrement solide.)

Cependant, vous devriez faire les recherches appropriées sur le type de site qui sera, qui sera les visiteurs, etc., avant de décider des mises en page et si cela vaut la peine de les rendre plus fluides ou plus dynamics.

Toutes les mesures ont leurs propres objectives:

  • Utilisez des pixels pour les objects basés sur des pixels , comme les bordures. Vous ne voulez probablement pas une bordure qui a une largeur de 1.3422 pixels.

  • Utilisez des mesures centrées sur le texte (em, ex) pour les éléments textuels , tels que les zones de contenu, les étiquettes et les zones de saisie. C’est un moyen facile de vous assurer que vous avez de la place pour du texte d’une certaine longueur et largeur.

  • Utilisez des pourcentages pour les objects basés sur des fenêtres , comme les colonnes.

Il y a des exceptions, bien sur. Par exemple, vous souhaiterez peut-être spécifier une largeur de colonne minimale en pixels. Mais suivez ce qui précède et vos pages seront bien adaptées. TOUJOURS zoomer et dézoomer sur vos pages pour voir comment elles fonctionnent avec différentes tailles de police et formes de navigateur – ne soyez pas surpris plus tard.

Tailles de police

Je pense que vous devez d’abord comprendre les problèmes liés au travail avec les pixels en CSS:

  • Zoom dans les navigateurs plus anciens est cassé. 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 la taille des fonts.
  • Tout le monde verra le 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 utilisez uniquement em et d’autres tailles relatives, vous respecterez la décision des utilisateurs qui le modifient. Ceci est particulièrement important sur les sites contenant beaucoup de texte, surtout s’il y a plus d’utilisateurs plus âgés. D’un autre côté, si la conception d’un site est importante, je pense qu’il est possible et justifiable d’utiliser px pour spécifier des tailles de police sans rupture de la facilité d’utilisation.

En fin de compte, vous devez prendre la décision vous-même, et cela dépend des circonstances exactes, mais je pense que spécifier les tailles de police en pixels est acceptable .

Au fait, lorsque vous travaillez avec em pour spécifier la taille de la police, il est conseillé de définir le body sur font-size: 62.5% de la font-size: 62.5% . Cela signifie que la taille de la police de base est 10px, donc 1em est 10px, 1.6em 16px et ainsi de suite, ce qui facilite la reflection en pixels lors de la conception en utilisant ems . Je trouve toujours frustrant de travailler comme ça, surtout quand les valeurs de ems sont en cascade. Il existe des sites très pratiques comme PXtoEM.com qui vous aident.

Problèmes de mise en page

L’écran est une disposition basée sur les pixels , donc les pixels sont un choix intuitif pour beaucoup de choses. Le principal problème est que les différents utilisateurs ont des tailles d’écran différentes . Comme d’autres l’ont fait remarquer, l’utilisation de min-width et max-width en pixels avec la width en pourcentage est un moyen utile de respecter la taille de l’écran, tout en empêchant que votre site soit déraisonnablement plié ou étiré sur de très petites et très grandes fenêtres. .

Cependant, j’éviterais généralement cette approche en faveur des requêtes médias CSS . Vous pouvez ensuite utiliser des morceaux de largeur fixe et élargir la disposition (entre autres choses) à mesure que la taille de l’écran augmente. Cependant, les requêtes de médias CSS, comme toutes les technologies Web cool, souffrent d’un manque de prise en charge du navigateur. En particulier, IE8 et les versions antérieures ne les prennent pas en charge, bien qu’il existe des correctifs JavaScript. D’un autre côté, l’iPhone et les autres appareils de poche les prennent en charge, et je les recommande fortement si vous souhaitez que votre site soit esthétique sur ces appareils.

Je pense que les grids à largeur fixe conviennent . Les systèmes de grid à largeur fixe comme 960 Grid System sont assez populaires en eux-mêmes, et il y a tellement d’autres sites avec une largeur fixe que je doute que vous entendiez beaucoup de plaintes si vous faisiez cela. Les ordinateurs de poche qui ne disposent pas d’écrans de grande taille posent problème, mais c’est là qu’il convient d’utiliser les requêtes de médias CSS.

Conclusion

En fin de compte, tout dépend de qui sont vos utilisateurs, de ce que vous devez prendre en charge et de ce que vous voulez que votre site ressemble, mais il n’ya rien d’inconvénient à utiliser des pixels en CSS .

Cela dépend de ce que vous dessinez. Pour les colonnes, par exemple, la largeur devrait probablement dépendre de la taille du texte pour garantir une apparence optimale sur plusieurs résolutions / écrans. Si vous souhaitez diviser votre page en deux parties, vous devez utiliser des pourcentages. Mais si vous souhaitez une bordure 1px entre ces deux parties, indépendamment de la résolution, utilisez des pixels.

Fondamentalement, cela dépend de qui vous embauche et par conséquent de l’audience de votre travail. Pour des raisons institutionnelles (où le contenu doit prévaloir sur la forme, comme un projet gouvernemental), vous feriez mieux de travailler avec .em ou%, ils sont plus difficiles à contrôler, mais ils seront vraiment conviviaux en termes d’accessibilité.

Si nous parlons de sites Web corporatifs (où la forme est l’affaire), 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 assurez-vous 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’utiliser efficacement.

Meilleure option: plutôt que de concevoir un site Web compatible pour toutes les plates-formes (ce qui aboutira à une conception multi-déficiences) proposez à vos clients des versions spéciales du site adaptées à chaque demande, une meilleure pratique et une meilleure activité pour un concepteur. ..

Je dirais d’éviter si possible, sauf dans certains cas.

Par exemple, pour une bordure mince, il suffit de spécifier 1px.

Pour les atsortingbuts de style max- et min- , c’est correct. Mais alors, faites que l’atsortingbut non-max / min soit un pourcentage si possible.

C’est vraiment une bonne question que j’ai posée à plusieurs resockets auparavant. N’étant pas un concepteur Web hardcore (je suis plutôt du côté du développement), j’ai généralement demandé aux concepteurs avec qui je travaillais ce qu’ils pensaient, et voici ce que j’ai distillé:

L’utilisation de pourcentages ou de pixels pour le dimensionnement d’éléments, etc., dépend vraiment de vos goûts personnels ou des exigences de chaque cas. Si vous en avez besoin pour l’échelle, ou s’il est bien adapté, utilisez des pourcentages. Sinon, utilisez des pixels. Les personnes ici ont utilisé les exemples de colonnes majeures dans une page qui doivent être fluides, mais les frontières peuvent nécessiter la précision d’une mesure de pixel.

De toute évidence, le dimensionnement des images est étroitement lié à leur résolution et à leurs unités de pixels, donc je les utilise toujours dans ce cas.

Cependant, l’utilisation de dimensionnement par rapport aux pixels ou à la taille des points pour le texte est une autre méthode. La plupart des gars avec qui je travaille ont un style de réinitialisation de base pour les tailles de police, ce qui porte la taille de 1em à environ 12px. Ils utilisent ensuite les ems partout ailleurs (ou aussi près que possible) pour dimensionner les éléments de texte, les contrôles de formulaire, etc. C’est comme ça que je fonctionne maintenant, car il semble bien fonctionner sur divers navigateurs, systèmes d’exploitation et DPI sur les ordinateurs de bureau et les ordinateurs portables. Je ne peux pas certifier pour les appareils mobiles.

L’accessibilité est la clé cependant – si vous avez besoin de rendre quelque chose utilisable pour les personnes handicapées ou de travailler sur une variété de périphériques, même les choses que vous pourriez considérer comme anciennes, la mise à l’échelle sera une nécessité. Intégrez-le dans votre modèle pour concevoir le site dès le départ et vous réaliserez peut-être que le dimensionnement absolu des pixels n’est même pas nécessaire dans ce cas.

Par exemple, une conception à forte intensité artistique va probablement être conçue à une seule échelle, mais le nouveau site Web éducatif destiné aux utilisateurs handicapés devra travailler dans diverses situations.

Rappelez-vous que le W3C a mis au point une variété de méthodes de dimensionnement et de mise à l’échelle pour leurs spécifications: la flexibilité. Faites tout ce qui convient le mieux et fonctionne bien pour votre public (comme Moustard l’a dit plus tôt).

Je ne suis pas un expert css / html, mais la convention est d’utiliser des pixels pour les conteneurs externes et des pourcentages pour les objects internes.

Une règle de base que j’ai avec quiconque examine ma mise en page est la règle des trois pixels . Il est rare que tout s’aligne exactement dans chaque navigateur. Nous avons convenu que l’effort l’emporte sur les avantages du déplacement de trois pixels ou moins.

Faites la bonne chose par défaut. Si un utilisateur visite votre site avec le javascript désactivé et aucun cookie de préférence, vous devez lui proposer une page Web aussi fonctionnelle et accessible que possible.

Votre feuille de style par défaut ne doit rien prendre en compte dans la fenêtre du navigateur et restituer une page fonctionnelle, quelle que soit la qualité, jusqu’à une résolution de 320×320 et des tailles illimitées. Si la fidélité photographique est si importante que vous ne pouvez pas faire confiance à la mise à l’échelle du navigateur, et parfois elle l’est, vous devez utiliser des mesures de pixels (au moins minimales) pour les éléments encapsulant des images de taille fixe. les choses importantes étant couvertes. La spécification des largeurs minimales et des pourcentages devrait vous donner le contrôle dont vous avez besoin tout en donnant à vos utilisateurs l’accessibilité dont ils ont besoin. Même si l’accessibilité n’est pas un problème maintenant, ce sera plus tard si le site réussit.

Lorsque vous en savez plus sur la fenêtre du navigateur, vous pouvez utiliser des largeurs fixes dans d’autres feuilles de style, si l’importance de préserver la conception justifie le travail supplémentaire.

Si vous visez une taille fixe, les pixels sont corrects. Mais si vous souhaitez que votre mise en page présente un bon rendu sur diverses résolutions / tailles d’écran, vous devez vous en tenir à des mesures plus relatives, telles que les pourcentages. La plupart des gens ciblent ce dernier.

C’est correct si c’est ce qu’il faut pour plaire à votre client. La plupart du temps, vous ne pouvez pas équilibrer la quantité d’espace disponible dans différentes tailles d’écran avec seulement des pourcentages. Les requêtes médias CSS3 aident ici, mais l’adoption rest problématique.

Je préfère le pixel dans la plupart des cas. Par exemple – largeur par défaut du contenu ares: 960px. Dans “1024” ça va aller, avec de petits espaces libres des deux côtés de l’écran. Mettez un peu de dégradé ou de fond là-bas. Dans “1280” ou “1440” ou “1680”, ou peu importe – il y aura un écart de plus en plus grand, mais ça aura l’air sympa. Oui, pour 800 – ce site sera laid. Mais on s’en fout? Tous les principaux acteurs ont abandonné le support pour 800. Il y a trop peu de personnes avec cette résolution.

Il existe de nombreux sites différents, où %% sera une solution bien meilleure, cependant.

Les blocs de construction d’un écran sont des pixels. Vous ne pouvez pas vous tromper avec des tailles de pixels fixes. Comme d’autres affiches l’ont mentionné, vous pouvez également utiliser des pourcentages ou des «em» pour un substitut évolutif.