Les Pixels Sont Morts: Pourquoi Vous Devriez Arrêter D’Utiliser Des Pixels En CSS

Voulez-vous concevoir des sites Web comme en 1999? Les pixels sont la voie à suivre. Allez rétro, respectez les normes car ce que vous savez fonctionne déjà et tant que cela fonctionne, tenez-vous sur votre pelouse et secouez vigoureusement le poing vigorously

Cet article ne concerne pas les petits pixels rouges, verts et bleus que vous voyez sur votre écran, ne vous inquiétez pas, ils vont bien. Il s’agit de l’utilisation des pixels dans HTML & CSS. Il n’y a pas besoin de théorie, en pixels CSS, pas d’échelle #f-ing, lancez des crédits!

Il Doit Y Avoir Une Bonne Raison Pour Laquelle…

Le web est basé sur des normes vieilles de plus de 21 ans non conçues pour le monde d’aujourd’hui

Exodus 12:8

La même nuit, ils doivent manger la viande rôtie au feu

La Bible suggère que nous devrions manger de la viande d’animal le jour de l’abattage. Mais nous avons maintenant des réfrigérateurs, des congélateurs et des aliments en conserve comme solutions aux problèmes nouveaux et anciens.

CSS1 dit:

Les écrans sont à peu près tous de la même taille, utilisez donc des polices statiques

Nos exigences ont changé depuis 1996. Nous avons maintenant une plus grande variété d’appareils, de résolutions et de rapports d’affichage à prendre en compte. Malgré l’introduction de nouvelles fonctionnalités, contrairement à l’industrie alimentaire, la technologie sous-jacente n’a pas changé en raison de:

Rétrocompatibilité

Et à juste titre parce que maintenant nous devons tous endurer la misère d’Internet.

Les Malentendus De La Taille Des Polices

Dans le passé, j’ai discuté du sujet des idées fausses sur la taille des polices avec plusieurs collègues développeurs et concepteurs.

La réaction qu’ils donnent habituellement est comme si je leur disais que le Père Noël n’est pas réel pour la toute première fois

La taille des polices ne correspond pas spécifiquement à la taille des pixels à l’écran

  • Une famille de polices à 16 pixels pourrait avoir un caractère « A » de 24 pixels de haut, une autre famille de polices à 16 pixels pourrait avoir un caractère « A » de 26 pixels de haut.
  • Ne tenant pas compte de la façon dont les navigateurs et les systèmes d’exploitation gèrent le crénage, le lissage et, surtout, les ratios de pixels de l’appareil de différentes manières.
  • Les agents utilisateurs ont chacun un ensemble différent de valeurs par défaut en plus de cela.

Veuillez donc arrêter toute discussion sur « pixel perfect » sur le Web, ce n’est pas possible sauf si vous visez à concevoir une page statique pour un seul navigateur sur une seule taille d’écran pour un seul type d’appareil.

N’UTILISEZ PLUS JAMAIS DE PIXELS POUR IMPLÉMENTER DES SITES WEB !

Je ne suis pas le premier et ne serai pas le dernier à cracher cela, alors vérifiez les autres pécheurs avant de jeter la première pierre. Respirez profondément…

  • PRÉCISION EN VIRGULE FLOTTANTE: Toutes les unités de police en CSS (y compris px) sont capables de gérer les flottants dans les navigateurs modernes. Généralement, si 1px est « supposé » la taille équivalente d’un pixel d’écran (ce qui est incorrect), il peut sembler inutile d’utiliser des décimales lors de la conception d’un appareil avec un rapport de pixels de 1. Si l’affichage de ces métriques sur un périphérique avec un DPR de 2 / 3 ou 4, une quantité apparente de précision est perdue en raison de l’évitement des décimales. REM et EM « encouragent » plus de précision via l’utilisation décimale.
  • C’EST UNE ILLUSION: les pixels en CSS ne sont PAS de vrais pixels de taille d’écran. Ce sont en fait des unités de référence optiques. Cette confusion pousse parfois les développeurs Web « professionnels » et expérimentés à faire des choses stupides comme créer des mixins de conversion de pixels en EM pour les pré-processeurs CSS. Cela pourrait être la raison pour laquelle certains passent autant de temps à se chamailler avec les concepteurs UX sur de minuscules différences de marge / remplissage. Le ratio de pixels de l’appareil représente la taille de l’unité de référence optique et cela dépend uniquement de l’appareil ou du niveau de zoom du bureau défini par l’utilisateur.
  • PX ENTRAÎNE PLUS DE MAINTENANCE: Ne rien dire de nouveau ici, mais il est généralement beaucoup plus facile de maintenir les pourcentages par rapport aux conteneurs de taille de pixel.
  • ÉCHELLE RELATIVE DES DIMENSIONS DÉFINIES AVEC LA TAILLE DE LA POLICE: Utilisez toujours des unités REM ou EM aux endroits où vous devez généralement définir une largeur ou une hauteur fixes. Les conteneurs avec des dimensions EM sont relatifs à sa taille de police. Avec les unités EM, si vous mettez à jour la taille de la police d’un conteneur de texte, la largeur ou la hauteur (définie dans EMs) évoluera proportionnellement, ce qui signifie que vous ne modifiez que 1 valeur au lieu de 3 lorsque vous utilisez des pixels. Avec REM, cela est vrai si vous modifiez la taille de la police racine du document.

( Oui, EM est plus avancé que REM bien qu’il soit plus ancien, EM fonctionne également mieux pour les points d’arrêt de requête multimédia que REM sur tous les navigateurs pour une raison quelconque).

Il y a peu de circonstances où les pixels sont nécessaires et de ces circonstances, peu sont pour construire une mise en page réelle.

EM vs REM

L’utilisation d’images la plus triste de tous les temps.

Tu vois ce que j’ai fait là-bas ?

Une taille de police utilisant EM est relative à la taille de police de son conteneur parent. Mais parfois, la composition est indésirable et plus difficile à maintenir. Les unités REM sont relatives au document. En cas de doute, utilisez REM (IE9+) pour plus de simplicité.

Utilisation d’unités REM

Si vous venez de l’ancien monde des pixels, il peut être difficile de commencer soudainement à utiliser des unités REM. Voici quelques conseils.

  1. Bien sûr, 1rem est 16px en CSS: mais 16px en CSS n’est pas une vraie métrique en pixels d’écran, surtout avec la taille de la police. Par conséquent, l’utilisation de REM nécessite le même jeu de devinettes d’essais et d’erreurs que vous avez fait tout le temps avec les pixels.
  2. ±0,5 puis ±0,25: Si vous devinez n’importe quel type de longueur, dès que vous êtes raisonnablement à proximité, incrémentez ou diminuez de 0,5, puis de nouveau de 2,5 avant de faire des suppositions plus spécifiques. Cela permet généralement de gagner du temps.
  3. Utilisez une calculatrice: La barre d’adresse est une calculatrice en chrome, duh!

L’Avenir Est Cartésien

Exemple utilisant MIMETIC.js utilisant des unités et des pourcentages rem.

CSS via HTML utilise déjà un Système de coordonnées cartésiennes, ce n’est pas ce que je conteste ici. Le problème est que dans l’ensemble, il manque l’ingrédient clé « proportion ». Tous les éléments peuvent être proportionnels par rapport à la fenêtre d’affichage en utilisant %, vw ou vh à l’exception de la propriété font-size. Même les unités REM ne peuvent pas aider. les unités vw et vh ne sont pas prises en compte car elles brisent l’accessibilité du zoom dans les navigateurs de bureau lorsqu’elles sont utilisées avec la taille de la police.

CSS & HTML constituent ensemble un framework 2D impur

Ce n’est pas le cas avec SVG. Mais SVG pour l’instant ne comporte pas d’habillage de texte ni de modèle de mise en forme.

Nous sommes coincés en 1996. Pour faire entrer la conception Web dans le 21ème siècle, nous avons au moins besoin d’un système 2D proportionné pour la taille des polices.

Nous devons tout conserver dans l’axe des abscisses (largeur de la fenêtre) proportionnellement. Cela rend également les éléments de l’axe des ordonnées à l’échelle proportionnellement, mais la mise à l’échelle de l’axe des ordonnées n’affectera pas la mise à l’échelle de l’axe des abscisses.

Il y a eu quelques tentatives JavaScript pour faire évoluer les polices proportionnellement dans le navigateur, certaines utilisent des pixels et d’autres des unités em / rem. Ceux qui utilisent des pixels sont défectueux.

Alors Pourquoi Les Pixels Sont-Ils Morts?

  • Ils sont statiques (Mais techniquement aussi la plupart des autres)
  • Ils ne respectent pas la taille de la police racine après les modifications (Ils ne sont pas vraiment relatifs à la taille de la police racine comme les unités REM et EM)
  • Les propriétés telles que les marges, le remplissage et la hauteur de ligne ne s’adaptent pas naturellement lorsqu’elles sont redéfinies en ligne.
  • Ils sont supposés entiers, ce qui entraîne généralement des implémentations moins précises sur une variété de rapports de pixels différents.
  • Apparemment, Bootstrap 4 supprime des pixels pour REM.
  • Les pixels créent l’illusion d’être égaux aux pixels à l’écran, ce qui conduit à des idées fausses et, à long terme, devient déroutant pour les nouveaux développeurs.
  • Il est peu probable que les pixels deviennent une solution viable pour la mise à l’échelle des polices à l’avenir, car la conception repose globalement sur les proportions.

C’est mon point de vue sur la raison pour laquelle il n’y a pas d’avenir sérieux pour les pixels dans la conception Web!

Merci d’avoir toléré 😉

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.